tail-cn

Simple conditional TailwindCSS class utility with built in tailwind merge support, it's tiny, and fast!

Powered by scn and tailwind-merge.

Write conditional class names more easily and without getting into trouble, plus, get your class names merged to the final class name passed, perfect for TailwindCSS users.

| If you don't use tailwind, just check scn as it's smaller (75 bytes).

How to use?

Code Style 1: Logical operators

• Use strings for normal class names.
• Add logical operators for conditional classes.

Example

  import { tw } from "tail-cn"

  tw('text-sm bg-white p-2', null, false && 'bg-black', undefined, 'p-3'); // 'text-sm bg-white p-3'

Code Style 2: Tuples

• Use strings for normal class names.
• Use tuples for conditional styles, if the second value is falsy, the class name will not be included.

Examples

  tw('text-sm b-white p-2', ['bg-black', false], ['p-3', true]); // 'text-sm bg-white p-3'

  tw('one', undefined, 'two', false, null, ['three', false]); // 'one two'

License

MIT ~ ofc!