#Nuxt-ui tailwind themeing

16 messages · Page 1 of 1 (latest)

brisk crown
#

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;
  }

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))
    },
  },
})

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

hard moatBOT
#

Hi @brisk crown. 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 */
}

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))
    },
  },
})

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:

#

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

cunning hazel
#

@brisk crown What version of UI are you using?

#

And could you please send your nuxt.config.ts? 😁

brisk crown
brisk crown
#

@hard moat how do i explityl tell nuxt-ui to use neutral-300 as the background color instead of neutral-900

hard moatBOT
#

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 */
}

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 */
}

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:

#

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

sudden bloom
#

@hard moat how do I adjust the text colors for dark mode for proper contrast?

hard moatBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The provided knowledge sources don’t include Nuxt UI–specific guidance on adjusting text colors for dark mode or contrast tuning of its design tokens, so I can’t give Nuxt‑UI‑exact variables or a documented recipe. The docs we have only cover:

  • That Nuxt UI’s colors come from app.config.ts / ui.colors (with some known issues in merging) [[GitHub issue 33551](https://github.com/nuxt/nuxt/issues/33551]].
  • General theming concepts for a different UI kit (@nuxt/devtools-ui-kit) where you override UnoCSS shortcuts such as n-button-base, n-button-hover, etc. [DevTools UI Kit].

They do not document:

  • Which CSS variables Nuxt UI uses for foreground (text) colors.
  • How Nuxt UI maps those to dark mode or how to override them safely.

Given that, all I can say with confidence from the sources is:

  • To ensure proper contrast in dark mode, you need to override whatever “text” tokens or utility shortcuts your design system exposes, similar to how DevTools UI Kit suggests customizing shortcuts such as n-button-base, n-button-hover, etc. [DevTools UI Kit].
  • For Nuxt UI specifically, the exact variable names / config keys for dark‑mode text colors are not described in the materials above, so I can’t provide a precise code example without guessing.

If you can share a snippet from Nuxt UI’s own docs or config (e.g. where ui.colors or typography tokens are defined), I can help you reason through which ones to change for dark mode contrast, but the current knowledge set doesn’t contain that detail.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: