Reports

I was suffering from this and I had to take some time but I figured it out and it is based on the documentation here.

https://tailwindcss.com/docs/colors#using-a-custom-palette

I will share my example of my css file with the new tailwind v4 and hopefully that might be of help to anyone so far. This is my first time ever commenting on StackOverflow so hope its good code lol.

@import "tailwindcss";

:root {
  --background: hsl(276 10% 95%);
  --foreground: hsl(276 5% 10%);
  --primary: hsl(276 100% 50%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(276 10% 70%);
  --secondary-foreground: hsl(0 0% 0%);
  --muted: hsl(238 10% 85%);
  --muted-foreground: hsl(276 5% 40%);
  --destructive: hsl(0 50% 50%);
  --destructive-foreground: hsl(276 5% 90%);
  --border: hsl(276 20% 55%);
  --input: hsl(276 20% 50%);
  --ring: hsl(276 100% 50%);
}

.dark {
  --background: hsl(276 10% 10%);
  --foreground: hsl(276 5% 90%);
  --primary: hsl(276 100% 50%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(276 10% 20%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(238 10% 25%);
  --muted-foreground: hsl(276 5% 60%);
  --destructive: hsl(0 50% 50%);
  --destructive-foreground: hsl(276 5% 90%);
  --border: hsl(276 20% 50%);
  --input: hsl(276 20% 50%);
  --ring: hsl(276 100% 50%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

Essentially you just declare values in root and .dark as in normal css and then tag them with --color- . This --color- is necessary for tailwind so you just use colors like any other color thats part of tailwind. I think thats the case. It works as expected. I do not know what that inline does in there? Would love to see a response to that if anyone knows.

Thank you!

79420329