Nuxt ui Custom Color doesn't work
I'm trying to create a custom color for nuxt ui. i defined on tailwind config my primary color.
and it nuxt ui wont create the color variables.
do you have any idea ?
and the css variable text-primary is not generated
and it nuxt ui wont create the color variables.
do you have any idea ?
tailwind.config.ts
import type { Config } from 'tailwindcss'
const designSystem = require('./tailwind.ds.js');
export default <Partial<Config>>{
darkMode: 'class',
theme: {
extend: {
colors:{
primary: {
DEFAULT: "#fb991c" ,
'50': '#fff8eb',
'100': '#feeac7',
'200': '#fdd48a',
'300': '#fcb74d',
'400': '#fb991c',
'500': '#f5780b',
'600': '#d95506',
'700': '#b43809',
'800': '#922b0e',
'900': '#78240f',
'950': '#450f03',
},
secondary: {
DEFAULT: "#50a787" ,
'50': '#f0f9f5',
'100': '#daf1e5',
'200': '#b8e2cf',
'300': '#89ccb1',
'400': '#50a787',
'500': '#369374',
'600': '#26755d',
'700': '#1e5e4c',
'800': '#1a4b3d',
'900': '#163e33',
'950': '#0c221d',
},
gray: {
'50': '#f7f7f7',
'100': '#ededed',
'200': '#dfdfdf',
'300': '#c8c8c8',
'400': '#a6a6a6',
'500': '#999999',
'600': '#888888',
'700': '#7b7b7b',
'800': '#676767',
'900': '#545454',
'950': '#363636',
},
black: "oklch(15.61% 0.035 22)" ,
white: "oklch(100% 0 0)" ,
}
} tailwind.config.ts
import type { Config } from 'tailwindcss'
const designSystem = require('./tailwind.ds.js');
export default <Partial<Config>>{
darkMode: 'class',
theme: {
extend: {
colors:{
primary: {
DEFAULT: "#fb991c" ,
'50': '#fff8eb',
'100': '#feeac7',
'200': '#fdd48a',
'300': '#fcb74d',
'400': '#fb991c',
'500': '#f5780b',
'600': '#d95506',
'700': '#b43809',
'800': '#922b0e',
'900': '#78240f',
'950': '#450f03',
},
secondary: {
DEFAULT: "#50a787" ,
'50': '#f0f9f5',
'100': '#daf1e5',
'200': '#b8e2cf',
'300': '#89ccb1',
'400': '#50a787',
'500': '#369374',
'600': '#26755d',
'700': '#1e5e4c',
'800': '#1a4b3d',
'900': '#163e33',
'950': '#0c221d',
},
gray: {
'50': '#f7f7f7',
'100': '#ededed',
'200': '#dfdfdf',
'300': '#c8c8c8',
'400': '#a6a6a6',
'500': '#999999',
'600': '#888888',
'700': '#7b7b7b',
'800': '#676767',
'900': '#545454',
'950': '#363636',
},
black: "oklch(15.61% 0.035 22)" ,
white: "oklch(100% 0 0)" ,
}
}app.config.ts
export default defineAppConfig({
ui: {
primary: 'primary',
gray: 'gray',
},
})app.config.ts
export default defineAppConfig({
ui: {
primary: 'primary',
gray: 'gray',
},
})and the css variable text-primary is not generated
