Tailwind CSS: стилизация без боли

Tailwind CSS — CSS-фреймворк с подходом utility-first: интерфейс собирается из небольших служебных классов прямо в HTML-разметке. Этот справочник показывает, как использовать Tailwind CSS v4.3 в Astro, оформить контент из CMS и оценить, подходит ли utility-first вашему проекту.

Материал актуализирован по официальной документации Tailwind CSS v4.3, доступной 10 сентября 2026 года.

Содержание

1. Как устроен подход utility-first
2. Группы утилит Tailwind CSS
3. Адаптивная вёрстка
4. Тёмная тема
5. Конфигурация Tailwind CSS v4
6. Что изменилось в Tailwind CSS v4
7. Подключение к Astro и проверка результата
8. Typography для контента из CMS
9. Полезные сценарии
10. Ограничения и выбор подхода
11. Официальные ссылки

Как устроен подход utility-first

В обычном CSS вы сначала придумываете имя класса, а затем описываете его свойства:

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

<div class='card'>Контент</div>

В Tailwind те же свойства задаются готовыми утилитами:

<div class='p-4 rounded-lg bg-white shadow-sm'>Контент</div>

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

Группы утилит Tailwind CSS

Утилиты можно сочетать с вариантами состояния, например hover:, focus: и dark:, а также с префиксами контрольных точек sm:, md: и другими.

Адаптивная вёрстка

Tailwind использует mobile-first: классы без префикса действуют на всех размерах экрана, а классы с префиксом включаются начиная с указанной минимальной ширины.

<div class='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
  <!-- Одна колонка по умолчанию, две с md, три с lg -->
</div>

Стандартные контрольные точки Tailwind CSS v4.3:

sm: означает «от 640px», а не «только на телефоне». Мобильный вариант задавайте классом без префикса, затем переопределяйте его для более широких экранов:

<div class='text-center sm:text-left'>Контент</div>

Контрольные точки можно изменить через переменные темы --breakpoint-*. Для предсказуемого порядка правил используйте одну единицу измерения. Стандартные значения заданы в rem.

Тёмная тема

Вариант dark: применяет отдельные стили для тёмной темы:

<div class='bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100'>
  Контент
</div>

По умолчанию тёмный режим связан с системной настройкой prefers-color-scheme. Фрагмент разметки сам по себе не создаёт переключатель темы.

Если режим должен включаться вручную, в Tailwind CSS v4 можно переопределить вариант dark в основном CSS-файле:

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

После этого тёмные стили будут действовать, когда класс dark присутствует выше в дереве элементов:

<html class='dark'>
  <body>
    <div class='bg-white dark:bg-black'>Контент</div>
  </body>
</html>

Класс можно переключать с помощью JavaScript, сохраняя выбор пользователя в localStorage. Официальная документация также показывает вариант с атрибутом data-theme='dark'.

Конфигурация Tailwind CSS v4

В Tailwind CSS v4 основная конфигурация перенесена из JavaScript в CSS. Пользовательские токены задаются директивой @theme:

@import 'tailwindcss';

@theme {
  --color-brand: #4f46e5;
  --color-accent: #f59e0b;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

После этого доступны классы text-brand, bg-accent, font-sans и font-mono. Токены темы также публикуются как обычные CSS-переменные, поэтому их можно использовать напрямую:

.custom-element {
  color: var(--color-brand);
}

Конфигурация через tailwind.config.js характерна прежде всего для Tailwind CSS v3. В проектах, которые ещё работают на v3, проверяйте версию перед копированием конфигурации и инструкций для v4.

Что изменилось в Tailwind CSS v4

Tailwind CSS v4.0 вышел 22 января 2025 года. Основные изменения:

• конфигурация темы через CSS и директиву @theme;
• автоматическое обнаружение файлов с используемыми классами;
• дизайн-токены в виде нативных CSS-переменных;
• встроенная обработка @import;
• официальный Vite-плагин @tailwindcss/vite;
• поддержка container queries в ядре;
• новый высокопроизводительный движок сборки.

Формулировку «сборка в 10 раз быстрее» нельзя считать универсальной. В официальном анонсе указаны разные результаты в зависимости от типа сборки: полные сборки — до 5 раз быстрее, инкрементальные без новых CSS-классов — более чем в 100 раз быстрее. В опубликованном тесте проекта Catalyst улучшения составили 3,78 раза для полной сборки, 8,8 раза для инкрементальной сборки с новым CSS и 182 раза при отсутствии нового CSS.

Автоматическое обнаружение охватывает шаблонные файлы проекта, но исключает, например, содержимое из .gitignore и бинарные форматы. Если нужно явно подключить исключённый источник, используйте директиву @source:

@import 'tailwindcss';
@source '../node_modules/@my-company/ui-lib';

Подключение к Astro и проверка результата

Для актуального Tailwind CSS v4 официальное руководство по Astro использует Vite-плагин.

Что подготовить

Нужен проект Astro и доступный npm. Если проекта ещё нет, создайте его:

npm create astro@latest my-project
cd my-project

1. Установите зависимости

npm install tailwindcss @tailwindcss/vite

2. Подключите Vite-плагин

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    // Подключает Tailwind CSS к сборке Astro через Vite.
    plugins: [tailwindcss()],
  },
});

