How to add custom gray color
hamonCordova opened this issue · comments
Description
I've add "brand" colors and "smoke" (our gray colors) in tawilind.config.ts.
The "brand" color is showing correctly when i use "bg-primary-500" for exemple. But the gray isn't showind correctly
tailwind.config.ts
import type {Config} from 'tailwindcss'
export default <Partial<Config>>{
theme: {
fontFamily: {
sans: ['"IBM Plex Sans"', 'sans-serif']
},
extend: {
colors: {
brand: {
50: '#F4F3FF',
100: '#EBE9FE',
200: '#D9D6FE',
300: '#BDB5FD',
400: '#9C8BFA',
500: '#7C5CF6',
600: '#6B3AED',
700: '#5C28D9',
800: '#4F22BB',
900: '#411D95',
950: '#261065'
},
smoke: {
50: '#FFFFFF',
100: '#D1D1D1',
200: '#B0B0B0',
300: '#888888',
400: '#6D6D6D',
500: '#5D5D5D',
600: '#4F4F4F',
700: '#454545',
800: '#3D3D3D',
900: '#242424',
950: '#ff0f37'
},
},
height: {
navbar: 'var(--h-navbar)',
},
spacing: {
aside: 'var(--w-aside)',
},
}
}
}
app.config.ts
export default defineAppConfig({
ui: {
primary: "brand",
gray: "smoke",
container: {
base: "mx-auto",
padding: "px-4 sm:px-6 lg:px-8",
constrained: "sm:max-w-screen-2xl",
},
dropdown: {
container: "z-50",
background: "bg-white dark:bg-gray-700",
},
table: {
default: {
emptyState: {
label: "Nenhum registro encontrado",
},
loadingState: {
label: "Carregando...",
},
},
},
notifications: {
position: "bottom-0 lg:top-0 lg:bottom-auto",
},
},
});
Please provide a valid reproduction in your issues, for example a link to a Stackblitz. This allows us not to spend time recreating your project's configuration.
https://stackblitz.com/edit/nuxt-ui-t6d3zp
I can correctly use your gray color on this reproduction.
I don't know why, but in my case, to "solve" this i needed to remove node_modules and package-lock.json and then run npm i
. Everytime i change a color variable, it must be done.
I believe it has something to do with Nuxt Tailwind's module. It is currently required to restart the server when editing tailwind.config.ts
. This should not be required anymore when nuxt/ui will upgrade to @nuxtjs/tailwindcss 6.12