Skip to content

innocenzi/tailwindcss-theming

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 6, 2020 18:47
July 6, 2020 21:32
src
December 28, 2020 13:58
December 28, 2020 13:58
October 4, 2019 10:40
September 1, 2020 06:46
November 15, 2022 11:29
May 16, 2020 18:32
December 28, 2020 14:00

Tailwind CSS Theming GitHub release NPM release Top Language

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

Table of contents

Introduction

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.

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

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.

Get started:

$ yarn add tailwindcss-theming@next --dev

Compatibility

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 postcss-css-variables or postcss-custom-properties.

Keep in mind that only your default theme will work with that method.

Alternatives

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:

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