How Can I Dynamically Apply Tailwind CSS Classes in React Using Template Literals?

Applying Dynamic CSS Classes with Template Literals in Tailwind CSS

You can encounter difficulties when attempting to dynamically change CSS classes in Tailwind CSS. For instance, if you try to utilize the following code:

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

This code won't execute effectively. To tackle this issue, make the following changes:

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

// Alternatively (without template literals):
<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

Crucially, avoid using string concatenation when building class names, as demonstrated in the following:

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

Instead, opt for selecting complete class names:

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind will refrain from eliminating complete class names from production builds if they are included in your template.

Additionally, you have access to various options, including libraries like classnames or clsx, and Tailwind-specific solutions like twin.macro, twind, and xwind.

Further Reading

• [React.js conditionally applying class names](https://github.com/facebook/react/issues/2316)
• [How to dynamically add a class to manual class names?](https://stackoverflow.com/questions/37585255/how-to-dynamically-add-a-class-to-manual-class-names)
• [Correct way to handle conditional styling in React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [Embedding Expressions in JSX](https://reactjs.org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
• [Template literals - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimizing for Production - Writing purgeable HTML - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

The above is the detailed content of How Can I Dynamically Apply Tailwind CSS Classes in React Using Template Literals?. For more information, please follow other related articles on the PHP Chinese website!