Tailwind Integration

Tailwind integration is straightforward. Add the dark custom variant to your main stylesheet:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

And that's it! 🚀

Changing the variant attribute

If you change the theme attribute, for example from class to data-theme, make the same change in ThemeProvider as well:

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<ThemeProvider attribute="data-theme">...</ThemeProvider>