Tailwind css что это?

1. Подключите Tailwind способом для своего проекта.
2. Добавьте классы оформления.
3. Соберите CSS.
4. Проверьте результат и состояния интерфейса.

Я просто вставил классы из примера без самого Tailwind, поэтому ничего не менялось.

• Tailwind CSS — инструмент для оформления интерфейса через небольшие классы, отвечающие за отдельные свойства. Из сочетаний таких классов собирают внешний вид элемента.
• Например, flex gap-4 задает flex-раскладку и промежуток между элементами, когда соответствующие стили Tailwind присутствуют на странице. Сами слова в class без подключенного результата ничего не оформляют.
• Tailwind не заменяет HTML. Структуру, ссылки, кнопки и подписи нужно создавать подходящими элементами независимо от выбранной системы стилей.
• Это не обязательный набор готовых интерактивных компонентов. Класс может менять цвет или отступ, но раскрытие меню, управление состоянием и другая логика требуют соответствующей реализации.
• Варианты позволяют задавать оформление для наведения, фокуса, размеров экрана и других условий. Поэтому длинный class может описывать несколько состояний одного элемента.
• При обычной проектной настройке Tailwind обрабатывает исходники и формирует CSS. Способ подключения зависит от сборщика и версии, поэтому инструкции старой версии не всегда подходят новому проекту.
• Не собирайте имена классов произвольными кусочками строки, не проверив правила обнаружения классов. Инструмент должен увидеть необходимые варианты, иначе ожидаемые стили могут не попасть в результат.
• Повторяющиеся фрагменты удобно оформлять как компоненты или шаблоны проекта. Не обязательно копировать длинный набор классов в десятки мест вручную.
• Обычный CSS продолжает работать рядом с Tailwind. Знание каскада, Flexbox, сеток и размеров помогает понять, почему выбранные классы дают именно такой результат.
• Для знакомства начните с одного небольшого блока и разберите каждое свойство. Это проще, чем одновременно переносить весь интерфейс и менять систему сборки.

Понятно, почему там столько названий у одного div.

Tailwind позволяет составлять оформление из небольших классов прямо в разметке. Например, flex задает модель раскладки, а классы отступов и цветов дополняют ее. Это не полноценная замена CSS или HTML и не автоматическая логика компонентов. Нужные стили должны быть подключены: одних названий классов в документе недостаточно. Настройка зависит от версии и сборщика.