Nuxt•7d ago

Nuxt-ui tailwind themeing

I am trying to configure my tailwind 4 themes and set them for my nuxt-ui but i seem to be doing it wrong main.css

@import "tailwindcss" theme(static);
@import "@nuxt/ui";



@theme {
    --color-charcoal-900: #1E2124;
    --color-charcoal-700: #282B30;
    --color-charcoal-500: #36393E;
    --color-charcoal-300: #424549;

    --color-primary: #5865F2;
    --color-secondary: #E0E3FF;

    --color-success: #74FF97;
    --color-warning: #FFFD74;
    --color-danger: #FF7476;
  }

@import "tailwindcss" theme(static);
@import "@nuxt/ui";



@theme {
    --color-charcoal-900: #1E2124;
    --color-charcoal-700: #282B30;
    --color-charcoal-500: #36393E;
    --color-charcoal-300: #424549;

    --color-primary: #5865F2;
    --color-secondary: #E0E3FF;

    --color-success: #74FF97;
    --color-warning: #FFFD74;
    --color-danger: #FF7476;
  }

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'primary',
          neutral: 'charcoal-300',
          gray: 'charcoal-300'
        }
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'primary',
          neutral: 'charcoal-300',
          gray: 'charcoal-300'
        }
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

I am trying to make custom themes to override nuxt's custom colors but idk it seems im doing it wrong

6 Replies

kapa.ai•7d ago

Hi @Oyl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're trying to customize the Nuxt UI theming with Tailwind CSS v4. There are a few issues with your current approach that I can help you fix. Issues with your current setup 1. The @import "tailwindcss" theme(static); syntax is incorrect 2. Your custom color definitions in @theme need some adjustments 3. The way you're referencing custom colors in the Vite config needs to be modified Correct approach 1. Fix your main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --color-charcoal-50: #f5f5f6;
  --color-charcoal-100: #e6e6e8;
  --color-charcoal-200: #cdced1;
  --color-charcoal-300: #424549;
  --color-charcoal-500: #36393E;
  --color-charcoal-700: #282B30;
  --color-charcoal-900: #1E2124;
  
  /* You need to define the full color palette for custom colors */
  --color-primary-50: #eef0ff;
  --color-primary-100: #e0e3ff;
  --color-primary-500: #5865F2;
  /* Add other shades of primary */
  
  /* Same for other custom colors */
}

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --color-charcoal-50: #f5f5f6;
  --color-charcoal-100: #e6e6e8;
  --color-charcoal-200: #cdced1;
  --color-charcoal-300: #424549;
  --color-charcoal-500: #36393E;
  --color-charcoal-700: #282B30;
  --color-charcoal-900: #1E2124;
  
  /* You need to define the full color palette for custom colors */
  --color-primary-50: #eef0ff;
  --color-primary-100: #e0e3ff;
  --color-primary-500: #5865F2;
  /* Add other shades of primary */
  
  /* Same for other custom colors */
}

2. Update your vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: {
            50: 'rgb(var(--color-primary-50))',
            100: 'rgb(var(--color-primary-100))',
            500: 'rgb(var(--color-primary-500))',
            // Add other shades
          },
          neutral: 'charcoal'
        }
      },
      theme: {
        colors: ['primary', 'secondary', 'success', 'warning', 'error', 'neutral']
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: {
            50: 'rgb(var(--color-primary-50))',
            100: 'rgb(var(--color-primary-100))',
            500: 'rgb(var(--color-primary-500))',
            // Add other shades
          },
          neutral: 'charcoal'
        }
      },
      theme: {
        colors: ['primary', 'secondary', 'success', 'warning', 'error', 'neutral']
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Key corrections 1. The @theme directive in Tailwind CSS v4 should be used correctly as shown in the Nuxt UI documentation. The static keyword indicates that these variables won't change at runtime. 2. For custom colors, you need to define the full color palette (or at least the key shades) for each color. Nuxt UI expects a range of shades (50-950) for each color. 3. In your Vite config, when using custom colors, you need to properly reference them and ensure you've included them in the theme colors array. 4. For the neutral color, you should use the base name ('charcoal') rather than a specific shade ('charcoal-300'). The Nuxt UI documentation provides examples of how to properly set up custom colors and themes. You might want to check the Design System and Colors sections for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HugoRCD•7d ago

@Oyl What version of UI are you using? And could you please send your nuxt.config.ts? 😁

OylOP•7d ago

i honestly just used this for the UI i got it figured out im not using nuxt so i dont have a nuxt.config.ts @kapa.ai how do i explityl tell nuxt-ui to use neutral-300 as the background color instead of neutral-900

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To set neutral-300 as the background color instead of neutral-900 in Nuxt UI, you need to customize the CSS variables that control the background colors. This can be done by overriding the --ui-bg and related variables in your CSS file. Here's how you can do it:

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  /* Override the main background color to use neutral-300 */
  --ui-bg: var(--ui-color-neutral-300);
  
  /* You might also want to adjust these related background variables */
  --ui-bg-muted: var(--ui-color-neutral-200);
  --ui-bg-elevated: var(--ui-color-neutral-400);
  --ui-bg-accented: var(--ui-color-neutral-500);
}

/* Make sure to also adjust dark mode if needed */
.dark {
  --ui-bg: var(--ui-color-neutral-300);
  /* Adjust other variables as needed */
}

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  /* Override the main background color to use neutral-300 */
  --ui-bg: var(--ui-color-neutral-300);
  
  /* You might also want to adjust these related background variables */
  --ui-bg-muted: var(--ui-color-neutral-200);
  --ui-bg-elevated: var(--ui-color-neutral-400);
  --ui-bg-accented: var(--ui-color-neutral-500);
}

/* Make sure to also adjust dark mode if needed */
.dark {
  --ui-bg: var(--ui-color-neutral-300);
  /* Adjust other variables as needed */
}

This approach leverages Nuxt UI's design token system as described in the Neutral Palette documentation. The --ui-bg variable controls the main background color of your application, and Nuxt UI automatically applies it to the <body> element. If you're using a custom color palette (like your charcoal colors from the previous example), you would reference those instead:

:root {
  --ui-bg: var(--color-charcoal-300);
  /* Other background variables */
}

:root {
  --ui-bg: var(--color-charcoal-300);
  /* Other background variables */
}

Remember that you might need to adjust text colors as well to maintain proper contrast and accessibility when changing the background color. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt-ui tailwind themeing

Did you find this page helpful?