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-schemeThen 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) |