Применение стилей к дочерним элементам в Tailwind

31 августа 2023

Покопавшись в документации, я нашёл простой способ применять стили к дочерним элементам.

Представим, что у нас есть <div>, который содержит внутри изображение <img> и текст <p>.

Добавляем конструкцию <div class="[&>img]:rounded-lg"> или <div class="[&>p]:text-white"> соответственно для изображения или текста. Чтобы применить класс к любому дочернему элементу просто добавляем <div class="[&>*]:p-2">.

Не знаю как в других версиях, но это отлично работает в Tailwind 3.3.