Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
7 replies
Jim

Tailwind Theming using CSS variables

Hey all, using shadcn for styling and they use the css variables like so, recommended by tailwind.

https://tailwindcss.com/docs/customizing-colors#using-css-variables

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
 
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
     
    [...]


I'm just wondering, is there a way to use already declared tailwind colours here? Or maybe a VScode plugin that would allow me to convert hex to hsl quickly?

I just figured you can just punch in the rgb values too which probably will work ok for me as I can just pick out the tailwind colours I want from my browser

I found this which is probably the same issue:
https://github.com/shadcn-ui/ui/issues/199

But yeah in the time it's taken to look all that up I could have just converted the colours I need to HSL 😪 I put a lot of effort into being lazy
GitHub
CSS Theming hsl variables -> problem with Tailwind Intellisense VSC...
I was really looking forward to using the new themes and setting my new color variables However, The most important part (for me) is being able to fully take advantage of Tailwind CSS Intelisense p...
CSS Theming hsl variables -> problem with Tailwind Intellisense VSC...
Customizing Colors - Tailwind CSS
Customizing the default color palette for your project.
Customizing Colors - Tailwind CSS
Was this page helpful?