Tailwind CSS — CSS-фреймворк с открытым исходным кодом, созданный Адамом Уэтеном и поддерживаемый Tailwind Labs. Особенность этой библиотеки в том, что, она не предопределяет CSS-классы отдельных элементов. Вместо этого она предоставляет служебные классы, которые можно объединять для стилизации каждого элемента.
По состоянию на 30 мая 2024 года Tailwind CSS имеет более 79 тысяч звезд на GitHub, что делает его одним из самых популярных CSS фреймворков и GitHub репозиториев.
Utility-классы Концепция utility-first — главная особенность Tailwind. В Tailwind CSS не существует классов для элементов (кнопка, панель, меню, текстовое поле, и т. п.). Каждый класс Tailwind CSS задает какое-либо свойство элемента — цвет, шрифт, размер, положение, эффекты и т. п.).
Например, при использовании какой-нибудь другой библиотеки, элементу может быть присвоен класс , задающий ему желтый цвет фона и жирный текст. Чтобы получить такой результат в 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>КлассыTailwindCSS интерпретацияmargin: 1rem;padding: 1rem;background-color: rgba(254, 240, 138, 1);font-weight: 700;border-radius: 0.5rem;
JIT-компиляция Режим JIT (Just-In-Time, «точно в срок») — это молниеносная компиляция CSS в процессе разработки. Поскольку стили генерируются по мере их необходимости, то нет нужды избавляться от неиспользуемых стилей на этапе продакшена, а это значит, что разработчик получает абсолютно одинаковый CSS и при разработке, и при «сборке».
Начиная с третьей версии Tailwind CSS, режим JIT используется по умолчанию.
Настройки и темы Настроить классы и варианты утилит, которые предлагает Tailwind, можно с помощью конфигурационного файла, который обычно называется . В конфигурации можно задать значения классов утилит, например, цветовую палитру или размеры между элементами для полей.
Версии Tailwind CSS использует семантическую версификацию для возможности определения совместимости версий и стратегию постепенного внедрения, чтобы разработчик мог освоить изменения на ранней стадии и избежать проблем с обновлениями в будущем.
Внешние ссылки
Официальная документация Tailwind Tailwind Play Github Repo Конвертер CSS - Tailwind
Примечания