babel-plugin-tailwind-grouping

A Babel plugin that expands grouped Tailwind-like utility classes.

Usage

In your babel configuration (.babelrc, babel.config.json, etc.) add the plugin:

{
    "plugins": [
        "babel-plugin-tailwind-grouping"
    ]
}

// input:
<div class="text(blue-500 2xl) hover:(text(red-500 3xl))" />

// output:
<div class="text-blue-500 text-2xl hover:text-red-500 hover:text-3xl" />

For more information on how to build grouped classes, see Twind's docs on the subject.

License

MIT

Acknowledgments

Parser and class name builder modified from twind