tailwind-multi-class v1.0.13

TAILWIND MULTI CLASS

Easy, performant and versatile.

An easy way to write Tailwind CSS classes in multiples lines, either as strings or as object with keys as tailwind variants.

Advantages

• Accepts any ammount of arguments.
• Accepts any type of arguments.
• Accepts any type of expressions, like: - &&, ||, ??, Ternary Operator
• Supports Single quotes, Double quotes and Backticks.
• Accepts functions, equations, and so on.
• Multiline support.
• Nested variant key support.

Rules

• Expresions have to be written between parentheses.
• Cant use ternaries after ternaries (A ? B ? C : D).
• Ternaries must return strings in both cases.
• Using backticks inside ternaries is forbiden.
  • A ? B : C
  • B and C cant have backticks, neither cant be written with backticks.

Usecase example

<div
   className={tw(
      'rounded-md w-40 h-10 p-4',
      !index && 'bg-opacity-50',
      (pageIndex === index) ? 'bg-pink-500' : 'bg-orange-500',
      { dark: (pageIndex === index) ? 'bg-pink-300' : 'bg-orange-300' }
   )}
/>
// Injected classes: rounded-md w-40 h-10 p-4 bg-opacity-50 bg-pink-500 bg-orange-500 bg-pink-300 bg-orange-300

Setup

// file = tailwind.config.js
import { tw, twTransform } from 'tailwind-multi-class'

export default {
   content: {
      files: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",], //your usual path for tailwind
      transform: {
         DEFAULT: twTransform(tw)
      }
   },
   /** REST OF YOUR TAILWIND CONFIG */
}