Фронтенд

Tailwind CSS

Utility-first CSS-фреймворк: стилі збираються з дрібних класів прямо в розмітці.

Офіційний сайтРепозиторій

Що це

Tailwind CSS створив Адам Уотан (Adam Wathan), нині його розвиває Tailwind Labs, перший реліз вийшов у 2017 році. Замість готових компонентів (як Bootstrap) він дає набір атомарних класів: flex, p-4, text-sm, bg-blue-600.

Стилі пишуться у розмітці, а під час збірки Tailwind залишає в підсумковому CSS лише класи, які реально використані. Тому файл малий. Дизайн-токени (кольори, відступи, шрифти) задаються в конфігурації чи через CSS-змінні в @theme (Tailwind 4).

Підхід добре поєднується з компонентними фреймворками (React, Vue, Svelte): повторювані шматки виносяться в компонент, а не в окремий CSS-клас. Адаптивність і стани задаються префіксами: md:, hover:, dark:.

Коли брати

  • Швидко будуєш власний дизайн без перемикання між HTML і CSS-файлами.
  • Компонентний фронтенд (React, Vue, Svelte), де стилі живуть разом з компонентом.
  • Потрібна консистентна дизайн-система на токенах.

Коли не варто

  • Команда не хоче довгих рядків класів у розмітці й віддає перевагу семантичному CSS.
  • Потрібні готові стилізовані компоненти без дизайнера: підійде Bootstrap чи бібліотека компонентів.

Ключові поняття

Utility classes
Один клас відповідає одній CSS-властивості чи їх невеликій групі.
Variants
Префікси hover:, focus:, md:, dark: додають стани й брейкпоінти.
Design tokens
Кольори, відступи, шрифти задаються один раз у темі.
JIT / content scanning
CSS генерується лише для знайдених у коді класів.
Arbitrary values
Довільні значення в квадратних дужках: w-[320px], bg-[#1da1f2].

Приклад

Кнопка зі станами й адаптивністю лише через класи.

Питання на співбесіді

  1. 1. У чому ідея utility-first?

    Замість іменованих CSS-класів ти складаєш вигляд з маленьких класів прямо в розмітці. Це прибирає вигадування назв і розростання CSS, але робить розмітку довшою.

  2. 2. Чому підсумковий CSS малий?

    Tailwind сканує файли проєкту й генерує правила лише для використаних класів, тож невикористаний CSS не потрапляє у збірку.

  3. 3. Як уникнути дублювання довгих рядків класів?

    Виносити повторювану розмітку в компонент (React, Vue), а не у @apply. @apply лишають для рідкісних випадків.

  4. 4. Як у Tailwind зробити адаптивний дизайн?

    Mobile-first префікси: клас без префікса діє завжди, а md: чи lg: перекриває його від певної ширини екрана.

Схожі технології

Логотипи належать їхнім власникам і використані лише для ідентифікації. Іконки: Simple Icons (CC0), Devicon (MIT).

Розділи платформи