less than 1 minute read

💡 Проблема: при text-decoration: underline на родительском элементе, мы не можем преребить его через text-decoration: none на элементе-потомке никак

Вы не перебьёте это специфичностью, потому что тут не “конфликт правил”, а поведение CSS:

text-decoration на родителе распространяет подчёркивание на все дочерние инлайны. Потомок не может “отменить” его своим text-decoration: none (даже с !important). Это не баг Tailwind — это норма CSS Text Decoration.

Проще всего: не вешайте underline на контейнер, а нацеливайте его только на ссылки.

Самый удобный фикс на Tailwind

Замените underline у контейнера на произвольный вариант, который подчеркивает только <a>:

<div class="container w-full flex flex-col text-xl space-y-5 [&_a]:underline">
  <a href="...">...</a>
  <p>aaa</p><!-- тут подчёркивания больше не будет -->
  <a href="...">...</a>
</div>

[&_a]:underline — это “arbitrary variant”: применит underline ко всем <a> внутри контейнера и не затронет <p>.

Если по каким-то причинам нужно оставить underline на родителе

Технически потомок не может его снять. Единственные обходные пути — разнести разметку (держать <p> вне подчеркивающего контейнера) или “ломать” поток подчеркивания атомарным inline-элементом (например, оборачивать текст в inline-block), но внутри flex это работает нестабильно и выглядит как костыль.

Итого: перекиньте подчёркивание на ссылки (вариант выше) — и всё станет как надо.