Tailwind css apply order

Question

I want to know tailwind css apply order. Or it can be issue of general css order.

However, when I put 2 classes, bg-gray-50 and bg-gray-500, bg-gray-50 class is applied only. It doesn't matter for order of two classes. So, bg-gray-50 bg-gray-500 and bg-gray-500 bg-gray-50 has same effect. Always bg-gray-50 class is applied only.

Why does it work and how can I apply bg-gray-500 class?

Answer 1

Because in file css core of tailwind which they defind all class of tailwind, they place class bg-gray-50 before bg-gray-500.So it compile the first class and ignore later class. You can imagine their order:

// tailwind.css
.bg-gray-50 { background-color: #E9E6E6 }
.bg-gray-500 { background-color: #DCD7D7 }

if you want to apply bg-gray-500, defind backgroundColor by style property which is more priority style={{backgroundColor: '#DCD7D7'}}

Answer 2

just add Important modifier !bg-gray-500

https://tailwindcss.com/docs/configuration#important-modifier