# You can’t generate classes dynamically in Tailwind

> Why you cannot build Tailwind class names dynamically like bg-color-500, and how to fix it by mapping full classes in a switch or listing them in a comment.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-12-11 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/tailwindcss-cannot-generate-classes-dynamically/

I wanted to have a dynamic color in Tailwind, using a syntax like this in JSX:

```jsx
bg-${color}-500
```

But it wasn’t applied to the page because Tailwind couldn't find for example the text `bg-red-500` in the code, so the code was not added to the final CSS.

So instead I made a list of possible color options in a switch, and generated the class:

```jsx
const getColorClass = (color) => {
  switch (color) {
    case 'green': return 'text-green-500'
    case 'blue': return 'text-blue-500'
    case 'red': return 'text-red-500'
    default: return ''
  }
}
```

And I used this function in my classes:

```jsx
<h1 className={`mt-10 ${getColorClass(color)}`}>
...
```

A "quick way" is to write the classes you might need in a comment, like this:

```js
/* possible Grid values are grid-cols-1 grid-cols-2 grid-cols-3 */
<div className={`grid grid-cols-${data[0].length}`}>
```