Repository files navigation

Warning
I no longer use this package, so it is no longer maintained. If anyone want to take it over, feel free to ask.

• Introduction
• Quick start
• Plugin configuration
  • Changing the theme file
  • Changing the strategy
  • Using a preset
  • Using variants
• Configuring your themes
  • Creating a theme
    • Colors
    • Variants
    • Extending Tailwind's configuration with CSS variables
    • Name and targetability
  • Exporting your themes
    • Default theme
    • Default dark theme
    • Default light theme
    • Additional themes
• Presets
  • Nord
  • Nord Vanilla
  • Tailwind CSS Vanilla
• Upgrade guide
• Compatibility
• Alternatives

Note - This plugin works withTailwind 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.

It usesCSS Custom Properties in order to make your themes interchangeable on the client-side. Swapping themes is as simple as changing a class of yourbody element.See an example in CodeSandbox.

Moreoever, this plugin has full support for theprefers-color-scheme media query, so you can define a theme that will automatically be picked based on browser preferences.

Get started:

$ yarn add tailwindcss-theming@next --dev

This plugin is based onCSS Custom Properties, which arenot 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 aspostcss-css-variables orpostcss-custom-properties.

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 totailwindcss-theming, but lower-level, and without the variant functionality.
• Manually, by adding ascreens media query in Tailwind's configuration.

A more complete comparison of the different theming plugins can be foundhere.