tailwind-group-variant

---

!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense !All Contributorsall-contributors-badge !PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc

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 npmnpm which is bundled with nodenode 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 Issuegood-first-issue label.

🐛 Bugs

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

💡 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 Requestsrequests

Contributors ✨

Thanks goes to these people (emoji keyemojis):



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

LICENSE

MIT

Special Thanks

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