Frontend разработчик

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

👍8❤‍🔥2💩1

www.tgoop.com/frontend_1/4059

1.61K viewsAug 18 at 05:07

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>

<!-- Вместо этого -->
<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>

<!-- Вместо этого -->
<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>

BY Frontend разработчик