In my global css file where I import:

@tailwind base;
@tailwind components;
@tailwind utilities;

I moved this piece of code below body{...} and everything works now

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

To the first thing you should check if the same error occured is how you import tailwind css

I moved body to the bottom since fonts didn't work and it WORKED. Weird problem. I think tailwind just needed some refresh in styles UPD:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

If the classes don't show up in CSS in devtools, then it sounds like your HTML code is not covered by the content globs, or there has not been a CSS compilation run after the HTML code file was updated.

I can see from this exact example, bg-white will not generate a class here because the white color no longer exists since you have completely overridden colors by placing the key as theme.colors. If you wanted to extend the default colors that come with Tailwind instead of replacing them, you should place your color configuration in theme.extend.colors. If you did this, bg-white would work here.

After reading the tailwind documentation ,
I founded one of the way by which we can use the classes dynamically.
For example let colour be green, red, yellow, purple and we want to use it like className =bg-${color}-500.
while writing this directly we will not see any dynamic colour change in ui . So, to successfully use it we should write somewhere in the code for initialising the colours for example

...
//some where in the code
let colours = "bg-green-500 bg-red-500 bg-yellow-500 bg-purple-500"

//And now we can use this colour dynamically in the code, We can see the reflect in ui too.
//Here color can be green, red,yellow,purple
... className=bg-${color}-500 ...

Hello @Choi-Jinwook!

Tailwind doesn't support constructing classes using template strings. To include the class in the build, it needs to see a complete utility class string in the code. You can read more details here - https://tailwindcss.com/docs/content-configuration#dynamic-class-names.

To solve your issue, I would recommend using inline styles:

// ...
setTodoList(..., background: item.background, ...)
// ...
<div className={...} style={background} />
// ...

in Tailwind you can't use dynamic class naming like bg-${color}.

This because when Tailwind compiles its CSS, it looks up over all of your code and checks if a class name matches.

If you want dynamic name classes you should write all the class name.

But for your specific use case, I would not use the JIT of Tailwind and instead use the style attribute and dynamically change the backgroundColor value.

It will use less CSS and also give you less headache.

Finally, this is my suggestion

const colors = ['#7a5195', '#bc5090','#ef5675'];

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  const labels = {};

  names.forEach((name, index) => {
    labels[name] = colors[index];
  });

  return (
    <>

    {
      names.map((name) => (
        <div style={{ backgroundColor: `${labels[name]}` }}>
          {name}
        </div>
      )
    }
      
    </>
  );
}