1. You use TailwindCss and have very long class names
2. You want shorter and grouped variants
3. You want a way to configure the syntax

A custom transformer that gives tailwind a changed version of the content of your files. The syntax can be changed by providing a variant character, a group open character and a group closing character. You can use the transformer in your tailwind.config.js.

• Installation
• Usage
• Advanced options
  • variantChar: [string]
  • separatorChar: [string]
  • expandOpenChar: [string] and expandCloseChar: [string]
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• Contributors ✨
• LICENSE
• Special Thanks

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install tailwind-group-variant

Update your tailwind config in order to transform your file's content before tailwind extracts their classes.

// tailwind.config.js
const createTransformer = require('tailwind-group-variant')
module.exports = {
  content: {
    files: ['./app/**/*.{ts,tsx,jsx,js,mdx}'],
    transform: createTransformer(),
  },
  ...
}

Then create a transformer function and use it in your className to expand you classes on the div.

// hero.jsx
import createTransformer from 'tailwind-group-variant'
const expandVariant = createTransformer()

export default function Hero({children}) {
  return (
    <div
      className={expandVariant(
        'relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:(max-w-2xl,w-full,pb-2) xl:pb-32',
      )}
    >
      {children}
    </div>
  )
}

will be transformed to:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-2 xl:pb-32">
      {children}
    </div>
  )
}

Default: :

By default it just uses the default value of tailwind. Use the same char you use as separator in your tailwind.config.js.

Change the call to createTransformer in your tailwind.config.js.

// tailwind.config.js
const createTransformer = require('tailwind-group-variant')
module.exports = {
  content: {
    files: ['./app/**/*.{ts,tsx,jsx,js,mdx}'],
    transform: createTransformer({ variantChar: '_' }),
  },
  ...
}

Change the char to separate variants in your components:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm_pb-16 md_pb-20 lg_(max-w-2xl,w-full,pb-2) xl_pb-32">
      {children}
    </div>
  )
}

will be transformed to:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm_pb-16 md_pb-20 lg_max-w-2xl lg_w-full lg_pb-2 xl_pb-32">
      {children}
    </div>
  )
}

Default: ,

By default it uses space. You can change it to other separators like , | or /.

Change the call to createTransformer in your tailwind.config.js.

// tailwind.config.js
const createTransformer = require('tailwind-group-variant')
module.exports = {
  content: {
    files: ['./app/**/*.{ts,tsx,jsx,js,mdx}'],
    transform: createTransformer({ separatorChar: '|' }),
  },
  ...
}

Use the separator in you components:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:(max-w-2xl|w-full|pb-2) xl:pb-32">
      {children}
    </div>
  )
}

will be transformed to:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-2 xl:pb-32">
      {children}
    </div>
  )
}

• expandOpenChar: Default: (
• expandCloseChar: Default: )

By default it uses ( ), but can be change to { }.

Change the call to createTransformer in your tailwind.config.js.

// tailwind.config.js
const createTransformer = require('tailwind-group-variant')
module.exports = {
  content: {
    files: ['./app/**/*.{ts,tsx,jsx,js,mdx}'],
    transform: createTransformer({ expandOpenChar: '{', expandCloseChar: '}' }),
  },
  ...
}

Change the char to separate variants in your components:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:{max-w-2xl,w-full,pb-2} xl:pb-32">
      {children}
    </div>
  )
}

will be transformed to:

export default function Hero({children}) {
  return (
    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-2 xl:pb-32">
      {children}
    </div>
  )
}

Looking to contribute? Look for the Good First Issue label.

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

Thanks goes to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

MIT

Special thanks to Kent C. Dodds and his match-sorter package where most of the setup is from.