Впровадження Utility-First CSS підходу для сайту
Після чергового рефакторингу CSS я перестав рахувати кількість перевизначених стилів. Кожен новий блок вимагав свіжих класів, файл style.css розрісся до 15 КБ, і будь-яка зміна тягнула ланцюжок правок. Вихід — Utility-First CSS.
Це підхід, при якому стилі задаються прямо в HTML через готові класи-утиліти: flex items-center text-lg bg-blue-500. Жодних інлайн-стилів або перемикань між файлами — тільки компактні класи. Наприклад, утиліти p-4 та m-2 замінюють множину кастомних правил. Ми впроваджуємо Tailwind CSS — найпопулярнішу реалізацію — і налаштовуємо дизайн-токени так, щоб проєкт виглядав однорідно та завантажувався швидко. Цей підхід описано в документації Tailwind CSS. На практиці швидкість верстки зростає в 2–3 рази порівняно з BEM, а CSS-бандл стискається до 8–25 КБ (gzip) завдяки PurgeCSS. Економія на трафіку та часі розробки складає до 40%.
За 10+ років роботи з сотнею проєктів ми переконалися: кастомний CSS розростається експоненційно. Утилітарний підхід ламає цю закономірність — нові компоненти перевикористовують ті самі класи, і каскад нічого не може зламати. Tailwind — це не фреймворк, а система збірки: він генерує лише те, що реально використовується в проєкті. JIT-двигун Tailwind забезпечує компіляцію в реальному часі, що прискорює розробку.
Як Utility-First CSS прискорює розробку?
Головна причина — CSS перестає зростати лінійно. Замість того щоб придумувати імена класів, розробник фокусується на верстці. Всі відступи, кольори та типографіка задаються через єдину систему дизайн-токенів. Це виключає появу «липких» стилів, коли зміна одного компонента ламає інший. Ми гарантуємо, що міграція існуючого проєкту на Tailwind займе 1–3 дні залежно від обсягу, а новий проєкт ми налаштовуємо за півдня. Типова вартість аудиту та міграції — від $500.
Як налаштувати Tailwind CSS під проєкт?
Ми використовуємо актуальну версію Tailwind CSS 4, де конфігурація ведеться прямо в CSS. Нижче — мінімальне налаштування для Vite.
npm install tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tailwindcss()],
})
/* src/styles/globals.css */
@import 'tailwindcss';
@theme {
--color-primary: #2563eb;
--color-primary-foreground: #ffffff;
--color-secondary: #f1f5f9;
--color-secondary-foreground: #0f172a;
--color-destructive: #ef4444;
--color-muted: #f8fafc;
--color-border: #e2e8f0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
Компоненти з Tailwind: приклад картки товару
Використовуючи утиліти, ми збираємо UI-компоненти без зайвих CSS-файлів.
function ProductCard({ product }: { product: Product }) {
return (
<article className="group flex flex-col bg-white rounded-xl border border-slate-200 overflow-hidden shadow-card hover:shadow-md transition-shadow duration-200">
<div className="relative aspect-video overflow-hidden bg-slate-100">
<img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
{product.badge && (
<span className="absolute top-3 left-3 px-2 py-0.5 text-xs font-semibold bg-primary-600 text-white rounded-full">
{product.badge}
</span>
)}
</div>
<div className="flex flex-col gap-3 p-5 flex-1">
<h3 className="font-semibold text-slate-900 leading-snug line-clamp-2">{product.name}</h3>
<p className="text-sm text-slate-500 line-clamp-3 flex-1">{product.description}</p>
<div className="flex items-center justify-between pt-2 border-t border-slate-100">
<span className="text-xl font-bold text-slate-900">{product.price} ₽</span>
<button className="px-4 py-2 text-sm font-medium bg-primary-600 text-white rounded-lg hover:bg-primary-700 active:scale-95 transition-all">В кошик</button>
</div>
</div>
</article>
)
}
@apply — коли виносити повторювані класи
Якщо одні й ті самі утиліти трапляються часто, ми групуємо їх через @apply у шарі components. Використовуємо помірно — тільки для стабільних патернів на кшталт кнопок та інпутів. Наприклад, так створюються базові стилі кнопок і полів введення, що скорочує дублювання.
Адаптивність без медіа-запитів
Tailwind використовує mobile-first. Без префікса — всі екрани, з md: — від 768px, з xl: — від 1280px. Приклад: сітка 1→3→4 колонки.
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-4">
<!-- картки -->
</div>
Текст автоматично змінює розмір: text-2xl на мобільних, lg:text-4xl на десктопах. Сховати елемент на мобільних — hidden md:block.
Впровадження Utility-First CSS на існуючому проєкті
Поетапний план від наших інженерів:
- Аудит поточних стилів — визначаємо, які класи та кастомні властивості можна замінити утилітами.
- Налаштування дизайн-токенів — пробрасуємо кольори, відступи, шрифти в
@theme. - Поступова заміна компонентів — спочатку основні (кнопки, картки), потім решта.
- Підключення dark mode — налаштовуємо через атрибут або
prefers-color-scheme. - Збірка та оптимізація — перевіряємо, що бандл не роздувся, і фіксимо динамічні класи.
Ми гарантуємо, що після міграції CSS стане в 3–4 рази менше, а швидкість верстки нових сторінок зросте вдвічі. Хочете переконатися? Замовте аудит вашого проєкту — ми надішлемо звіт із планом впровадження. Пропонуємо послуги «під ключ»: налаштування нового проєкту за 0,5 дня, міграція існуючого за 1–3 дні. Пишіть нам — оцінимо ваш проєкт безкоштовно.
Чому Tailwind CSS кращий за інші утилітарні фреймворки?
На ринку є альтернативи: UnoCSS, Windi CSS, Open Props. Однак Tailwind виділяється стабільністю API, величезною спільнотою та підтримкою в основних фреймворках. За нашими тестами, Tailwind в 1,5 рази швидший за UnoCSS за часом збірки. Порівняння з традиційними методологіями наочно показує різницю.
Порівняння підходів
| Критерій | Utility-First (Tailwind) | Традиційні методології (BEM, OOCSS) |
|---|---|---|
| Швидкість розробки | Висока — немає перемикання між файлами | Середня — потрібно придумувати класи та писати окремі CSS-файли |
| Розмір CSS-бандла | 8–25 KB gzip (тільки використовуване) | 30–100+ KB (зростає пропорційно компонентам) |
| Кастомізація | Через дизайн-токени та конфіг | Через змінні або перевизначення |
| Адаптивність | Вбудовані префікси (mobile-first) | Ручні медіа-запити |
| Підтримка dark mode | Один рядок у конфігу | Потрібне перевизначення всіх компонентів |
Що входить у нашу роботу
- Встановлення та конфігурація Tailwind CSS (v3 або v4).
- Налаштування дизайн-токенів (кольори, типографіка, відступи, тіні).
- Створення базових компонентів через
@applyабо CVA. - Підключення dark mode та адаптивної сітки.
- Рефакторинг існуючих стилів при міграції.
- Тестування продуктивності (Core Web Vitals).
Орієнтовні терміни: налаштування нового проєкту — від 0,5 дня. Міграція існуючого — 1–3 дні залежно від обсягу CSS. Вартість розраховується індивідуально, середній чек — $500–1500. Зв'яжіться з нами, щоб обговорити ваш проєкт: ми відповімо протягом години та запропонуємо план дій. Наш досвід: 10+ років на ринку, більше 100 реалізованих проєктів, 5 років спеціалізації на Tailwind.