Всем привет. Возникла какая-то непредвиденная ошибка, которую я раньше как-то исправлял, но не помню как, так как прошло уже более полугода.
Суть в том, что есть у меня кастомные кнопки со стилями от TailwindCSS.
<h3>Текстовые кнопки</h3>
<p>
<button class="btn btn-text btn-success">.btn .btn-text .btn-success</button>
<button class="btn btn-text btn-warning">.btn .btn-text .btn-warning</button>
<button class="btn btn-text btn-error">.btn .btn-text .btn-error</button>
<button class="btn btn-text btn-primary">.btn .btn-text .btn-primary</button>
<button class="btn btn-text btn-info">.btn .btn-text .btn-info</button>
<button class="btn btn-text btn-dark">.btn .btn-text .btn-dark</button>
<button class="btn btn-text btn-light">.btn .btn-text .btn-light</button>
<button class="btn btn-text btn-link">.btn .btn-text .btn-link</button>
</p>
Проблема в том, что первая кнопка (первый элемент) в данной структуре применяется практически без стилей. Используется только стили от ".btn-text". А ".btn-success" или другие игнорируются (для первого элемента).
НО! Если добавить ещё одну такую кнопку, то на вторую кнопку применяются стили. А вот на первую нет. При чём, не важно "btn btn-text btn-success" первый в списке или нет - всё равно первая кнопка без стилей.
Совсем не пойму в чём дело, подскажите пожалуйста.
PS: Проверял стили - проблем не замечено. Тем более второй элемент правильно определяется по стилям.
PS2: Через валидатор онлайн (
https://validator.w3.org/) проверил - ошибок ноль.
Залил на CodePen. Только почему то стили не отработали(
https://codepen.io/dima9595/pen/wvGyrro 
Средний
