Tailwindcss Custom Variant

Tailwind plugin to add custom variants

tailwindcss-custom-variant

Tailwind plugin for adding a custom variant similar to the built-in dark variant

Note that it only works in JIT mode.

npm install --save-dev tailwindcss-custom-variant

In tailwind.config.js:

const customVariant = require('tailwindcss-custom-variant');

module.exports = {
    mode: 'jit',
    plugins: [customVariant('hawkins')]
};

In your HTML:

<div class="hawkins:opacity-0"></div>

Then the following CSS will be generated:

.hawkins .hawkins\:bg-black {
    opacity: 0;
}

You can use this to add a custom variant like Tailwind's dark that rely on a certain class to be added above (e.g. to <html>).

Type: string

Custom variant name.