Skip to content
Tailwind CSS plugin for client-side theming using CSS custom properties, with dark mode support
TypeScript JavaScript
Branch: master
Clone or download
hawezo Merge pull request #7 from hawezo/fix/variant-name
Scoped variants to colors (fixes #6)
Latest commit a4b4b13 Dec 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Fixed typo Nov 14, 2019
examples/prefers-scheme Added example Nov 5, 2019
src Scoped variants to colors Dec 3, 2019
test Scoped variants to colors Dec 3, 2019
.gitignore Created boilerplate Oct 4, 2019
.npmignore Changed banner Nov 5, 2019
babel.config.js Created boilerplate Oct 4, 2019
package.json Updated version Dec 3, 2019
readme.md Added canary mention in readme (#5) Nov 24, 2019
tsconfig.json Added custom properties support Nov 4, 2019
yarn.lock

readme.md

I'm not a designer leave me alone I know this banner suck

GitHub release (latest SemVer including pre-releases) npm npm npm bundle size GitHub top language

Table of contents

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.




Example of what you can do with this plugin A dark/light mode switch example - see here.

You can’t perform that action at this time.