Tailwind - Conflicting Classes in React🤯

React makes it easier to work with Tailwind by having Dynamic Styles. BUT... WAIT

There's a ton of conflict with classes when it comes to styling.

The first library I use is classnames which makes it way much simpler to combine classNames based on some condition.

Use case - I want my custom Button component to have some styling based on props I provide. Base styling is the same for all buttons but for primary or danger props, styling would be different.

import classnames from 'classnames'

function Button({
  children,
  primary,
  secondary,
  success,
  warning,
  danger,
}) {
  const classes= classnames('px-3 py-1.5 border', {
    'border-blue-500 bg-blue-500 text-white': primary,
    'border-gray-900 bg-gray-900 text-white': secondary,
    'border-green-500 bg-green-500 text-white': success,
    'border-yellow-400 bg-yellow-400 text-white': warning,
    'border-red-500 bg-red-500 text-white': danger,
  })

  return <button className={classes}>{children}</button>
}

But it doesn't end here, tailwind can conflict classes which would make it really mind-boggling. So I use another library called tailwind-merge which would merge any conflicting classes. The documentation has a really good explanation on how to use it.

That's it for today. I hope you find it helpful unless you want to hit your head in wall while using Tailwind.😉