Что такое Tailwind CSS

Tailwind CSS — это CSS-фреймворк из тысяч маленьких классов. Каждый класс делает одно дело: p-4 задаёт внутренний отступ, text-white — белый текст, rounded-lg — скругление углов. Элемент оформляют, собирая такие классы прямо в атрибуте class. Курс описывает Tailwind CSS 4.

Utility-first

Класс, который задаёт одно-два CSS-свойства, называют утилитой (utility class). Подход, при котором страницу оформляют в основном утилитами, называют utility-first. Вот кнопка, сделанная только ими:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white">
  В корзину
</button>

Под кодом видна синяя кнопка со скруглёнными углами. Первая строка подключает Tailwind прямо в браузере — о ней следующий урок.

Как это выглядит в обычном CSS

Та же кнопка в привычном стиле требует придумать имя класса и описать его в отдельном файле:

.buy-button {
  border-radius: 0.5rem;
  background-color: #4f46e5;
  padding: 0.5rem 1rem;
  color: white;
}

С Tailwind не нужно придумывать имена и переключаться между HTML и CSS. Стили видны там же, где разметка, а удаление элемента удаляет и его оформление — в CSS-файле не остаётся забытых правил.

Чем это не инлайн-стили

Атрибут style тоже пишут прямо в разметке, но у утилит есть то, чего нет у него:

Шкала — главное: вместо любых чисел вы выбираете из согласованного набора, поэтому интерфейс выглядит аккуратно.

Чем отличается от Bootstrap

Bootstrap даёт готовые компоненты: .btn, .card, .navbar. Tailwind готовых компонентов не даёт — только строительные блоки. Дизайн получается своим, а не узнаваемым «бутстраповским».

Что будет в курсе

Сквозной пример — карточка товара: картинка, название, цена и кнопка. Сначала вы оформите её по частям, затем соберёте из таких карточек лендинг и панель управления. Все примеры с HTML работают прямо на странице урока.

Частая ошибка

Искать в Tailwind готовые классы компонентов, как в Bootstrap:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="btn btn-primary">В корзину</button>

Кнопка выглядит как обычный текст: классов btn и btn-primary в Tailwind нет, и он их молча пропускает. Кнопку собирают из утилит, а повторяющиеся наборы выносят в компоненты шаблона — этому посвящён отдельный урок.