Note: Even though it should support Tailwind 2, I didn't thoroughly tested it. I plan to do it when I have time, and probably rewrite a bunch of stuff in order to improve quality of life and enable usage with Tailwind Play. The next version will probably be the actual v3, with breaking changes from the current beta. Knowing that, and although the plugin is perfectly fine, you may want to check out the alternatives. Thanks!
Note - This plugin works with Tailwind CSS v1.2 upwards.
tailwindcss-theming is a Tailwind CSS plugin made to solve the common need to have multiple themes in an application. It is also perfect for making dark themes.
Moreoever, this plugin has full support for the
prefers-color-scheme media query, so you can define a theme that will automatically be picked based on browser preferences.
$ yarn add [email protected] --dev
This plugin is based on CSS Custom Properties, which are not compatible with IE11. You can have partial support for the browsers that do not support them by using a PostCSS plugin that add a fallback for CSS variables, such as
Keep in mind that only your default theme will work with that method.
This plugin is feature-complete, but some alternatives exist. If you're looking for a simpler approach, a different kind of configuration, or just want to know the alternatives, here is a list that you may find useful:
tailwindcss-theme-variants— A complete variant-based theming plugin.
tailwindcss-multi-theme— A simple, yet good alternative if you want to stick to variants.
tailwindcss-dark-mode- Another variant alternative.
tailwindcss-darkmode- Another variant alternative.
tailwindcss-theme-swapper- Similar to
tailwindcss-theming, but lower-level, and without the variant functionality.
screensmedia query in Tailwind's configuration.
A more complete comparison of the different theming plugins can be found here.