Проблема специфики порядка служебных классов CSS [дубликат] ⇐ CSS

[Anonymous]

Я столкнулся с одним сценарием, работая с Tailwind над созданием пользовательских компонентов. Я попытался упростить проблему, используя ссылку на ручку кода (браузер Firefox)
Итак, к элементу применены три цветовых класса, и я думал, что всегда побеждает последний цвет. Поэтому он всегда должен быть розовым, но оказалось, что это не так, и цвет текста зависит от того, какой класс появляется в CSS последним.
Поэтому я просто пытаюсь понять, что здесь происходит. Поскольку классы являются служебными классами и не имеют никакой специфики, кроме порядка их появления.

Код: Выделить всё

.blue {
color: blue;
}

.pink {
color: pink;
}

.red {
color: red;
}

.yellow {
color: yellow;
}

Код: Выделить всё

Hello World

Codepen

Подробнее здесь: https://stackoverflow.com/questions/791 ... ty-problem