Tailwind Color Scheme Plugin

A plugin that provides dynamic color schemes at runtime through Tailwind CSS

Installation

Install the plugin from npm:

npm install --save-dev tailwind-color-scheme
# or
yarn add -D tailwind-color-scheme

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js

const colorSchemePlugin = require('tailwind-color-scheme')

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    colorSchemePlugin({
      schemes: [
        // Schemes
        {
          name: 'happy',
          colors: {
            primary: 'rgb(155, 0, 121)',
            secondary: 'rgb(9, 0, 231)',
          },
        },
        {
          // Default (no name defined)
          colors: {
            primary: '#f309f3',
            secondary: 'rgb(255, 255, 255)',
            important: '#ff0000',
          },
        },
      ],

      // Other optional plugin options goes here
    }),
  ],
}

Usage

The plugin extends Tailwind's color config with all the defined colors in the provided schemes, so you can use it with any utility class that uses color (e.g. text-primary, bg-secondary and border-important)

In order to select the scheme to be used - wrap a parent of the html (usually the <html> tag) you want to apply the color scheme to, with the utility class scheme-${name} (name is the name of the scheme

<div class="scheme-happy">
  <main>
    ...
    <h3 class="text-primary">The Title of the Section</h3>
    <button class="bg-primary-500 hover:bg-primary-700 text-white">Hover me to see change</button>
    <div class="border border-important">A very important notice</div>
    ...
  </main>
</div>

Colors

The plugin uses tinycolor2 to read and parse colors. Event supported format in tinycolor2 is also supported by this plugin

Configuration

The plugins supports this configurations as second parameter object All the configurations are optional

Key	Type	Default Value	More Info
`schemeClassPrefix`	`string`	`"scheme-"`	The prefix used in shceme utility classes
`schemaPropertyPrefix`	`string`	`"tw-tcs-"`	Prefix for the name of CSS custom properties defined for each color in the scheme (for example `--tw-tcs-primary-500` defines the color the `primary` in level `500` color)
`tints`	`number[] \| false`	`[50,100,200,300,400]`	List of tinted variation to generate for each color. The supported values are `50`, `100`, `200`, `300`, `400`. Pass `false` to disable tint generation`.
`shades`	`number[] \| false`	`[600,700,800,900]`	List of shaded variation to generate for each color. The supported values are `600`, `700`, `800`, `900`. Pass `false` to disable tint generation`.
`noDefaultColor`	`boolean`	`false`	If set - utility classes for colors without tint/shade level will not be generated (e.g. `text-primary` will not exist, but `text-primary-500` will)