Skip to content

milamer/tailwind-group-variant

Repository files navigation

tailwind-group-variant

Group multiple tailwind classes into a single variant


Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct

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

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.

About

Group multiple tailwind classes into a single variant

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published