Итоги

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

• Цвета, шрифты и другие значения Tailwind берутся из его темы. Каждое значение — это CSS-переменная, например --color-orange-500. Свои значения вы добавляете в блок @theme после @import "tailwindcss";.
• Переменная, имя которой начинается с --color-, создаёт цвет для всех цветовых классов: --color-brand-500 даёт bg-brand-500, text-brand-500, border-brand-500, hover:bg-brand-500 и другие. Когда вы меняете её значение, цвет меняется везде, где он используется.
• Переменная, имя которой начинается с --font-, создаёт класс шрифта: --font-display: "Comfortaa", sans-serif; даёт font-display. Ваша собственная --font-sans меняет шрифт всей страницы.
• Веб-шрифт можно загрузить в таблице стилей с помощью @import url(...). Он должен стоять первым, до @import "tailwindcss";: браузер без всякой ошибки пропускает @import, который идёт после других правил.
• Когда список классов повторяется, напишите элемент один раз, в шаблоне или компоненте, или измените все места сразу (Ctrl+D). Иначе создайте собственный класс: правило с @apply в @layer components.
• Утилитные классы сильнее слоя components, поэтому свой класс можно подправить ими: btn px-8.
• Неизвестный класс в @apply останавливает весь style.css, а под предпросмотром появляется красная ошибка.
• @utility создаёт настоящий утилитный класс, который работает с вариантами, например md:bg-stripes. Класс из @layer components так не умеет.
• Произвольные значения — для разовых случаев. Значению, которое повторяется, место в теме.

На следующем уроке, «Итоговый проект», вы самостоятельно оформите всю главную страницу приюта, применив всё, что узнали на этом курсе.

Практика. Оскар — новичок в приюте. Мы добавили на его карточку метку «Новый» (span в начале карточки), и у карточки теперь есть класс relative, чтобы метку можно было поместить на картинку. Создайте для метки собственный класс во втором цвете приюта: зелёном для меток.