Frontend Academy · Урок

Tailwind CSS: подход utility-first

Применяйте готовые вспомогательные классы непосредственно в HTML, настраивайте тему в tailwind.config.js и используйте @apply для выделения повторяющихся шаблонов.

«Tailwind CSS: подход utility-first» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое CSS с приоритетом утилит

Tailwind CSS предоставляет готовые служебные классы для каждого свойства CSS. Вместо написания собственного CSS Вы составляете стили, добавляя служебные классы непосредственно в HTML. Один класс = одно объявление CSS.

Установка Tailwind

Установите Tailwind и инициализируйте конфигурацию. В проектах Vite используется плагин Tailwind для Vite или плагин PostCSS.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

Служебные классы на практике

Создайте карточку, используя только служебные классы Tailwind. Отдельный файл CSS не нужен.

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

Адаптивные префиксы

Добавляйте префиксы контрольных точек адаптивности. md: применяется на экранах среднего размера и больше. lg: — на больших экранах. Tailwind использует подход с приоритетом мобильных устройств.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Варианты состояний

Добавляйте к классам префиксы состояний: hover:, focus:, active:, disabled:, dark:.

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

Настройка темы

Настраивайте цвета, интервалы, шрифты и контрольные точки в tailwind.config.js. Расширяйте тему по умолчанию или заменяйте её части.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply — выделение шаблонов

Используйте @apply в файлах CSS, чтобы объединять служебные классы в повторно используемое правило CSS. Применяйте этот подход умеренно — в большинстве случаев предпочтительнее непосредственные служебные классы.

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

Удаление неиспользуемого CSS

Tailwind создаёт тысячи служебных классов. В рабочей сборке он сканирует исходные файлы и удаляет каждый неиспользуемый класс, в результате чего файлы CSS становятся очень маленькими (часто менее 10 КБ).

Tailwind с React/Vue

В React используйте cn() (clsx + twMerge), чтобы условно применять классы Tailwind без конфликтов. В Vue используйте привязки :class.

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

Установите расширение Tailwind CSS IntelliSense для VSCode, чтобы получить автодополнение, предварительный просмотр имени класса при наведении и проверку неизвестных классов. Оно значительно улучшает процесс разработки с Tailwind.

Критика Tailwind и аргументы в его пользу

Критики: HTML становится перегруженным множеством классов и его сложнее читать. В защиту Tailwind: Вам не приходится писать CSS, все стили находятся рядом с разметкой, а система дизайна задаётся конфигурацией. Большинство команд, постоянно использующих Tailwind, сообщают о более высокой продуктивности.

Быстрая проверка

Как Tailwind управляет размером рабочей сборки, если создаёт тысячи служебных классов?

Повторение: Tailwind CSS

Подход с приоритетом утилит: один класс = одно свойство CSS. В большинстве случаев собственный CSS не нужен. Адаптивные префиксы и префиксы состояний. Настраивайте с помощью tailwind.config.js. Используйте @apply для повторяющихся шаблонов. Рабочая сборка сканирует исходный код и удаляет неиспользуемые классы. В React применяйте cn() + twMerge для условных классов. Установите расширение IntelliSense.

Часто задаваемые вопросы

Урок «Tailwind CSS: подход utility-first» бесплатный?

Да — полный текст урока «Tailwind CSS: подход utility-first» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Tailwind CSS: подход utility-first»?

Применяйте готовые вспомогательные классы непосредственно в HTML, настраивайте тему в tailwind.config.js и используйте @apply для выделения повторяющихся шаблонов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Tailwind CSS: подход utility-first»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Методология BEM: Block, Element, Modifier
CSS Modules: изолированные имена классов
CSS-in-JS: Styled-components и Emotion
Tailwind CSS: подход utility-first

← Назад к Frontend Academy