Conditionally set background color in React component with Tailwind CSS

by

Unfortunately, Tailwind requires the color to be hardcoded into the className prop as it cannot compute arbitrary styles from dynamic className values.

Your best bet would be to set the background color using the style prop as shown below;

interface Props {
  color: string;
}

const ColorSwatch = ({ color }: Props) => {
  return (
    <div className="flex flex-col gap-1 p-2">
      <div
        className="h-20 w-20 border border-gray-400 shadow-md"
        style={{backgroundColor: color}}
      ></div>
      <p className="text-center">{color}</p>
    </div>
  );
};

export default ColorSwatch;

You can look here and here to read more on how Tailwind generates arbitrary styles.

More Related Contents:

  1. Dynamically build classnames in TailwindCss
  2. React and Tailwind CSS: dynamically generated classes are not being applied
  3. Next Image not taking class properties
  4. We simply cannot write “ in ReactJS?
  5. Dynamic tag name in React JSX
  6. Error : Cannot read property ‘map’ of undefined
  7. How do I hide API key in create-react-app?
  8. Clear and reset form input fields
  9. How to resolve “Cannot use import statement outside a module” in jest
  10. Hide keyboard in react-native
  11. React app exiting in docker container with exit code 0
  12. When giving unique keys to components, is it okay to use Math.random() for generating those keys?
  13. Should flux stores, or actions (or both) touch external services?
  14. React-Router open Link in new tab
  15. ReactJS with ES6: this.props is not a function when I communicate two components
  16. useNavigate() may be used only in the context of a component
  17. Testing React components that fetches data using Hooks
  18. Trace why a React component is re-rendering
  19. Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
  20. React passing parameter via onclick event using ES6 syntax
  21. React fetch data in server before render
  22. Why useEffect doesn’t run on window.location.pathname changes?
  23. Call child component method from parent in react
  24. How to enable file upload on React’s Material UI simple input?
  25. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  26. How to bundle a React app to a subdirectory on a server?
  27. How to test Async Storage with Jest?
  28. Children won’t render when using a layout in ReactJS
  29. create react app not picking up .env files?
  30. Show/Hide components in ReactJS

Leave a Comment