Tailwindcss-multitool NPM

tailwindcss-multitool is a plugin for Tailwind CSS that introduces the multi directive, a utility that allows you to group utility classes together. This simplifies your HTML and improves readability of your Tailwind CSS code.

Installation

You can install the plugin via npm:

npm install tailwindcss-multitool

Then, include it in your tailwind.config.js:

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

Usage

The plugin provides a multi directive, allowing you to group multiple utility classes:

<div class="hover:multi-[bg-red-500;text-white]">
  This text is white and the background is red.
</div>

The directive accepts a semicolon-delimited list of utility classes and applies them to the selected element. A key feature of tailwindcss-multitool is its support for arbitrary values, which are not limited to predefined classes in Tailwind CSS.

Why use `tailwindcss-multitool`

In some cases, you may need to apply several utilities to a long or convoluted variant or even chain of variants, which can start tio look like this:

<div class="sm:[&>div]:hover:active:font-bold sm:[&>div]:hover:active:text-[red] sm:[&>div]:hover:active:font-family:['Open_Sans',sans-serif]">
  When hovered, this text will appear bold, red, and in Open Sans font.
</div>

This can be difficult to read and understand, especially when the number of utilities increases.

By employing the multi directive, you can group related utility classes by variant, providing clearer insights into your code's function. Below is an example that demonstrates the flexibility of the multi directive, demonstrating its ability to support not only multiple utilities, but partially and fully arbitrary values:

<div class="sm:[&>div]:hover:active:multi-[font-bold;text-[red];[font-family:'Open_Sans',sans-serif]]">
  When hovered, this text will appear bold, red, and in Open Sans font.
</div>

This is…

✨ GREAT for consolidating utilities under long & ideally unique variants 👏🏼

😬 NOT great for keeping the compile size small if you use it with commonly used variants 👀

I hope you find tailwindcss-multitool a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request.

If you liked this, you might also like my other Tailwind CSS plugins:

tailwindcss-signals: Declarative API for applying styles based on parent or ancestor state
tailwindcss-selector-patterns: Dynamic CSS selector patterns
tailwindcss-jstool: Effortless build-time JS script injection
tailwindcss-directional-shadows: Supercharge your shadow utilities with added directional support (includes directional shadow-border utilities too ✨)
tailwindcss-default-shades: Default shades for simpler color utility classes
tailwind-lerp-colors: Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes