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;
}

2. Импортируйте CSS в ваш компонент

import "./my-class.css";

3. Добавьте класс в ваш 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.

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

• Расширение для VSCode↗
• JetBrains Integration↗
• Neovim LSP↗

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

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

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

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

• clsx↗
• classnames↗

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