Table of contents

• Introduction
• Setup
• Usage
• Configuration
  • Colors
  • Variants
  • Themes
  • Strategies
• Extending Tailwind and custom variables
  • Adding variables
  • Extending Tailwind
• API reference
  • ThemeBuilder
  • Theme
• Examples
  • Configuration
  • Application
• Compatibility

Introduction

Note - This plugin works only with Tailwind CSS v1.2-canary. You can install tailwindcss@canary with NPM. There is an unmaintained version of this plugin available for Tailwind CSS v1.1. Check out the tailwind-1.1 branch.

tailwindcss-theming is a Tailwind plugin made to solve the common need to have multiple themes in an application.

It uses CSS custom properties in order to make your themes changeable on the client-side. Swapping themes is as simple as changing the class of your body or html element.

Moreover, this plugin fully supports the prefers-color-scheme media query, so you can setup a theme that will be automatically picked based on browser preferences.

Get started:

$ yarn add tailwindcss-theming --dev

Compatibility

Please note that IE11 doesn't support CSS custom properties. You can still have partial support for IE11 by using the PostCSS custom properties plugin.

You won't be able to change theme at runtime, but at least your main and theme will work flawlessly.

•

A dark/light mode switch example - see here.