Когда класс ничего не делает

Мы добавили на страницу ещё три класса, чтобы вся страница была выровнена по центру, а ссылка выделялась: text-center для списка и для абзаца со ссылкой и font-bold для ссылки. Точнее, попытались добавить. Посмотрите на предпросмотр: список по-прежнему слева, а ссылка не жирная. Мы допустили опечатку в двух классах, и ничто об этом не предупреждает.

Так работает Tailwind: класс с опечаткой не вызывает ошибки, он просто ничего не делает. Tailwind пишет CSS только для целых имён классов, которые знает. Слово вроде text-cetner к ним не относится, поэтому Tailwind его пропускает, а класс без CSS ничего не делает — как класс, который не выбирает ни одно правило вашей таблицы стилей. Предупредить вас Tailwind не может, ведь в атрибуте class могут быть и классы, вообще не предназначенные для Tailwind, например ваши собственные.

Если класс как будто не работает:

• Проверьте его написание, буква за буквой. text-cetner и text-center с первого взгляда похожи.
• Проверьте, что он стоит внутри кавычек атрибута class и что у элемента только один атрибут class.
• Найдите его в документации. Возможно, класс называется не так, как вы думаете.

С ошибками в style.css всё иначе. Tailwind читает весь файл, и если находит что-то непонятное, он не создаёт вообще никакого CSS. Страница теряет все стили Tailwind, а красное сообщение под предпросмотром говорит, что не так. Например, если в style.css есть правило без закрывающей фигурной скобки:

@import "tailwindcss";

h1 {
	letter-spacing: 2px;

вы увидите такое сообщение:

style.css: Missing closing } at h1

Можете попробовать: добавьте в конец style.css строку h1 { и нажмите «Запустить». Затем снова удалите эту строку.

Есть одно исключение: сама строка @import. Если вы ошибётесь в ней, например напишете @import "tailwind";, сайт не распознает её как Tailwind, и страница появится без Tailwind и без всякого сообщения, как когда мы очистили style.css. Поэтому если вся страница вдруг выглядит как простой HTML со встроенными стилями браузера, первым делом проверьте эту строку.