Jump to content

Tailwind CSS

Что такое Tailwind CSS?

Tailwind CSS - это небольшой, utility first CSS фреймворк для создания собственного дизайна, без переключения контекста, которое требуется для обычного CSS. Это чисто CSS фреймворк и не предоставляет никаких предварительно собранных компонентов или логики, и предоставляет принципиально иной набор преимуществ по сравнению с библиотекой компонентов, такой как Material UI.

Он делает CSS невероятно легким и быстрым для написания, как показано в следующем примере:

Старый CSS:

  1. Напишите CSS, часто в отдельном файле
.my-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}
  1. Импортируйте CSS в ваш компонент
import "./my-class.css";
  1. Добавьте класс в ваш HTML
<div class="my-class">...</div>

Эквивалент в Tailwind:

  1. Просто напишите классы в вашем HTML
<div
  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
>
  ...
</div>

Используя вместе с React компонентами, он является чрезвычайно мощным для быстрого создания UI.

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

Tru Narla лучше известна как mewtru дала потрясающую лекцию о создании системы дизайна с использованием Tailwind CSS.

Использование

Убедитесь, что у вас установлены плагины редактора для Tailwind, чтобы улучшить ваш опыт написания Tailwind.

Расширения и плагины

Форматирование

Классы Tailwind Css могут легко стать немного беспорядочными, поэтому форматтер для классов является необходимым. Tailwind CSS Prettier Plugin сортирует классы в рекомендуемом порядке, чтобы классы соответствовали собранному css-пакету. При выборе Tailwind в CLI мы установим и настроим это для вас.

Добавление классов в зависимости от условий

Добавление классов в зависимости от условий с использованием тернарных операторов может стать очень беспорядочным и трудночитаемым. Эти пакеты помогают организовать ваши классы при использовании некоторой логики с условиями.

Полезные ресурсы

РесурсСсылка
Документация Tailwindhttps://tailwindcss.com/docs/editor-setup/
Шпаргалка по Tailwindhttps://nerdcave.com/tailwind-cheat-sheet/
awesome-tailwindcsshttps://github.com/aniftyco/awesome-tailwindcss/
Tailwind Communityhttps://github.com/tailwindlabs/tailwindcss/discussions/
Сервер Tailwind в Discordhttps://tailwindcss.com/discord/
Канал TailwindLabs на Youtubehttps://www.youtube.com/tailwindlabs/
Tailwind Playgroundhttps://play.tailwindcss.com/