← ТехнологииТехнология · Стилизация

Tailwind CSS

Utility-first CSS-фреймворк для быстрой и последовательной вёрстки уникальных интерфейсов.

Tailwind CSS - utility-first CSS-фреймворк, созданный Tailwind Labs в 2017 году и распространяемый под лицензией MIT. Вместо готовых компонентов он предлагает маленькие узкоспециализированные классы, позволяющие оформлять страницы прямо в HTML.

РазработчикTailwind Labs
Год создания2017
ЛицензияMIT
Официальный сайтtailwindcss.com
01 / Обзор

Tailwind CSS - это CSS-фреймворк (готовый набор инструментов для оформления веб-страниц), созданный в 2017 году Адамом Уотаном и командой Tailwind Labs. Проект распространяется бесплатно с открытым кодом под лицензией MIT. В отличие от фреймворков с готовыми кнопками и меню, Tailwind предлагает тысячи маленьких утилитарных классов: например, p-4 задаёт отступ, а text-center выравнивает текст по центру.

Utility-first означает, что дизайн собирается из узкоспециализированных классов, а не из крупных готовых блоков. Разработчик описывает стили прямо в HTML, не поддерживая отдельные CSS-файлы. Это ускоряет правки и снимает страх, что изменение одного стиля незаметно сломает другую страницу.

Главная претензия к Tailwind - «загрязнение» HTML: на одном элементе может быть десять и более классов. Сторонники отвечают, что вся информация о стилях видна в одном месте, прямо на элементе, и не нужно искать её по отдельным файлам. С точки зрения производительности JIT-движок (just-in-time - генерирует только реально используемые стили) делает итоговый CSS-файл очень маленьким, часто всего несколько килобайт.

В современных версиях, прежде всего в v4, Tailwind получил переписанный и заметно более быстрый движок, а настройка переехала в сам CSS - отдельный JavaScript-конфиг стал необязательным. Фреймворк хорошо подходит для дизайн-систем: цвета, отступы и шрифты задаются как центральные токены и применяются единообразно во всём проекте. Кроме того, на Tailwind построены популярные библиотеки компонентов - shadcn/ui, Headless UI, daisyUI.

02 / Вопросы

Частые вопросы

Tailwind CSS - это набор готовых маленьких CSS-классов, из которых, как из конструктора, собирается дизайн сайта. Вместо готовых кнопок и меню он даёт «кирпичики»: отдельные классы для отступов, цветов, шрифтов. Фреймворк создан компанией Tailwind Labs в 2017 году и сегодня входит в число самых популярных инструментов стилизации.

Остался вопрос?Напишите нам