Длинные списки классов

У элемента с адаптивностью, состояниями и тёмной темой легко набирается двадцать классов. Сам Tailwind с этим справляется, а вот человеку такой атрибут читать трудно. Помогают единый порядок классов, автоматическая сортировка и аккуратная работа с условными классами.

Единый порядок

Договоритесь писать классы в одной последовательности: сначала раскладка, затем размеры и отступы, оформление, текст, а в конце — варианты:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 focus-visible:ring-2 md:px-6">
  В корзину
</button>

Читая слева направо, вы видите: как стоит содержимое, какой формы кнопка, какой текст и как она меняется. Вручную держать порядок утомительно — его наводит Prettier.

Плагин Prettier

Prettier — популярный форматировщик кода. Официальный плагин prettier-plugin-tailwindcss сортирует классы в порядке, в котором они идут в сгенерированном CSS. Установите оба пакета в проект:

npm install -D prettier prettier-plugin-tailwindcss

Создайте в корне проекта файл .prettierrc и подключите плагин. Для Tailwind 4 укажите путь к главному CSS-файлу — оттуда плагин узнает о вашей теме и своих утилитах:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/style.css"
}

Отформатируйте файлы командой:

npx prettier --write .

Классы во всех файлах выстроятся в одинаковом порядке. Обычно Prettier настраивают на форматирование при сохранении в редакторе — тогда о порядке думать не нужно вовсе.

Перенос строк

Очень длинный атрибут можно разбить на строки по смыслу — HTML это допускает:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="
  grid grid-cols-1 gap-4
  sm:grid-cols-2
  lg:grid-cols-4
">
  <div class="rounded bg-indigo-100 p-4">1</div>
  <div class="rounded bg-indigo-100 p-4">2</div>
</div>

Условные классы

В компонентах классы часто зависят от данных. Пишите каждую ветку целиком, а не склеивайте имя из кусочков:

// src/components/StockBadge.jsx
export default function StockBadge({ inStock }) {
  const color = inStock ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500';
  return <span className={`rounded px-2 py-1 text-sm ${color}`}>{inStock ? 'В наличии' : 'Нет в наличии'}</span>;
}

Оба набора классов записаны полностью, поэтому сборка их найдёт. Для сложных случаев есть небольшие библиотеки clsx и tailwind-merge: первая собирает строку классов из условий, вторая убирает конфликтующие.

Частая ошибка

Ставить на один элемент два конфликтующих класса и надеяться, что победит последний в атрибуте:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="bg-indigo-600 px-4 py-2 text-white bg-red-600">Удалить</button>

Какой фон получится, решает порядок правил в CSS, а не в атрибуте. Удаляйте лишний класс, а не добавляйте второй поверх. Расширение Tailwind CSS IntelliSense подчёркивает такие конфликты прямо в редакторе.

Спасибо, что читаете!