How to use template literals in tailwindcss to change classes dynamically?

by

Do it like this:

<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>

Just keep in mind not to use string concatenation to create class names, like this:

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

Instead you can select complete class name:

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

// following is also valid if you don't need to concat the classnames
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

As long as a class name appears in your template in its entirety, Tailwind will not remove it from production build.

There are some more options available for you like using a library like classnames or clsx, or maybe Tailwind specific solutions like twin.macro, twind, xwind.

Further Reading:

More Related Contents:

  1. Next.js Global CSS cannot be imported from files other than your Custom
  2. How to override global CSS in a CSS module file?
  3. Text Stroke (-webkit-text-stroke) css Problem
  4. How to combine and use multiple Next.js plugins
  5. Working with CSS in React [closed]
  6. React.js inline style best practices [closed]
  7. How to dynamically add a class to manual class names?
  8. How to make React CSS import component-scoped?
  9. Change outline for OutlinedInput with React material-ui
  10. React native text going off my screen, refusing to wrap. What to do?
  11. How to add fonts to create-react-app based projects?
  12. Dynamically build classnames in TailwindCss
  13. How do I apply vendor prefixes to inline styles in reactjs?
  14. How to get a react component’s size (height/width) before render?
  15. How to apply custom animation effect @keyframes in MUI?
  16. How to use images in css with Webpack
  17. ml-auto is not pushing navbar links to the right
  18. Next Image not taking class properties
  19. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  20. Make a DIV fill an entire table cell
  21. Is there a CSS hack to affect Safari only NOT Chrome?
  22. Outlining and partially filling an SVG Shape
  23. Setting height: 100% on my label element doesn’t work
  24. How is font size calculated?
  25. CSS Selector for nth range?
  26. Order of prioritization when using multiple contradictory css files
  27. How can I get the height of an element using css only
  28. When does CSS’s !important declaration not work?
  29. how to cancel opacity for a child element?
  30. React + Material-UI – Warning: Prop className did not match

Leave a Comment