Итоги

В этом уроке мы узнали, что:

• Tailwind CSS — это CSS-фреймворк из утилитных классов: небольших классов, каждый из которых делает одно дело, обычно — одно объявление CSS. Вместо правил в таблице стилей вы даёте элементам классы прямо в HTML, например <h1 class="text-center">.
• Tailwind включается строкой @import "tailwindcss"; в style.css, которую страница подключает как обычно. Когда вы нажимаете «Запустить», Tailwind находит в вашем HTML имена классов и пишет CSS ровно для тех, которые знает. На вашем собственном компьютере это делает программа.
• У элемента может быть несколько классов в одном атрибуте class, через пробел и в любом порядке. Один класс можно дать любому числу элементов.
• Preflight, базовые стили Tailwind, убирает встроенные стили браузера: заголовки выглядят как обычный текст, нигде нет внешних отступов, у списков нет маркеров, а ссылки выглядят как обычный текст. Весь внешний вид задают ваши классы.
• Название класса говорит о том, что он делает, и в основном состоит из знакомого вам CSS. Искать классы можно на tailwindcss.com/docs.
• Класс с опечаткой не вызывает ошибки, он просто ничего не делает. Ошибка в style.css отображается красным под предпросмотром, и тогда страница вообще не получает CSS от Tailwind.

Классы из этого урока:

В следующем уроке, «Цвета и текст», вы познакомитесь с цветовой палитрой Tailwind и научитесь задавать размер, жирность и другие свойства текста.

Практика: внизу страницы мы добавили блок с часами работы: элемент section с заголовком h2 и абзацем. Оформите его классами из этого урока.