Tailwind CSS — CSS-фреймворк с открытым исходным кодом, созданный Адамом Уэтеном[3] и поддерживаемый Tailwind Labs[4]. Особенность этой библиотеки в том, что, она не предопределяет CSS-классы отдельных элементов. Вместо этого она предоставляет служебные классы, которые можно объединять для стилизации каждого элемента.[5][6][7]
| Tailwind CSS | |
|---|---|
 | |
| Тип | CSS-фреймворк и библиотека JavaScript |
| Авторы | Адам Уэтен, Джонатан Рейнинк, Дэвид Хемфилл и Стив Шогер |
| Разработчик | Tailwind Labs[1] |
| Написана на | TypeScript, Rust, CSS |
| Операционная система | кроссплатформенность |
| Языки интерфейса | Английский |
| Аппаратная платформа | Всемирная паутина |
| Последняя версия | 3.4.3 (2024-03-28) |
| Репозиторий | 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 Labs. GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
- ↑ Github: tailwindlabs/tailwindcss, LICENSE. GitHub. Дата обращения: 5 декабря 2023. Архивировано 20 октября 2021 года.
- ↑ How Tailwind CSS came to be feat. Adam Wathan
- ↑ Tailwind Labs (англ.). GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
- ↑ TAILWIND CSS | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
- ↑ Modern CSS with Tailwind flexible styling without the fuss | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
- ↑ TailwindCSS – очередной фреймворк или новый шаг эволюции? Хабр (1 июля 2020). Дата обращения: 5 декабря 2023. Архивировано 5 декабря 2023 года.
- ↑ Utility-First Fundamentals - Tailwind CSS (англ.). tailwindcss.com. Дата обращения: 5 декабря 2023. Архивировано 9 сентября 2022 года.