Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
3 полезных совета по Tailwind CSS
Tailwind CSS произвел революцию в том, как мы подходим к веб-дизайну, предложив утилитарно-ориентированный фреймворк, который позволяет быстро разрабатывать и легко настраивать интерфейсы. В этом посте мы рассмотрим три менее известных, но очень полезных совета по Tailwind CSS, которые помогут ускорить рабочий процесс и улучшить качество кода.
1. Используйте size-{n} для одинаковой ширины и высоты
Вместо того чтобы отдельно задавать ширину и высоту, можно использовать утилиту size-{n}, если элементу нужны одинаковые размеры.
<!-- Вместо этого -->
<div class="w-12 h-12 bg-blue-500 rounded-full"></div>
<!-- Используйте это -->
<div class="size-12 bg-blue-500 rounded-full"></div>
Этот шорткат удобен для квадратов, кругов и любых элементов, где нужна равная ширина и высота.
2. Применяйте divide-{y/x}-{n} для равномерного разделения
Когда нужно добавить границы или разделители между дочерними элементами, вместо ручного добавления бордеров каждому ребёнку используйте утилиту divide-{y/x}-{n} на родительском контейнере. Это гарантирует единообразное разделение и уменьшает количество кода.
<!-- Вместо этого -->
<div>
<div class="py-4 border-b">Item 1</div>
<div class="py-4 border-b">Item 2</div>
<div class="py-4">Item 3</div>
</div>
<!-- Используйте это -->
<div class="divide-y">
<div class="py-4">Item 1</div>
<div class="py-4">Item 2</div>
<div class="py-4">Item 3</div>
</div>
Этот подход особенно полезен для списков, меню и любых макетов, где нужно одинаковое разделение элементов.
3. Используйте произвольные варианты с [&_selector]:
Tailwind CSS позволяет применять стили ко всем совпадающим дочерним элементам через родителя с помощью синтаксиса [&_selector]:. Это делает HTML чище и удобнее в поддержке.
<!-- Вместо этого -->
<ul>
<li class="mb-2 text-blue-500">Item 1</li>
<li class="mb-2 text-blue-500">Item 2</li>
<li class="mb-2 text-blue-500">Item 3</li>
</ul>
<!-- Используйте это -->
<ul class="[&_li]:mb-2 [&_li]:text-blue-500">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Этот метод особенно полезен для единообразного применения стилей к дочерним элементам без необходимости прописывать их каждому отдельно.
👉 @frontend_1 Если у вас установлено приложение,
вы можете сразу перейти в канал