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

Приглашаем Backend‑, Frontend‑, FullStack‑разработчиков, системных аналитиков, архитекторов ПО и Team Lead оценить формат обучения курса OTUS «Архитектор программного обеспечения» на бесплатных открытых уроках:
• 9 ноября, 20:00 — «Монолит или микросервисы? Руководство для архитекторов, которые ценят свои нервы». Разберём критерии выбора архитектуры, скрытые издержки моделей, паттерны перехода (Strangler Fig, BFF и др.), роль DevOps и мониторинга.

• 23 ноября, 20:00 — «NoSQL в бою: как Cassandra помогает строить отказоустойчивый бэкенд». Фокус на архитектуре Cassandra, балансе консистентности и доступности, паттернах проектирования для e‑commerce, финтеха и стриминга.

👉 Записаться на открытые уроки и получить программу курса: https://vk.cc/d3kart

Если открытые уроки окажутся полезными, присоединяйтесь к курсу «Архитектор программного обеспечения». Он поможет выйти за рамки отдельных технических задач и сформировать целостное понимание современной архитектуры ПО.
Старт курса — 27 ноября, длительность — 4 месяца. В программе: Event‑Driven, CQRS, DDD, Event Sourcing, API First, микрофронтенды, Kappa и Lambda‑архитектуры, ETL vs ELT, механизмы наблюдаемости, применение ИИ для документирования и кодогенерации. Выпускной проект (например, «Room with a view») закрепит навыки в прикладном контексте.

👉 Пройдите тест и получите персональные рекомендации: https://vk.cc/d3kapP

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Где CSS подложил вам ловушки

Мне кажется, что каждый фронтендер множество раз сталкивался с ситуацией, когда CSS переставал работать так, как ожидаешь. Причём не имеет значения опыт разработчика. С одинаковой вероятностью в тупик может попасть как джун, так и опытный разработчик. Не зря же CSS стал героем такого количества мемов.

Я и сам не раз попадал в подобные ситуации. Но, несмотря на все эти сюрпризы, CSS мне по-прежнему нравится. Конечно, изменить стандарты я не могу. Зато могу рассказать о ловушках, в которые когда-то я попался. Возможно, некоторые из них окажутся неожиданными и для вас.

Давайте посмотрим, что я подготовил.

https://habr.com/ru/companies/ruvds/articles/1097580/

👉 @frontend_1

Сократите свой CSS-код с помощью :where()

Используйте псевдокласс-функцию :where(), когда нужно применить одинаковые стили к нескольким элементам, не беспокоясь о том, что порядок селекторов повлияет на специфичность правил. Это простой способ сделать CSS более предсказуемым и удобным для поддержки.

/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
border: 2px solid red;
padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
border: 2px solid red;
padding: 10px;
}

👉 @frontend_1

Распространённые коды состояния HTTP

👉 @frontend_1

CSS совет 💡

Возможно, вы не знали, что в CSS можно задавать поворот, используя единицу измерения turn

👉 @frontend_1

Совет по Javascript 💡

Как выбрать последний элемент массива

👉 @frontend_1

Совет CSS 💡

Вы можете не знать об этом псевдоклассе CSS

👉 @frontend_1

🪄 Трюк: «Скелетон» без JS

При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f0f0f0 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}

@keyframes shimmer {
100% {
background-position: -200% 0;
}
}

📌 Как использовать:

1. Создаёте div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

👉 @frontend_1

Разработчик больше не обязан выполнять каждую задачу вручную. Но сможет ли ИИ-агент действительно помочь в работе?

ИИ-агенты уже умеют анализировать код, работать с инструментами, искать ошибки и выполнять последовательность действий. Но важно понимать, какие задачи им можно доверить, где они действительно экономят время и как сохранить контроль над результатом.

На открытом уроке 19 октября в 20:00 МСК в преддверие старта курса «Разработка ИИ-агентов» разберем, как создавать и применять агентов в реальной разработке. Вы узнаете, какие задачи можно делегировать ИИ-агентам, как они работают с кодовой базой и внешними системами, где помогают ускорить процессы, а где требуется участие разработчика.

Урок будет полезен разработчикам, техническим специалистам и тимлидам, которые хотят использовать возможности ИИ не только для генерации кода. Откройте новый подход к разработке. Регистрируйтесь на открытый урок: https://vk.cc/d2OXld

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576