Читаем названия классов

Вы уже знаете несколько классов Tailwind. Посмотрите на них рядом с CSS, который они создают:

Названия не случайны. Имя класса говорит, что он делает, и в основном состоит из знакомого вам CSS:

• Некоторые имена классов — просто значение CSS, потому что и так ясно, к какому свойству оно относится: uppercase может быть только значением text-transform. Так же italic — это font-style: italic, а underline — text-decoration-line: underline.
• Другие классы начинаются с короткого слова, обозначающего свойство, а за ним идёт значение: text-center (выравнивание текста), font-bold (жирность шрифта), list-disc (вид маркеров списка).

Правда, короткое слово не всегда совпадает с названием свойства. Классы, которые начинаются с text-, задают выравнивание текста и его размер (text-3xl), а в следующем уроке вы будете использовать text- ещё и для цвета текста. Поэтому, если вы не уверены, найдите класс в документации. В документации Tailwind на сайте tailwindcss.com/docs для каждого свойства CSS есть страница с таблицей его классов и CSS, который создаёт каждый из них. Быстрее всего страницу найти через поиск вверху: введите знакомое вам свойство CSS, например font-style. Документация описывает Tailwind 4, версию, которую использует этот курс. Некоторые уроки в интернете по-прежнему написаны для старого Tailwind 3, где часть классов называется иначе.

Новый класс underline заслуживает пары слов. Линии под текстом или через него задаются свойством CSS text-decoration-line: значение underline рисует линию под текстом, line-through — через него, а none убирает линию. Браузеры подчёркивают ссылки, но Preflight убрал и подчёркивание, и синий цвет (color: inherit и text-decoration: inherit), поэтому наша ссылка выглядит как обычный текст. Это проблема: посетители не поймут, что на неё можно нажать. Подчёркивание — самый явный признак ссылки.