Tailwind css variables not working

dianprata / nuxt-shadcn-dashboard

Template Dashboard with Nuxt 3 + Shadcn + UnoCSS

https://nuxt-shadcn-dashboard.vercel.app

82 stars 15 forks source link

Tailwind css variables not working #2

Open AhmedTirhmert opened 5 days ago

AhmedTirhmert commented 5 days ago

As shown in the setup below after following the docs for customizing the template

[x] created the globals.css file for custom variables/colors
[x] updated components.json path to the globals.css that contains the variables
[x] extended the tailwind CSS colors to include the added color

But when using the warning color in the index.vue file it doesn't work

PS: I also tried to extend the tailwind config without using variables and yet it still doesn't work

dianprata commented 22 hours ago

i am use unocss, so you have to custom your colors in uno.config.ts. add this code to uno.config.ts, but in unocss for custom colors in dark and light mode, you have to add new preset. theme: { colors: { 'warning': 'hsl(38 92% 50%)', 'warning-foreground': 'hsl(48 96% 89%)', }, },

ref: https://github.com/unocss/unocss/issues/1390