Skip to content

NazmusSayad/tailwind-variant-group

Repository files navigation

tailwind-variant-group

Stop writting the same code again and again.

npm package

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 ❤️.