Color Shades Plugin for Tailwind CSS

The issue

When in tailwind.config.js you extend the color palette the shades related to each added color will not be automatically generated. It is up to you to use some online generator get the variants and manually copy and paste them into your configuration.

The plugin

This plugin aims to automate the generation of shades. Once you activate it you just need to add a shades object configuration in the theme. The syntax is the same as you're used to for extending the color palette.

const colorShades = require('tailwindcss-color-shades');

module.exports = {
    content: ["./src/**/*.html"],
    theme: {
        shades: {
            ferrari: '#ed1c24'
        }
    },
    plugins: [
        colorShades()
    ],
};

That's all you need to start using classes sich as bg-ferrari-200 and text-ferrari-800 without any other effort!

The official extension Tailwind CSS IntelliSense will detect and suggest all of them!

The plugin will generate for each input color all combinations between one of the property identifiers, the color name and all the levels.

`${propertyIdentifier}-${colorName}-${level}`

The property identifiers are bg, text, border, border-t, border-r, border-b, border-l, outline, ring, ring-offset, shadow, accent, caret, fill, stroke.

The levels are 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, DEFAULT.

Options

It is possible to configure the plugin behaviour via some options.

Prefix

In some cases you might want to keep it explicit that the class in use is generated by this plugin. The prefix option comes to your aid.

By default (null) no prefix is used.

module.exports = {
    ...
    plugins: [
        colorShades({
            prefix: 's',
        })
    ],
};

The above example results in all generated classes being prefixed with 's' (e.g. s-bg-ferrari-700).

Levels

The option levels gets as value a list of levels. The plugin will generate combinations only of those indicated. Any value not recognized will be ignored.

By default all levels are used.

The level relative to 500 and DEFAULT are always produced.

module.exports = {
    ...
    plugins: [
        colorShades({
            levels: [100, 500, 700]
        })
    ],
};

In the above example you can use shadow-ferrari-100 but not shadow-ferrari-300.

A note

The plugin registers the generated classes via the addUtilities function. This implies that should the input color name match one that is part of tailwindcss's default color palette, the generated css will have two rules. An example follows.

const colorShades = require('tailwindcss-color-shades');

module.exports = {
    content: ["./src/*.html"],
    theme: {
        shades: {
            red: '#ff0000' // red already exists in require('tailwindcss/colors')
        }
    },
    plugins: [
        colorShades()
    ],
};

Ensure to use it in HTML to prevent purging.

<div class="bg-red">42</div>

The extension Tailwind CSS IntelliSense will notify you that two rules exists for bg-red.

But in the style.css produced by tailwindcss you can observe that the default one and the generated one are merged together.

.bg-red {
  --tw-bg-opacity: 1;                                       /* default */
  background-color: rgb(255 0 0 / var(--tw-bg-opacity));    /* default */
  background-color: #ff0000;                                /* generated */
}

Since the generated ones are added via addUtilities they are positioned after.Since how CSS works, that means they take precedence over any pre-existing homonyms.

In general, it is suggested not to clash names 🙂