Tailwind CSS

Tailwind CSS это utility-first CSS-фреймворк, который оформляет страницу небольшими одноцелевыми классами, записанными прямо в HTML. Каждый класс, например p-4, text-center или bg-blue-500, задает один стиль. Разработчики комбинируют эти классы и создают любой дизайн почти без собственного CSS.

Подход utility-first в CSS означает, что дизайн собирается из множества маленьких классов, каждый из которых делает одно действие, вместо отдельного класса для каждого компонента. Кнопка получает внешний вид из классов для отступов, цвета, скругления углов и толщины шрифта. Такой подход держит стили рядом с разметкой и избавляет от постоянно разрастающихся таблиц стилей.

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

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

Tailwind CSS устанавливают через npm и подключают к инструменту сборки проекта, например Vite, PostCSS или Tailwind CLI. В Tailwind CSS версии 4 нужно добавить пакет, а затем импортировать его в начале основного CSS-файла строкой @import "tailwindcss". В официальном руководстве по установке есть короткие инструкции для всех популярных фреймворков, включая Laravel, Next.js и Vite.

Tailwind CSS подходит начинающим, которые уже понимают базовые свойства CSS, такие как margin, padding, flexbox и grid. Каждый класс Tailwind соответствует реальному свойству CSS, поэтому, если сначала выучить CSS, классы легко читаются. Новички, пропустившие основы CSS, часто с трудом исправляют макеты в Tailwind CSS.

Большинство разработчиков, знающих CSS, начинают продуктивно работать с Tailwind CSS за несколько дней. Имена классов следуют понятным закономерностям, поэтому, изучив одну группу классов, легко догадаться об остальных. Освоение адаптивных вариантов, собственных тем и шаблонов компонентов занимает несколько недель реальной работы.

Адаптивный дизайн в Tailwind CSS работает за счет префиксов брейкпоинтов, таких как sm:, md: и lg:, перед любым служебным классом. Tailwind CSS следует подходу mobile-first: класс без префикса действует на всех экранах, а класс с префиксом начиная с указанного брейкпоинта. Например, text-sm md:text-lg дает мелкий текст на телефонах и крупнее на широких экранах.

По умолчанию в Tailwind CSS заданы брейкпоинты sm на 640 пикселей, md на 768 пикселей, lg на 1024 пикселя, xl на 1280 пикселей и 2xl на 1536 пикселей. Каждый брейкпоинт это минимальная ширина, что соответствует подходу mobile-first. Проект может изменить эти значения или добавить новые брейкпоинты в настройках темы.

Темная тема в Tailwind CSS добавляется префиксом dark: перед любым классом, например dark:bg-gray-900. По умолчанию Tailwind CSS следует настройке операционной системы посетителя. Чтобы пользователи могли переключать тему кнопкой, вариант dark настраивают так, чтобы он зависел от класса или data-атрибута на странице.

В Tailwind CSS версии 4 цвета и шрифты настраивают CSS-переменными внутри блока @theme в основном CSS-файле. Переменная вроде --color-brand автоматически создает классы bg-brand и text-brand. В прежних версиях для этого использовался файл tailwind.config.js, и в версии 4 такой подход по-прежнему работает через режим совместимости.

Tailwind CSS может сделать HTML перегруженным, потому что у одного элемента бывает много классов. Большинство команд решают это, превращая повторяющиеся шаблоны в компоненты своего фреймворка, например Blade, React или Vue. Взамен стили видны прямо рядом с разметкой, поэтому изменения вносятся быстро и безопасно.

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

Директива @apply в Tailwind CSS позволяет использовать служебные классы Tailwind внутри собственных правил CSS. Она удобна для оформления контента, который вы не контролируете, например HTML из текстового редактора. Команда Tailwind советует применять ее умеренно, потому что компоненты обычно более чистый способ переиспользовать стили.

Да, Tailwind CSS хорошо работает с Laravel, а новые проекты Laravel уже настроены на его использование вместе с Vite. Классы Tailwind пишут в шаблонах Blade, а Vite собирает итоговый CSS. Стартовые наборы Laravel также используют Tailwind CSS для экранов входа и панели управления.

Да, Tailwind CSS работает с React, Vue, Svelte и большинством других JavaScript-фреймворков. Классы указывают в разметке компонента через className в React или class во Vue. Поскольку каждый компонент хранит свои классы, Tailwind CSS отлично подходит компонентным фреймворкам.

Tailwind CSS напрямую не влияет на позиции в поиске, но может косвенно помогать SEO, сохраняя CSS-файл небольшим, а страницы быстрыми. Скорость страниц входит в сигналы удобства страницы Google. Контент, структура страницы и семантика HTML по-прежнему значат гораздо больше, чем инструмент оформления.

Произвольные значения в Tailwind CSS позволяют использовать точное значение, которого нет в теме, записав его в квадратных скобках. Например, w-[37%] или top-[117px] сразу создают класс для этого значения. Произвольные значения удобны для единичных случаев, а часто используемое значение лучше вынести в тему.

Состояния hover и focus в Tailwind CSS задаются префиксом состояния, например hover:, focus: или active:, перед служебным классом. Например, bg-blue-500 hover:bg-blue-600 делает кнопку темнее при наведении мыши. Префиксы можно сочетать с брейкпоинтами и темной темой, например md:hover:underline.

Нет, сам Tailwind CSS включает только служебные классы, без готовых компонентов вроде модальных окон или панелей навигации. Готовые компоненты берут из отдельных коллекций, например официального Tailwind Plus или библиотек сообщества daisyUI и Flowbite. Многие команды создают собственный небольшой набор компонентов поверх утилит.

Да, Tailwind CSS поддерживает макеты справа налево с помощью вариантов rtl: и ltr: и логических служебных классов. Логические классы вроде ms-4 и pe-2 задают отступы в начале или конце строки, поэтому в арабском они отражаются автоматически. Благодаря этому одна разметка работает и для английских, и для арабских страниц.

В Tailwind CSS версии 4 настройки переехали в CSS: блок @theme и одна строка @import. Версия 4 также принесла более быстрый движок сборки, автоматическое определение файлов с контентом и современные возможности CSS, например каскадные слои. Большинство проектов, переходящих с версии 3, могут обновить код официальным инструментом обновления.

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

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

Да, Tailwind CSS распространяется с открытым исходным кодом по лицензии MIT, поэтому его можно использовать в личных и коммерческих проектах. Лицензия разрешает использовать, изменять и поставлять Tailwind CSS в составе любого продукта. Исходный код открыт на GitHub, где любой может его изучить и сообщить о проблемах.