Tailwind CSS

Tailwind CSS — CSS-фреймворк с открытым исходным кодом, созданный Адамом Уэтеном^[3] и поддерживаемый Tailwind Labs^[4]. Особенность этой библиотеки в том, что, она не предопределяет CSS-классы отдельных элементов. Вместо этого она предоставляет служебные классы, которые можно объединять для стилизации каждого элемента.^[5][6][7]

Tailwind CSS
Тип	CSS-фреймворк и библиотека JavaScript
Авторы	Адам Уэтен, Джонатан Рейнинк, Дэвид Хемфилл и Стив Шогер
Разработчик	Tailwind Labs[1]
Написана на	TypeScript, Rust, CSS
Операционная система	кроссплатформенность
Языки интерфейса	Английский
Первый выпуск	13 мая 2019
Аппаратная платформа	Всемирная паутина
Последняя версия	4.1.2 (2025-04-03)
Репозиторий	github.com/tailwindlabs/…
Лицензия	MIT License[2]
Сайт	tailwindcss.com

По состоянию на 30 мая 2024 года Tailwind CSS имеет более 79 тысяч звезд на GitHub, что делает его одним из самых популярных CSS фреймворков и GitHub репозиториев.

Utility-классы

Концепция utility-first — главная особенность Tailwind.^[8] В Tailwind CSS не существует классов для элементов (кнопка, панель, меню, текстовое поле, и т. п.). Каждый класс Tailwind CSS задает какое-либо свойство элемента — цвет, шрифт, размер, положение, эффекты и т. п.).

Например, при использовании какой-нибудь другой библиотеки, элементу может быть присвоен класс message-warning, задающий ему желтый цвет фона и жирный текст. Чтобы получить такой результат в Tailwind CSS, элементу нужно присвоить набор классов:

Результат
Код	<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg"> <p>Please be careful when feeding the birds.</p> </div>
Классы	Tailwind	CSS интерпретация
	m-4	margin: 1rem;
	p-4	padding: 1rem;
	bg-yellow-200	background-color: rgba(254, 240, 138, 1);
	font-bold	font-weight: 700;
	rounded-lg	border-radius: 0.5rem;

JIT-компиляция

Режим JIT (Just-In-Time, «точно в срок») — это молниеносная компиляция CSS в процессе разработки. Поскольку стили генерируются по мере их необходимости, то нет нужды избавляться от неиспользуемых стилей на этапе продакшена, а это значит, что разработчик получает абсолютно одинаковый CSS и при разработке, и при «сборке».

Начиная с третьей версии Tailwind CSS, режим JIT используется по умолчанию.

Настройки и темы

Настроить классы и варианты утилит, которые предлагает Tailwind, можно с помощью конфигурационного файла, который обычно называется tailwind.config.js. В конфигурации можно задать значения классов утилит, например, цветовую палитру или размеры между элементами для полей.

Версии

Tailwind CSS использует семантическую версификацию для возможности определения совместимости версий и стратегию постепенного внедрения, чтобы разработчик мог освоить изменения на ранней стадии и избежать проблем с обновлениями в будущем.

Внешние ссылки

• Официальная документация Tailwind
• Tailwind Play
• Github Repo
• Конвертер CSS - Tailwind