This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

tailwindcss-multitool
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

MultiTool for Tailwind CSS

minified size license version twitter

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:

Package Sidebar

Install

npm i tailwindcss-multitool

Weekly Downloads

27

Version

0.1.5

License

MIT

Unpacked Size

8.54 kB

Total Files

8

Last publish

Collaborators

  • brandonmcconnell