MultiTool for Tailwind CSS

multitool-for-tailwindcss 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
• Usage
• Why use multitool-for-tailwindcss

Installation

You can install the plugin via npm:

npm install multitool-for-tailwindcss

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

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

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 multitool-for-tailwindcss is its support for arbitrary values, which are not limited to predefined classes in Tailwind CSS.

Why use multitool-for-tailwindcss

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 multitool-for-tailwindcss 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:

• jstool-for-tailwindcss: Effortless build-time JS script injection
• tailwind-lerp-colors: Expand your color horizons and take the fuss out of genertaing new—or expanding existing—color palettes
• tailwindcss-directional-shadows: Supercharge your shadow utilities with added directional support (includes directional shadow-border utilities too ✨)