EMZETT.Tailwind CSS і utility-first стилізація
Коротко: Tailwind CSS надає багато невеликих допоміжних класів на кшталт p-4 або text-center, за допомогою яких ви стилізуєте інтерфейси просто в HTML замість написання власних класів CSS.
Докладніше: Класичний CSS розділяє структуру (HTML) і зовнішній вигляд (CSS) та потребує імен класів («card-title»). Utility-first перевертає це: кожен клас робить одну справу, а ви їх комбінуєте.
Подробиці
Приклад
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
Save
</button>px-4 = горизонтальний відступ, bg-blue-600 = тло, hover: = під час наведення миші. Замість написання .btn { … } ви задаєте класи на елементі.
Адаптивність, стани, темна тема
Префікси керують умовами: md:flex (від середніх екранів), lg:grid-cols-3, dark:bg-slate-900 (темна тема), focus:ring, disabled:opacity-50. Діє принцип mobile-first: класи без префікса працюють скрізь, префікси — від певної ширини. Центральна конфігурація (кольори, відступи, шрифти) задає систему дизайну.
Переваги та недоліки
Переваги: швидке прототипування, немає проблем з іменуванням, немає мертвого CSS (у готовий файл потрапляють лише використовувані класи, малий розмір файлу), узгоджені відступи й кольори. Недоліки: довгі списки класів у HTML, зусилля на вивчення імен класів, менший розподіл структури та стилю. Заходи: компоненти (React, Vue) об’єднують повторювані класи; @apply можливий, але використовуйте його помірно.
Порівняння та початок роботи
Альтернативи: CSS Modules, styled-components, класична угода про іменування BEM, фреймворки на кшталт Bootstrap (готові компоненти замість будівельних блоків) або UnoCSS. Tailwind можна налаштувати з Next.js, Vite та іншими інструментами; стежте за доступністю (контраст, стилі фокуса), бо допоміжні класи не замінюють роздумів про неї.