The problem

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

This solution

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

Installation

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

Usage

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>
  )
}

Advanced options

variantChar: [string]

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>
  )
}

separatorChar: [string]

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: [string] and expandCloseChar: [string]

• 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>
  )
}

Issues

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

🐛 Bugs

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

See Bugs

💡 Feature Requests

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

Contributors ✨

Thanks goes to these people (emoji key):

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

LICENSE

MIT

Special Thanks

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