I'm coding this site up in Tailwind. Everything looks perfect, aside from input elements.

 <input type="text" className="bg-red-200 text-blue-400" placeholder="Enter some text"></input>

I can't override this no matter what I try. The only thing that has worked is a custom CSS rule in the globals.css file. Why isn't this working?

CodePudding user response：

It looks like that me defining custom styles somehow disabled using tailwind styles despite the CSS being valid. After disabling my custom styles in the tailwind config, the CSS in the OP worked.

CodePudding user response：

Tailwind in case of conflicts uses the latest className while styling

i.e Order of classes matters

Example:

<div ></div>

Output:

The bg-black is overridden by bg-green-600.

In your example, if you have placed your custom class in the right most side. It would override all the conflicting classes placed before to it (left side)