3. Utility-First концепция

Tailwind CSS: Utility-First концепция

Utility-First — это философия, при которой каждый CSS-класс делает одну конкретную вещь. Нет больших .card или .header классов — только маленькие утилиты: p-4 (padding: 1rem), text-blue-500 (синий текст), flex (display: flex).

Как выглядят утилиты

Каждая утилита — это крошечный CSS-класс:

/* Что генерирует Tailwind для этих классов: */
.flex    { display: flex }
.p-4     { padding: 1rem }
.mt-2    { margin-top: 0.5rem }
.text-xl { font-size: 1.25rem; line-height: 1.75rem }
.font-bold { font-weight: 700 }
.bg-blue-500 { background-color: rgb(59 130 246) }
.rounded-lg { border-radius: 0.5rem }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) ... }

Система именования

Tailwind придерживается консистентной схемы именования:

{свойство}-{значение}

Примеры:

Утилита	CSS
p-4	padding: 1rem
px-4	padding-left/right: 1rem
py-2	padding-top/bottom: 0.5rem
pt-8	padding-top: 2rem
m-auto	margin: auto
mx-auto	margin-left/right: auto
w-full	width: 100%
w-1/2	width: 50%
h-screen	height: 100vh
max-w-xl	max-width: 36rem

Шкала значений

Tailwind использует числовую шкалу для отступов и размеров, где каждая единица = 4px (0.25rem):

0 → 0px
1 → 4px  (0.25rem)
2 → 8px  (0.5rem)
3 → 12px (0.75rem)
4 → 16px (1rem)     ← базовый отступ
5 → 20px (1.25rem)
6 → 24px (1.5rem)
8 → 32px (2rem)
10 → 40px (2.5rem)
12 → 48px (3rem)
16 → 64px (4rem)
20 → 80px (5rem)
24 → 96px (6rem)

Группы утилит

Layout:

<!-- Display -->
<div class="block">...</div>
<div class="flex">...</div>
<div class="grid">...</div>
<div class="hidden">...</div> <!-- display: none -->
<div class="inline-flex">...</div>

<!-- Position -->
<div class="relative">...</div>
<div class="absolute top-0 right-0">...</div>
<div class="fixed bottom-4 right-4">...</div>
<div class="sticky top-0">...</div>

<!-- Overflow -->
<div class="overflow-hidden">...</div>
<div class="overflow-auto">...</div>
<div class="overflow-x-scroll">...</div>

Sizing:

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-64">256px (16rem)</div>
<div class="w-screen">100vw</div>
<div class="max-w-4xl mx-auto">Центрированный контейнер</div>

<!-- Height -->
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="min-h-screen">min-height: 100vh</div>

Typography:

<p class="text-sm">14px</p>
<p class="text-base">16px (базовый)</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-4xl font-bold">Большой жирный</p>

<p class="font-light">Тонкий (300)</p>
<p class="font-normal">Обычный (400)</p>
<p class="font-medium">Средний (500)</p>
<p class="font-semibold">Полужирный (600)</p>
<p class="font-bold">Жирный (700)</p>

<p class="leading-tight">Плотные строки</p>
<p class="leading-relaxed">Свободные строки</p>
<p class="tracking-wide">Буквы шире</p>
<p class="uppercase">ЗАГЛАВНЫЕ</p>
<p class="text-center">По центру</p>

Почему это работает?

Скептики говорят: «классов слишком много, HTML нечитаем». Но на практике:

1. Нет переключения контекста — видишь элемент, видишь его стили
2. Нет проблем специфичности — все утилиты имеют одинаковый вес
3. Нет мёртвого CSS — только то, что ты используешь, попадает в бандл
4. Рефакторинг прост — удал элемент, удал его стили

Практика