switchTheme

Create custom theme for your tailwindcss project;

Installation

# Yarn
yarn add switch-theme --dev

# NPM
npm install switch-theme --dev

Usage

To start using this plugin you need to add it to your tailwind configuration file.

// tailwind.config.js

module.exports = {
    ...
    plugins: [require('switch-theme')()],
}

Add Theme

In configuration file

const switchTheme = require('switch-theme');

module.exports = {
    customTheme: {
        light: {
            selector: '.light-theme',
            isDefault: true,
            scheme: {
                backgroundColor: {
                    primary: '#0070F3',
            warning: '#ECC94B',
            danger: '#F56565',
                },
                textColor: {
                    default: '#161b25',
                    light: '#1d2331',
                },
            },
        },
        dark: {
            selector: '.dark-theme',
            scheme: {
                textColor: {
                    default: '#F7FAFC',
                    light: '#EDF2F7',
                },
            },
        },
    },
    plugins: [switchTheme()],
}

and in your project

<div class="bg-primary text-default bg-opacity-75">
    ...
</div>