Tailwind CSS

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

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

По состоянию на 30 мая 2024 года Tailwind CSS имеет более 79 тысяч звезд на GitHub, что делает его одним из самых популярных CSS фреймворков и GitHub репозиториев.

Utility-классы

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

Например, при использовании какой-нибудь другой библиотеки, элементу может быть присвоен класс message-warning, задающий ему желтый цвет фона и жирный текст. Чтобы получить такой результат в Tailwind CSS, элементу нужно присвоить набор классов:

Результат 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 в процессе разработки. Поскольку стили генерируются по мере их необходимости, то нет нужды избавляться от неиспользуемых стилей на этапе продакшена, а это значит, что разработчик получает абсолютно одинаковый CSS и при разработке, и при «сборке».

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

Настройки и темы

Настроить классы и варианты утилит, которые предлагает Tailwind, можно с помощью конфигурационного файла, который обычно называется tailwind.config.js. В конфигурации можно задать значения классов утилит, например, цветовую палитру или размеры между элементами для полей.

Версии

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

Внешние ссылки

Примечания

  1. ↑ Tailwind Labs. GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
  2. ↑ Github: tailwindlabs/tailwindcss, LICENSE. GitHub. Дата обращения: 5 декабря 2023. Архивировано 20 октября 2021 года.
  3. ↑ How Tailwind CSS came to be feat. Adam Wathan
  4. ↑ Tailwind Labs (англ.). GitHub. Дата обращения: 5 декабря 2023. Архивировано 1 сентября 2022 года.
  5. ↑ TAILWIND CSS | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
  6. ↑ Modern CSS with Tailwind flexible styling without the fuss | WorldCat.org (англ.). search.worldcat.org. Дата обращения: 5 декабря 2023.
  7. ↑ TailwindCSS – очередной фреймворк или новый шаг эволюции? Хабр (1 июля 2020). Дата обращения: 5 декабря 2023. Архивировано 5 декабря 2023 года.
  8. ↑ Utility-First Fundamentals - Tailwind CSS (англ.). tailwindcss.com. Дата обращения: 5 декабря 2023. Архивировано 9 сентября 2022 года.

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.