3. Создайте основной CSS-файл

/* src/styles/global.css */
@import 'tailwindcss';

4. Импортируйте стили в Astro

---
import '../styles/global.css';
---

<h1 class='text-3xl font-bold underline'>Проверка Tailwind</h1>

5. Запустите проект

npm run dev

Проверка результата

Откройте страницу в браузере. Успешный результат: заголовок отображается крупным, полужирным и подчёркнутым. Если оформление не появилось, проверьте импорт global.css, регистрацию tailwindcss() в astro.config.mjs и путь к странице.

Typography для контента из CMS

Официальный плагин @tailwindcss/typography добавляет классы prose для HTML, который приходит из Markdown или CMS.

Установка для Tailwind CSS v4

npm install -D @tailwindcss/typography

Подключите плагин в основном CSS-файле:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Теперь контент можно оформить базовым классом:

<article class='prose mx-auto max-w-prose dark:prose-invert'>
  <h2>Заголовок статьи</h2>
  <p>Текст с <strong>выделением</strong> и <a href='#'>ссылкой</a>.</p>
  <pre><code>const ready = true;</code></pre>
</article>

prose-invert включает подготовленную плагином цветовую схему для тёмного фона. Класс dark:prose-invert применит её через настроенный вариант dark.

Для Tailwind CSS v3 плагин подключается иначе — через массив plugins в tailwind.config.js. Перед копированием примера сначала проверьте версию проекта.

Полезные сценарии

Адаптивная карточка или навигация

Задача: сверстать карточки, навигацию или первый экран без отдельного набора CSS-классов для каждого элемента.

Действие: добавьте утилиты раскладки, размеров и контрольных точек прямо в шаблон.

Проверяемый результат: на мобильной ширине работает базовая раскладка, а md: и lg: последовательно меняют её при расширении окна.

Ограничение: длинные строки классов усложняют чтение разметки. Повторяющиеся наборы лучше выносить в компоненты.

Оформление статей из CMS

Задача: CMS возвращает HTML или Markdown, а внутренним тегам нельзя вручную назначить классы.

Действие: установите Typography и поместите контент внутрь элемента с классом prose.

Проверяемый результат: заголовки, абзацы, списки, ссылки и блоки кода получают согласованные размеры и отступы.

Ограничение: плагин нужно установить и подключить отдельно. Для нестандартного дизайна потребуются модификаторы prose-* или собственные стили.

Единые токены дизайна

Задача: проект использует собственные цвета и шрифты.

Действие: определите токены в @theme, затем применяйте созданные утилиты и CSS-переменные в компонентах.

Проверяемый результат: тестовый элемент получает цвет после применения text-brand или bg-accent, а CSS может обращаться к var(--color-brand).

Ограничение: изменение токена затронет все места, где он используется, поэтому переименование и удаление переменных нужно проверять по всему проекту.

Ограничения и выбор подхода

Tailwind не предоставляет готовые интерфейсные компоненты в ядре. Он даёт утилиты, варианты состояний, систему темы и инструменты сборки. Поэтому выбор между Tailwind, обычным CSS и компонентной библиотекой зависит от того, нужен ли проекту собственный дизайн или готовый набор элементов.

Официальные ссылки

• Документация Tailwind CSS
• Установка Tailwind CSS с Astro
• Анонс Tailwind CSS v4.0
• Адаптивный дизайн
• Тёмная тема
• Репозиторий Typography
• Репозиторий Tailwind CSS

Следующий шаг

Если после базовых утилит нужен отдельный слой компонентов, следующим шагом можно посмотреть daisyUI: красивые компоненты из коробки.

Подключение фреймворка к Astro полезно рассматривать вместе с контекстом конкретного сайта и его компонентами.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov