prettier-plugin-tailwind-variants weekly downloads statistics

prettier-plugin-tailwind-variants

A Prettier plugin for Tailwind Variants. Formats tv() class arrays while preserving structure, then sorts with prettier-plugin-tailwindcss.

Installation

Must be composed with prettier-plugin-tailwindcss as above.

Options

| Option | Default | Description |

| tvFunctions | ['tv'] | Callee names to format. Keep tailwindFunctions in sync for string sorting. | | tvUnwrapSingleClassArrays | true | Unwrap nested single-class arrays into the parent sort pool. Ignored when grouping or flattening. | | tvGroupByModifiers | false | Split tokens into one string per modifier group (base, hover, dark, …). | | tvModifierGroupOrder | built-in | Group id order when grouping is on. Ignored when grouping is off. | | tvFlattenToString | false | Flatten arrays / nests into a single class string. Ignored for final shape when grouping is on. | | tvRemoveEmptyClasses | true | Remove empty / whitespace-only class strings and empty arrays. | | tvGroupByBreakpoints | false | When grouping, put each breakpoint (sm, md, …) in its own group. Ignored when grouping is off. |

Shape priority: tvGroupByModifiers → else tvFlattenToString → else preserve structure (+ unwrap).

Formatting

Covers base, slots, variants, compoundVariants / compoundSlots (class / className). JS/TS and regions (Vue, Svelte, Astro, HTML, …); CSS is left alone. Framework parsers need their own Prettier plugins.

Editor IntelliSense

Prefer key-scoped classRegex over classFunctions: ["tv"] so conditions and defaultVariants are skipped. Copy from .vscode/settings.json and enable "editor.quickSuggestions": { "strings": "on" }.

Limitations

• Static strings and literal arrays only • Dynamic values skip that array • Peers: prettier@^3.0.0, prettier-plugin-tailwindcss@^0.8.0

Community

Contributing · Code of Conduct · Security · Support

License

MIT