Tailwind и дизайн-системы

Писать CSS с нуля на каждый элемент — долго. Tailwind даёт готовые классы-утилиты прямо в разметке, а дизайн-системы превращают «красиво разок» в «красиво везде и одинаково».

Утилиты вместо целых файлов

Вместо отдельного .btn { padding: 16px; ... } — набор маленьких классов прямо у элемента. Один класс = одно свойство.

<button class="px-4 py-2 rounded-lg
               bg-sky-500 hover:bg-sky-600
               text-white font-semibold">
  Нажми меня
</button>

<!-- px-4 → padding: 1rem → эквивалент без Tailwind:
   .px-4 { padding-left: 1rem; padding-right: 1rem; } -->

Установка

npm install -D tailwindcss @tailwindcss/vite
# в vite.config.js: import tailwindcss from "@tailwindcss/vite"
# plugins: [tailwindcss()]
# в CSS: @import "tailwindcss";

Функция в стилях: вариант dark:

Адаптивность и тёмная тема — тоже утилитами: md: для медиа-запросов, dark: для тёмной схемы, hover: для состояний.

<div class="grid grid-cols-1 md:grid-cols-3 gap-6
            dark:bg-slate-900">
  <!-- 1 колонка на телефоне, 3 на широком экране -->
</div>

Дизайн-система

Дизайн-система — это не библиотека кнопок. Это набор правил: токены (цвета, отступы, радиусы), компоненты из них и документированные паттерны поведения.

/* Токены — единый источник истины */
:root {
  --color-primary: #38bdf8;
  --space-4: 1rem;
  --radius-md: 8px;
}

/* один токен изменил — обновился весь сайт */