Registry / web-framework / tailwindcss-multi

tailwindcss-multi

library0.4.6jsnpmunverified

`tailwindcss-multi` is a Tailwind CSS plugin designed to enhance the readability and reduce the verbosity of utility class lists by introducing a `multi` directive. This directive allows developers to group multiple utility classes into a single, semicolon-delimited string, particularly useful when applying a set of styles under complex or nested variants. The current stable version is 0.4.6, indicating ongoing development and maintenance, with a focus on compatibility with newer Tailwind CSS releases. Its key differentiator lies in simplifying component markup by consolidating common utility groups, thereby making HTML cleaner and more maintainable, especially for conditional styling scenarios. It also supports Tailwind's arbitrary values within the `multi` directive.

web-framework

npm install tailwindcss-multi

github ↗package ↗

INSTALL

IMPORT

SIG · TAILWINDCSS-MULTI

tailwindcss-multi

web-frameworkjavascriptv0.4.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ require('tailwindcss-multi')

✗ import tailwindcssMulti from 'tailwindcss-multi'

The plugin is loaded via `require` in `tailwind.config.js` and does not have named or default exports for direct application-level import. It's solely a CommonJS plugin.

Demonstrates how to install the `tailwindcss-multi` plugin in `tailwind.config.js` and use the `multi` directive in HTML to group utility classes, including those with variants and arbitrary values.

/* tailwind.config.js */ module.exports = { plugins: [ require('tailwindcss-multi'), ] } /* Example HTML usage */ <template> <div class="hover:multi-['bg-red-500;text-white'] border p-4 m-2 rounded"> <p>Hover over me to see grouped styles!</p> <p class="multi-[text-lg;font-semibold;tracking-wide]">This text is always grouped.</p> <p class="md:multi-['text-blue-600;underline;hover:no-underline']">Responsive grouped styles.</p> </div> </template>

Debug

Known issues

breakingValues within the `multi-[...]` directive that contain a colon (`:`) must be quoted. This syntax change was necessitated by a breaking change in Tailwind CSS v3.3.6 affecting how arbitrary values are parsed.

fix

Enclose the entire value within single, double, or backtick quotes, e.g., `hover:multi-['bg-red-500;text-white']`.

affects: tailwindcss>=3.3.6

gotchaWhen quoting `multi` directive values, ensure consistent quote characters are used within a single value. Mixing single, double, or backticks (e.g., `multi-['value"]`) will result in a parsing error.

fix

Use only one type of quote for the entire value, e.g., `multi-['hover:font-bold']` or `multi-["hover:font-bold"]`.

affects: >=0.4.0

gotchaAn exception to the colon-quoting rule applies to CSS property-value pairs within `multi-[...]`, such as `multi-[[font-family:times]]`. In these specific cases, quotes around the entire value are not needed, as the colon is part of an intended arbitrary property.

fix

For arbitrary CSS property-value pairs, wrap them in double brackets `[[]]` and do not add external quotes to the `multi-[...]` value.

affects: >=0.4.0

gotchaTo maintain compatibility and leverage the latest features and fixes, always update `tailwindcss-multi` to its `@latest` version in conjunction with major or minor Tailwind CSS updates. Older plugin versions may not correctly parse new Tailwind CSS syntax or resolve breaking changes.

fix

Run `npm install tailwindcss-multi@latest` or `yarn add tailwindcss-multi@latest`.

affects: All versions

Errors

Common errors & fixes

Syntax error: expected ']' at position X

A colon (`:`) was used inside a `multi-[...]` value without quoting the entire value, which is required by Tailwind CSS v3.3.6 and newer.

fix

Wrap the value containing the colon in quotes, e.g., `<div class="hover:multi-['bg-red-500;text-white']">...</div>`.

Tailwind CSS encountered an unexpected token in arbitrary value

Inconsistent or mixed quote types were used within a `multi-[...]` value (e.g., `multi-['hover:font-bold"]`).

fix

Use a single, consistent quote type for the entire value, e.g., `<div class="multi-['hover:font-bold']">...</div>` or `<div class='multi-["hover:font-bold"]'>...</div>`.

Error: Plugin 'tailwindcss-multi' did not return a plugin function

The `tailwindcss-multi` package was incorrectly imported or required in `tailwind.config.js`, or there's a version incompatibility with Tailwind CSS.

fix

Ensure `module.exports = { plugins: [require('tailwindcss-multi')] }` is correctly configured in your `tailwind.config.js` file and that `tailwindcss-multi` is installed and up-to-date.

Upgrade

Version history

0.4.6latest on npm

Audit

Dependencies

tailwindcssrequiredThis package is a plugin for Tailwind CSS and requires it to function.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/brandonmcconnell/tailwindcss-multi ↗

packagehttps://www.npmjs.com/package/tailwindcss-multi ↗