tailwind-grouping
Babel plugin to expand grouped TailwindCSS-like utility classes
MIT License
Overview
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.
Plugins
| Package | Description |
|---|---|
| babel-plugin-tailwind-grouping | Babel plugin and core expansion logic |
| vite-plugin-tailwind-grouping | Vite wrapper |
| wmr-plugin-tailwind-grouping | WMR wraper |
Supported Syntax
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
- This excludes HTML documents, as
- Only supports JSX/TSX inputs, or HTML that could be valid 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.