Tailwind CSS

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

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

Например, в других традиционных системах был бы класс message-warning который использовал бы желтый цвет фона и жирный текст. Чтобы добиться такого результата в Tailwind CSS, нужно применить набор классов, созданных библиотекой: bg-yellow-300 и font-bold

По состоянию на 5 декабря 2023 года Tailwind CSS имеет более 74 000 звезд на GitHub

Особенности[править | править код]

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

Utility Классы[править | править код]

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

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

Пример: желтый алерт
Результат FExample Tailwind yellow warning.png
Код 
<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, при котором вместо того, чтобы генерировать все возможные классы и затем удалять все те, которые не используются, анализируется содержимое HTML-файлов (или настроенных расширений или местоположений) и мгновенно генерируются только те классы, которые необходимы и используются.

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

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

Версии[править | править код]

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

Внешние ссылки[править | править код]

Примечания[править | править код]

  1. ↑ Tailwind Labs. GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
  2. ↑ Github: tailwindlabs/tailwindcss, LICENSE. GitHub. Дата обращения: 5 декабря 2023. Архивировано 20 октября 2021 года.
  3. ↑ Tailwind Labs (англ.). GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
  4. ↑ TAILWIND CSS | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
  5. ↑ Modern CSS with Tailwind flexible styling without the fuss | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
  6. ↑ TailwindCSS – очередной фреймворк или новый шаг эволюции? Хабр (1 июля 2020). Дата обращения: 5 декабря 2023. Архивировано 5 декабря 2023 года.
  7. ↑ Utility-First Fundamentals - Tailwind CSS (англ.). tailwindcss.com. Дата обращения: 5 декабря 2023. Архивировано 9 сентября 2022 года.
Источник — https://ru.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=137388172