Tailshake combines TailwindCSS classes and shakes off any conflicts. It helps compose and toggle Tailwind styles.

yarn add tailshake

// or

npm install tailshake

import tailshake from 'tailshake'

A simple example:

tailshake("text-white", "text-gray-100") // => "text-gray-100"

Falsy values are ignored, which means you can use tailshake to easily toggle classlists:

tailshake("text-blue-400", isDisabled && "text-gray-400")

isDisabled = false // => "text-blue-400"
isDisabled = true // => "text-gray-400"

Examples use React but the library does not care where you use it. :)

const Button = (
  <button className={tailshake(
    'bg-white text-blue',
    'hover:bg:blue hover:text-white'
  )}>
    Neat, I have hover!
  </button>
)

const Card = ({ className }) => (
  <div className={tailshake(
    'bg-white rounded-md',
    className
  )}>
    Neat!
  </div>
)

// Customise radius, notice this overrides the default rounded-md class
<Card className="rounded-lg">

// Add spacing
<Card className="mb-6">

const buttonBaseClasses = 'p-3 rounded'
const buttonAppearanceClasses = {
  blue: 'bg-white text-blue',
  red: 'bg-white text-red',
}

const Button = ({ appearance }) =>  (
  <button className={tailshake(
    buttonBaseClasses,
    buttonAppearanceClasses[appearance],
  )}>
    Neat!
  </button>
)

Simple example

<main
  className={mergeClasses(
    'flex flex-col',
    isFullHeight && 'min-h-screen',
  )}
/>

Nobody is perfect.

• overrides don't work for classes without a value or unrelated classnames, examples:
  • border-8 will not override border, this is practically ok because the specific class is declared later and wins
  • block will not override flex, you should use toggling as a workaround (or create a PR with a fix!)
• this library assumes a close-to-default Tailwind configuration, so no promises when you're using custom plugins lots of customisation. Please do create an issue describing any problems with custom configurations!

Some other options you might consider:

• tailwindcss-class-combiner
• tailwind-classlist

Both of these packages appear to be unmaintained, they have served as inspiration for the approach and test cases for Tailshake.