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
I am trying to make custom themes to override nuxt's custom colors but idk it seems im 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
vue
nuxt3