A collection of plugins to expand grouped Tailwind-like utility classes

Overview ✯ Plugins ✯ Supported Syntax

The basis gist of these plugins is to convert syntax like class="text(blue-500 2xl)" into class="text-blue-500 text-2xl". This alleviates a major pain point in the usage of Tailwind, as it can often become extremely repetative and verbose.

This plugin facilitates directive (text(blue-500 2xl)), variant (hover:(text-blue-500 text-2xl)), and mixed (hover:(text(blue-500 2xl))) grouping.

This syntax comes from twind and we use Twind to process your class lists into the expanded form.

The scope is quite limited at the moment, though I'm working on expanding.

• babel-plugin-tailwind-grouping

  • Only supports JSX/TSX inputs, or HTML that could be valid JSX.
    • This excludes HTML documents, as <!DOCTYPE>, <style>, and <script> tags are invalid JSX

• vite-plugin-tailwind-grouping

  • Supports JSX/TSX, HTML, and Vue SFC inputs

• wmr-plugin-tailwind-grouping

  • Supports JSX/TSX. Input HTML is not provided to WMR plugins, so cannot transform it.

MIT