Tailwind-group-variant NPM

The problem

You use TailwindCss and have very long class names
You want shorter and grouped variants
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

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