React and Tailwind CSS: dynamically generated classes are not being applied

by

The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included.

If you only need to span 2 columns, you could pass boolean values which will trigger the addition of a full col-span-2 or row-span-2 utility class to be added:

const Button = ({ colSpan = false, rowSpan = false, children }) => {
  return (
    <div
      className={`${colSpan ? 'col-span-2' : ''} ${rowSpan ? 'row-span-2' : ''} bg-white p-3 rounded`}
    >
      <div className="flex items-center justify-center">{children}</div>
    </div>
  );
};

Otherwise, you could pass the values as classes to the Button component:

<Button className="col-span-2 row-span-1">=</Button>

const Button = ({ className, children }) => {
  return (
    <div
      className={`${className} bg-white p-3 rounded`}
    >
      <div className="flex items-center justify-center">{children}</div>
    </div>
  );
};

More information: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

More Related Contents:

  1. Conditionally set background color in React component with Tailwind CSS
  2. Dynamically build classnames in TailwindCss
  3. Next Image not taking class properties
  4. How to pass data from child component to its parent in ReactJS?
  5. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  6. What is the best way to access redux store outside a react component?
  7. Is it possible to use if…else… statement in React render function?
  8. What is use of curly braces in an ES6 import statement?
  9. Can I dispatch an action in reducer?
  10. react setState with dynamic key
  11. Sending the bearer token with axios
  12. What does it mean when they say React is XSS protected?
  13. What is withRouter for in react-router-dom?
  14. Remove console.logs with Webpack & Uglify
  15. Target Active Link when the route is active in Next.js
  16. How do I hide an API key in Create React App?
  17. Adding an .env file to a React project [duplicate]
  18. ‘withRouter’ is not exported from ‘react-router-dom’
  19. VirtualizedList: You have a large list that is slow to update
  20. is it possible to React.useState(() => {}) in React?
  21. Jest setup “SyntaxError: Unexpected token export”
  22. Passing object as props to jsx
  23. create-react-app: how to use https instead of http?
  24. Disable ESLint that create-react-app provides
  25. Webpack & Typescript image import
  26. How to import a .txt file from my source?
  27. How to listen to localstorage value changes in react?
  28. Why my render method is react called twice
  29. Put A Warning If Page Refresh in ReactJS
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment