Tailwind CSS — это фреймворк для оформления веб-страниц. Он облегчает работу с CSS благодаря системе готовых маленьких классов, которые называются утилитами (utility classes). Эти классы позволяют менять внешний вид элементов прямо в HTML, без написания отдельного CSS-файла.
Другими словами, вместо того чтобы писать:
.title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
и затем подключать:
<h1 class="title">Заголовок</h1>
мы можем сразу написать:
<h1 class="text-2xl font-bold text-center">Заголовок</h1>
То есть стиль и разметка находятся рядом. Это ускоряет разработку и делает код легче в поддержке.
CDN — это способ подключить Tailwind, не устанавливая ничего на компьютер. Он подходит для обучения, тестирования и небольших проектов.
Чтобы подключить Tailwind, достаточно вставить в разметку следующую строку:
<script src="https://cdn.tailwindcss.com"></script>
И пример минимальной страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind Demo</title>
</head>
<body>
<h1 class="text-3xl font-bold text-center">Hello Tailwind!</h1>
</body>
</html>
После этого можно сразу использовать любые классы Tailwind.
Важно: CDN удобно использовать для обучения, но в реальных больших проектах применяют установку через npm — она позволяет настраивать систему и оптимизировать размер стилей.
Tailwind предлагает тысячи классов, но все они логичны и делятся на понятные категории.
Они позволяют управлять размером, цветом, жирностью и выравниванием текста.
Примеры:
text-sm, text-lg, text-2xl, text-4xlfont-light, font-medium, font-bold, font-blacktext-gray-700, text-red-500, text-blue-600text-left, text-center, text-rightОтступы делятся на margin (внешние) и padding (внутренние).
m-4 (все стороны), mt-2 (сверху), mx-auto (слева и справа)p-6, px-4, py-2Цифры обозначают количество шага, где 1 шаг = 4 пикселя. Например, p-4 = 16 пикселей.
w-20, w-1/2, w-fullh-10, h-screen (во всю высоту экрана)bg-blue-500, bg-gray-200rounded, rounded-lg, rounded-fullshadow, shadow-md, shadow-lgborder, border-2, border-gray-400Все эти классы помогают быстро создавать кнопки, карточки, блоки и другие элементы интерфейса.
В Tailwind цвета организованы по двум осям:
1. Название цвета — например:
gray, red, orange, amber, yellow, green, teal, blue, indigo, purple, pink, rose и другие.
2. Интенсивность (яркость/темнота) — числа от 50 до 900:
Пример названия цвета:
bg-blue-500
blue — цвет500 — интенсивностьОна помогает:
#3498db.Цвет может применяться к разным свойствам:
bg-blue-500 → цвет фона
text-blue-500 → цвет текста
border-blue-500 → цвет границы
divide-blue-500 → цвет разделителей
ring-blue-500 → обводка для интерактивных элементов
Чаще всего для основных элементов интерфейса берут оттенок 500, а для:
Ниже — таблица с 10 основными цветами Tailwind.
Столбцы — интенсивности (50–900).
Строки — названия цветов.
Каждая ячейка окрашена в соответствующий оттенок.
| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| Gray | ||||||||||
| Red | ||||||||||
| Orange | ||||||||||
| Yellow | ||||||||||
| Green | ||||||||||
| Blue | ||||||||||
| Indigo | ||||||||||
| Purple | ||||||||||
| Pink |
500600700–90050–200Пример кнопки:
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Кнопка
</button>
Tailwind не меняет стандартную модель браузера, но позволяет проще работать с ней с помощью готовых классов.
Это базовый режим работы большинства элементов. Используется редко, так как является поведением “по умолчанию”.
<div class="block">Контент</div>
Это один из самых распространённых способов создания макетов. Flex позволяет располагать элементы в строку или столбец, распределять их равномерно, центрировать и т. д.
Пример:
<div class="flex">
<div>1</div>
<div>2</div>
</div>
Основные классы Flex:
flex-row, flex-coljustify-start, justify-center, justify-betweenitems-start, items-center, items-endflex-wrapflex-1, flex-noneGrid подходит для более сложных макетов с колонками и строками.
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Основные классы Grid:
grid-cols-*gap-*col-span-*Tailwind умеет автоматически менять стили, если у пользователя включена тёмная тема в системе.
Для этого используется префикс dark:.
Пример:
<div class="bg-white text-black dark:bg-black dark:text-white p-4">
Текст
</div>
Это значит:
Также можно включить тёмную тему вручную, добавив класс dark к тегу <html>:
<html class="dark">
Tailwind использует подход “сначала мобильная версия”. Это означает, что стили по умолчанию применяются для маленьких экранов, а затем постепенно расширяются.
Для адаптивности используются специальные обозначения — брейкпоинты:
sm: — от 640 пикселей и вышеmd: — от 768lg: — от 1024xl: — от 12802xl: — от 1536Как это выглядит на практике:
<div class="text-base sm:text-lg md:text-xl lg:text-3xl">
Адаптивный текст
</div>
На маленьком экране текст будет маленьким, а на большем — крупнее.
Другой пример — изменение макета:
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/3 bg-gray-200">Меню</div>
<div class="w-full md:w-2/3 bg-gray-400">Контент</div>
</div>
На телефоне блоки будут друг под другом, а на компьютере — в одну строку.
Tailwind CSS — это современный инструмент, который позволяет создавать интерфейсы быстрее и удобнее, почти не используя обычный CSS. Он помогает: