search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Text-color on parent not overriding text-color on children #402

Closed mvsrgc closed 4 years ago

mvsrgc commented 4 years ago

https://tailwind.run/8Pkjaa/2

Add a text-white class to the second div, you will see that it does not change the color of the a element which specifies a purple color.

Thank you :)

adamwathan commented 4 years ago

This works as I'd expect:

https://tailwind.run/8Pkjaa/3

Styles applied directly to an element override styles applied by the parent in CSS.

mvsrgc commented 4 years ago

That's fair, but why is it that adding 'text-white' to the first "a" element does not override it's purple color?

https://tailwind.run/8Pkjaa/5

I've read up on class priority and apparently the last class should have more importance, but the link stays purple even if you set text-white after text-purple.

adamwathan commented 4 years ago

The last class in the CSS file gets more priority, not the last class in the class attribute in the HTML 👍🏻

Best practice is don't apply two utilities to the same element that target the same property.