How to add dynamic TailwindCSS classes to DOM elements in React

Question

I am new to TailWindCSS, I want to add enable/disable style to a Button element. How can I add disabled specific styles/class(i.e let's say I need to add "opacity-50 cursor-not-allowed") to the button conditionally?

    <button
          className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mr-3"
          disabled={!globalContext.users.length > 0}
          onClick={handleClearResultsClick}
        >
          Clear Results
    </button>

Does this answer your question? [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) — Remul, Apr 23 '20 at 09:04

Julian David Gaitan Saenz · Answer 1 · 2020-06-27T04:51:35.380

You can use the new ES6 "template strings".
This is a simple React component that has disabled the (-) button when counter <= 0

.pointer-even-none is the tailwindCSS class that renders the disable button

const [count, setCount] = useState(0);

return (
  <Fragment>
       {/* button Substract with styles tailwind*/}
      <button className={`p-2 ${count <= 0 ? 'opacity-50 pointer-events-none': 'bg-red-700'}`} 
              onClick={() => setCount( count - 1 )}>
              Substract
      </button>

      {/* Counter */}
      <span className="p-2">{ count }</span>

      {/* button Add whit styles tailwind*/}
      <button className="p-2 bg-green-700"
              onClick={() => setCount(count + 1 )}>
              Add
      </button>
  </Fragment>
)

m-farhan · Answer 2 · 2022-03-11T20:07:11.183

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

You can use this light weight library classname

https://www.npmjs.com/package/classnames

It will keep things tidy

How to add dynamic TailwindCSS classes to DOM elements in React

2 Answers2