NazmusSayad / tailwind-variant-group

tailwind-group

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)'
          : 'md:(flex grid flex-wrap flex-nowrap)'
      )}
    >
      Click me
    </button>
  )
}

Made by Nazmus Sayad with ❤️.