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

Tailwind CSS — utility-first CSS-фреймворк, который позволяет стилизовать HTML напрямую через классы, без написания отдельных CSS-файлов. Вместо традиционного подхода «придумай имя класса → напиши стили» вы добавляете готовые утилиты прямо в разметку. Я выбрал его для своих проектов за скорость разработки и полный контроль над дизайном.

Ключевая идея

Традиционный 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 CSS:

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

Результат одинаковый, но с Tailwind не нужно придумывать имена классов и переключаться между файлами.

Основные концепции

Утилитарные классы

Каждый класс делает ровно одну вещь:

Адаптивный дизайн

Префиксы для разных экранов — mobile-first:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 1 колонка на мобильных, 2 на планшетах, 3 на десктопе -->
</div>

Тёмная тема

Префикс dark: — переключение в одну строку:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  Автоматически переключается под тему ОС
</div>

Кастомизация

Всё настраивается через конфиг:

// tailwind.config.mjs
export default {
  theme: {
    extend: {
      colors: {
        brand: '#4F46E5',
        accent: '#F59E0B',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

После этого можно писать text-brand, bg-accent, font-sans.

Tailwind v4 (2025+)

В январе 2025 вышел Tailwind CSS v4 с важными изменениями:

• Конфигурация через CSS вместо JS-файла — настройки в @theme директиве прямо в CSS
• Новый движок Oxide на Rust — билд в 10× быстрее
• Автоматическое обнаружение контента — не нужно указывать content пути
• Нативные CSS-переменные — все токены доступны как var(--color-blue-500)

/* Новый формат в v4 */
@import "tailwindcss";

@theme {
  --color-brand: #4F46E5;
  --font-sans: "Inter", sans-serif;
}

Зачем Tailwind для контентного сайта

Плагин Typography — must-have для блога

Контент из CMS приходит как HTML. Без стилизации он выглядит «голым». Плагин Typography решает это одним классом:

<article class="prose dark:prose-invert max-w-prose mx-auto">
  <!-- HTML из CMS -->
  <h2>Заголовок статьи</h2>
  <p>Текст с <strong>выделением</strong> и <a href="#">ссылками</a></p>
  <pre><code>И код тоже</code></pre>
</article>

Всё автоматически получает красивую типографику, отступы, размеры шрифтов.

Подключение к Astro

Одна команда:

npx astro add tailwind

Astro сам настроит конфиг и интеграцию. После этого классы Tailwind доступны во всех .astro, .jsx, .svelte файлах.

Сравнение с альтернативами

Полезные ссылки

• Официальный сайт
• Документация
• Tailwind UI — платная библиотека готовых компонентов
• Плагин Typography
• Интеграция с Astro
• GitHub