Що таке Tailwind CSS? Простий посібник для творців застосунків

Tailwind CSS — це набір інструментів для оформлення сайтів. Замість того щоб писати окремі правила стилів у власному файлі, ви даєте кожному елементу короткі готові назви класів — bg-white для білого фону, p-4 для відступу, text-lg для більшого тексту, rounded-xl для закруглених кутів — а Tailwind створює CSS, потрібний браузеру. Він безкоштовний, має відкритий код і є одним із найпоширеніших способів оформлення сучасних вебзастосунків.

Чому Tailwind важливий, коли ви створюєте з ШІ

Якщо ви створюєте вебзастосунок за допомогою ШІ-конструктора, є велика ймовірність, що його стилізовано за допомогою Tailwind. Наприклад, Mythex запускає нові проєкти на Vite + React + TypeScript + Tailwind, якщо ви не просите іншого (як обирається технологія).

Це важливо для вас у трьох аспектах:

• Зміни дизайну дешеві. Оскільки стилі розташовані поруч із кожною кнопкою, карткою чи заголовком, ШІ може виконати запит «зроби картки менш перевантаженими», змінивши кілька назв класів в одному місці.
• Це можна прочитати. Класи Tailwind дуже близькі до простої англійської. text-center font-bold text-2xl нескладно розшифрувати, навіть якщо ви ніколи не писали код.
• Вигляд залишається узгодженим. Tailwind має фіксовану шкалу розмірів, відступів і кольорів. Це не дає застосунку опинитися з 14 трохи різними відтінками сірого.

Повсякденна аналогія

Уявіть фарбування будинку.

Звичайний CSS — це як змішувати власну фарбу для кожної стіни. Ви маєте повну свободу, але через деякий час у вітальні «теплий білий», у коридорі «трохи тепліший білий», і ніхто не пам’ятає чому.

Tailwind — це як колірна карта магазину фарб плюс набір підписаних наклейок. Кожна стіна отримує наклейку — «білий, матовий, 2 шари» — а карта пропонує лише відібрані відтінки. Ви трохи втрачаєте свободу, але всі на об’єкті точно знають, як має виглядати кожна стіна, просто прочитавши наклейку.

Як працює Tailwind

Веб-сторінка складається з HTML (вмісту й структури) та CSS (вигляду). Зазвичай CSS живе в окремому файлі з правилами на кшталт цих:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

У Tailwind ви пропускаєте написання такого правила і ставите утилітарні класи прямо на елемент:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Ваше бронювання підтверджено
</div>

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

Tailwind версії 4, поточної основної версії, налаштовується з дуже малою кількістю конфігурації: ви встановлюєте його, додаєте його плагін до інструмента збирання і ставите @import "tailwindcss"; на початку файлу CSS. Налаштування, як-от фірмові кольори та шрифти, визначаються в CSS як дизайн-токени, а не у великому конфігураційному файлі JavaScript, як це було в старіших версіях. Якщо ви читали старіший посібник, де згадується tailwind.config.js, саме тому.

Приклад: картка тарифу

Наприклад, ви попросили у ШІ-конструктора сторінку тарифів і хочете, щоб картка «Pro» виділялася. Код картки може виглядати так (у компоненті React class записується як className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Почати пробний період
  </button>
</div>

Читаючи зліва направо:

Якщо ви попросите «зроби картку Pro помітною синьою рамкою і тонкою тінню», ШІ може змінити border-gray-200 на border-2 border-blue-600 і додати shadow-lg. Це і є вся зміна.

Адаптивність і темна тема

У Tailwind є короткі префікси для розмірів екрана та станів:

• md:grid-cols-3 — три колонки на середніх і більших екранах; на телефоні діє типова одна колонка. Tailwind є mobile-first: класи без префікса діють скрізь, а префікси додають зміни для більших екранів.
• hover:bg-gray-700 — темніша кнопка, коли на неї наведено мишу.
• dark:bg-gray-900 — інший фон, коли ввімкнено темну тему.

Тому прохання про адаптивний макет для мобільних або темну тему зазвичай швидко виконується в проєкті на Tailwind.

Ключові терміни

Поширені хибні уявлення

• «Tailwind — це дизайн». Ні. Tailwind дає будівельні блоки, а не вигляд. Два сайти на Tailwind можуть виглядати зовсім по-різному. Типовий «вигляд застосунку, створеного ШІ» походить від стандартних налаштувань, а не від самого Tailwind — дайте своєму конструктору чіткі вказівки. Див. як спроєктувати гарний застосунок за допомогою ШІ.
• «Це те саме, що inline-стилі». Не зовсім. Класи беруться зі спільної шкали, підтримують hover, темну тему та breakpoint-и і перетворюються на звичайний CSS під час збирання.
• «Tailwind робить сторінки важкими». Збирання включає лише ті класи, які ви використовуєте, тож CSS, що надсилається відвідувачам, зазвичай невеликий.
• «Довгі списки класів означають безлад у коді». Спочатку вони виглядають перевантаженими, але все про вигляд елемента зосереджено в одному місці. Повторювані шаблони зазвичай виносять у компоненти, наприклад один Button.
• «Якщо я використовую Tailwind, я не можу використовувати власний CSS». Ви можете писати звичайний CSS, коли це потрібно.

Що попросити у вашого ШІ-конструктора

• «Визнач фірмові кольори та шрифти один раз як токени теми і використовуй їх скрізь замість жорстко заданих кольорів.»
• «Зроби так, щоб кожна картка, кнопка і поле введення мали однаковий радіус закруглення та відступи.»
• «Перевір макет на ширині телефона і виправ усе, що виходить за межі або занадто мале для натискання пальцем.»
• «Додай темну тему через варіант dark: Tailwind і стеж, щоб контраст тексту залишався читабельним.»
• «Винеси повторювані стилі кнопок в один багаторазовий компонент Button.»
• «Поясни класи Tailwind у цьому розділі простою англійською.»

Tailwind у Mythex

Нові проєкти Mythex за замовчуванням використовують Tailwind разом із React і TypeScript, тож ви можете просити візуальні зміни простими словами і бачити їх у живому Preview. Якщо ви хочете бачити код, редактор коду показує кожен клас (лише для читання на Free, редагується на Pro). Якщо ви віддаєте перевагу звичайному CSS або іншому налаштуванню, скажіть про це у своєму першому запиті — документація пояснює, як обирається стек.

Запитання