Reports

Edit: it is not fully working fine ...

I found an article which shows a way of doing what I need, albeit the code is a bit verbose and uses the data-theme attribute instead of a CSS class, but it works as a charm:

@import "tailwindcss";

@theme {
  --color-foreground: var(--theme-color-foreground);
  --color-background: var(--theme-color-background);
}

@layer base {
  [data-theme="light"] {
    --theme-color-foreground: hsl(0 0% 8%);
    --theme-color-background: hsl(0 0% 98%);
  }

  [data-theme="dark"] {
    --theme-color-foreground: hsl(0 0% 98%);
    --theme-color-background: hsl(0 0% 3.9%);
  }
}

I am open for better solutions!

79386792