Tailwind с React/Vue и инструменты

Завершаем курс: как Tailwind живёт во фреймворках, какие инструменты экономят время и куда двигаться дальше.

Tailwind и компонентные фреймворки

Tailwind отлично сочетается с React и Vue, потому что они закрывают его главный минус — повтор разметки. Длинные классы пишутся один раз внутри компонента, а используется он коротко.

В React классы передают через атрибут className (а не class):

function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
      {children}
    </button>
  );
}

Во Vue — обычный class в шаблоне:

<template>
  <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
    <slot />
  </button>
</template>

В обоих случаях вы один раз описываете кнопку, а дальше зовёте компонент. Это и есть рекомендованный способ переиспользования из урока про длинные строки.

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

Во фреймворках классы часто зависят от состояния. Главное — помните правило из урока про сканирование: имена классов должны присутствовать целиком. Поэтому выбирают между полными строками, а не склеивают их:

// Выбор ПОЛНЫХ классов по состоянию
const active = true;
const cls = active ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700";
console.log(cls);

Вывод:

bg-blue-600 text-white

Инструменты, которые стоит включить

Инструмент	Польза
Tailwind CSS IntelliSense (VS Code)	автодополнение классов, подсказки значений, превью цвета
prettier-plugin-tailwindcss	автоматически сортирует классы в рекомендованном порядке

IntelliSense избавляет от заглядывания в документацию — редактор сам подсказывает доступные утилиты. Prettier-плагин наводит порядок: классы всегда идут в едином порядке, поэтому diff'ы чище и разметку легче читать в команде.

Частые ошибки новичка — чек-лист

Забыли файл в content → классы не применяются.
Склеили класс из переменной → Tailwind его не видит.
Поставили sm: в надежде «только на мобильном» → на самом деле «от 640px и шире».
Вынесли всё в @apply → потеряли плюсы utility-first.

Что дальше

Соберите 2–3 реальные страницы — навык приходит с практикой.
Изучите официальную документацию: в ней удобный поиск по утилитам.
Посмотрите готовые наборы компонентов для вдохновения и разбора разметки.
Освойте анимации/переходы (transition, animate-*) — следующий логичный шаг.

Итог

React (className) и Vue (class) снимают главный минус Tailwind — повтор разметки.
Условные стили — выбор между полными именами классов, а не их склейка.
IntelliSense и prettier-плагин ускоряют работу; держите в голове чек-лист частых ошибок.