7 replies

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%;
     
    [...]

@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...

Customizing Colors - Tailwind CSS

Customizing the default color palette for your project.

TTC

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%;
     
    [...]

@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 put a lot of effort into being lazy

GitHub

CSS Theming hsl variables -> problem with Tailwind Intellisense VSC...

Customizing Colors - Tailwind CSS

Customizing the default color palette for your project.

Tailwind Theming using CSS variables

Tailwind Theming using CSS variables

Similar Threads

Similar Threads

Similar Threads