tailwind-variant-group

Stop writting the same code again and again.

Installation

• with npm

npm i tailwind-variant-group

• with yarn

yarn add tailwind-variant-group

• with pnpm

pnpm add tailwind-variant-group

Usages:

/* tailwind.config.cjs */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    files: ['./src/**/*.{jsx,tsx}'],
    transform: require('tailwind-variant-group').transform,
  },
}

/* Component.js */

import tw from 'tailwind-variant-group'

const Component = () => {
  return (
    <button
      className={tw(
        'bg-red hover:{bg-black text-black}',
        true
          ? ['sm:{hidden transition-all}', 'lg:{overflow}']
          : 'md:{flex grid flex-wrap flex-nowrap}'
      )}
    >
      Click me
    </button>
  )
}

Made by Nazmus Sayad with ❤️.