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↗

Корисні ресурси