Урок 01. Частые ошибки

📁 Раздел: Введение ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная

⚡ Кратко

Три ошибки, на которых спотыкаются все новички: динамическая склейка имён классов, конфликтующие утилиты и инструкции от Tailwind v3.

Ошибка 1. Собирать имя класса из кусочков

Как ломается: цвет не применяется, в DevTools у элемента стоит класс bg-red-500, но такого правила в CSS нет.

❌ Неправильно

const color = "red"
// Сканер видит только строку "bg-" + переменную и не может угадать результат
<div className={`bg-${color}-500`}>…</div>

✅ Правильно: полные имена классов в коде

const styles = {
  red: "bg-red-500",
  green: "bg-green-500",
}
<div className={styles[color]}>…</div>

Почему: Tailwind сканирует исходники как текст, до выполнения программы. В файле должна физически присутствовать строка bg-red-500 — иначе утилита не будет сгенерирована.

Ошибка 2. Две утилиты на одно свойство

Как ломается: элемент выглядит не так, как ожидалось, а при попытке «поменять местами» классы ничего не меняется.

❌ Неправильно

<div class="px-2 px-4 text-slate-500 text-slate-900">…</div>

✅ Правильно

<div class="px-4 text-slate-900">…</div>

Почему: в атрибуте class порядок не влияет ни на что. Побеждает правило, которое стоит позже в CSS-файле, а его порядок определяет Tailwind. Такой конфликт обычно возникает не вручную, а когда компонент добавляет свои классы к переданным снаружи — решение в уроке 15.

Ошибка 3. Выполнять инструкции для Tailwind v3

Как ломается: команда npx tailwindcss init не создаёт ожидаемого файла, а @tailwind base; в v4 не понимается так, как в статье трёхлетней давности.

Почему: в v4 сменился и способ подключения, и способ настройки. Проверяйте дату статьи и версию в package.json: если видите tailwind.config.js и три директивы @tailwind — перед вами v3. Таблица соответствий — в справочнике по миграции.

Ошибка 4. Произвольные значения вместо шкалы

❌ Так делать не надо без причины

<div class="p-[17px] text-[13.5px] mt-[9px]">…</div>

✅ Значения из шкалы

<div class="p-4 text-sm mt-2">…</div>

Почему: шкала — это и есть дизайн-система. Как только половина значений произвольная, интерфейс снова «плывёт», а преимущество подхода теряется. Квадратные скобки — инструмент для исключений: точный размер иконки, высота баннера из макета, значение из внешнего дизайна.