Tailwind CSS: руководство по утилитарному CSS-фреймворку

Tailwind CSS — утилитарный CSS-фреймворк, который предоставляет низкоуровневые классы для быстрой стилизации интерфейсов. Вместо готовых компонентов Tailwind даёт атомарные классы: flex, p-4, text-blue-500. В этой статье рассмотрены основы, конфигурация и типичные паттерны работы с Tailwind.

Философия Tailwind

Tailwind следует принципу utility-first: вместо семантических классов вроде .button или .card используются комбинации утилит. Это уменьшает переключение контекста между HTML и CSS, ускоряет вёрстку и снижает дублирование стилей.

Установка

Через npm (рекомендуется)

npm install -D tailwindcss
npx tailwindcss init

Конфигурация

Файл tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: {
    files: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

Подключение в CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CLI

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Основные утилиты

Отступы и размеры

Класс	Свойство
p-4	padding: 1rem
px-6	padding-left/right: 1.5rem
m-2	margin: 0.5rem
mt-4	margin-top: 1rem
w-full	width: 100%
h-screen	height: 100vh
max-w-xl	max-width: 36rem

Flexbox

Класс	Свойство
flex	display: flex
flex-col	flex-direction: column
justify-center	justify-content: center
items-center	align-items: center
gap-4	gap: 1rem
flex-1	flex: 1 1 0%

Типографика

Класс	Свойство
text-lg	font-size: 1.125rem
font-bold	font-weight: 700
text-center	text-align: center
text-gray-600	color: rgb(75 85 99)
leading-relaxed	line-height: 1.625

Цвета и фон

Класс	Свойство
bg-blue-500	background-color
text-white	color: white
border-gray-200	border-color
rounded-lg	border-radius: 0.5rem
shadow-md	box-shadow

Адаптивность

Префиксы sm:, md:, lg:, xl:, 2xl: для медиа-запросов:

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

Состояния

hover:, focus:, active:, disabled::

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
  Кнопка
</button>

Конфигурация темы

Расширение палитры, шрифтов и отступов в tailwind.config.js:

theme: {
  extend: {
    colors: {
      brand: {
        50: '#f0f9ff',
        500: '#0ea5e9',
        900: '#0c4a6e',
      },
    },
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
    spacing: {
      '18': '4.5rem',
    },
  },
},

Компоненты через @apply

Для повторяющихся комбинаций можно использовать @apply:

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-300;
  }
}

Не злоупотребляйте: избыточное использование @apply нивелирует преимущества utility-first.

Производительность

Tailwind генерирует только используемые классы. В production объём CSS обычно небольшой. Убедитесь, что в content указаны все файлы с классами Tailwind.

Инструменты

Для конвертации обычного CSS в классы Tailwind используйте CSS в Tailwind на rechecker.ru. Инструмент помогает при миграции существующих стилей.

Arbitrary values

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

<div class="w-[347px] top-[117px] bg-[#1da1f2]">
  Произвольные значения
</div>

Темная тема

Класс dark: применяется при prefers-color-scheme: dark или при наличии класса dark на html:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Адаптация под тему
</div>

В tailwind.config.js:

darkMode: 'class', // или 'media'

Контейнеры

container центрирует контент и задаёт max-width. Размеры настраиваются в теме:

theme: {
  container: {
    center: true,
    padding: '2rem',
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
},

Плагины

Официальные плагины: @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio. Сторонние: tailwindcss-animate, @tailwindcss/line-clamp.

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

Дополнительные материалы

Пошаговая миграция с обычного CSS на Tailwind — в Как перейти с обычного CSS на Tailwind.

---

Интеграция с фреймворками

React / Next.js

Установите Tailwind и настройте PostCSS. В Next.js 13+ Tailwind подключается через tailwind.config.js и postcss.config.js. Классы применяются напрямую в JSX.

Vue

Аналогичная настройка. В Single File Components классы задаются в атрибуте class. Для динамических классов используйте объектный или массивный синтаксис.

Svelte

Tailwind работает с Svelte без дополнительных настроек. Используйте class: директиву для условных классов.

Оптимизация production

Tailwind удаляет неиспользуемые классы при сборке. Убедитесь, что в content указаны все файлы, где могут встречаться классы (включая динамически генерируемые строки). Для динамических классов перечислите их в safelist в конфиге.

Кастомизация через плагины

Собственные утилиты можно добавить через addUtilities:

plugin(function({ addUtilities }) {
  addUtilities({
    '.scrollbar-hide': {
      '-ms-overflow-style': 'none',
      'scrollbar-width': 'none',
      '&::-webkit-scrollbar': { display: 'none' }
    }
  })
})

Конфликты с другими CSS

Tailwind использует низкую специфичность. При конфликтах с глобальными стилями используйте @layer для правильного порядка каскада или модификатор ! для important.

Рекомендации по именованию

Избегайте дублирования: flex items-center justify-center читается лучше, чем кастомный класс с тем же содержимым. Для повторяющихся блоков из 5+ утилит рассмотрите @apply или компонент.

Grid в Tailwind

Tailwind предоставляет классы для CSS Grid:

Класс	Свойство
grid	display: grid
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr))
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr))
gap-4	gap: 1rem
col-span-2	grid-column: span 2
row-span-2	grid-row: span 2

Для адаптивных сеток: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

Анимации

Встроенные анимации: animate-spin, animate-ping, animate-pulse, animate-bounce. Кастомные — через theme.extend.animation и @keyframes.

Варианты (variants)

Порядок применения: responsive (sm:, md:), state (hover:, focus:), dark (dark:). Кастомные варианты добавляются через плагины.

Совместимость с PostCSS

Tailwind работает как PostCSS-плагин. В postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Версионирование

Tailwind v4 изменил конфигурацию (CSS-first). Проверяйте документацию для вашей версии. v3 остаётся стабильным выбором для большинства проектов.