Что такое Tailwind?

Добро пожаловать на курс по Tailwind CSS! В курсе CSS вы задавали странице внешний вид, записывая правила в таблицу стилей. Tailwind CSS, или просто Tailwind, — это другой способ записать тот же самый CSS, и сегодня это один из самых популярных инструментов для оформления сайтов.

Чтобы выровнять заголовок по центру, в курсе CSS вы писали правило в style.css:

h1 {
	text-align: center;
}

С Tailwind вы правило не пишете. Вместо этого вы добавляете элементу готовый класс прямо в HTML:

<h1 class="text-center">Кошачий приют «Усики»</h1>

Класс text-center означает ровно одно объявление: text-align: center. Такие классы называются утилитными классами (utility classes): каждый из них делает одно небольшое дело, обычно — одно объявление CSS. В Tailwind их тысячи: почти для каждого свойства и значения CSS, которые вы знаете. Чтобы оформить элемент, вы даёте ему нужные классы. Поэтому Tailwind — это CSS-фреймворк: готовый набор стилей, из которого вы собираете свои страницы.

Зачем вообще писать CSS таким образом?

• Вы остаётесь в одном файле. Вы видите, как выглядит элемент, прямо там, где он стоит в HTML. Не нужно переключаться на таблицу стилей и искать его правило.
• Не нужно придумывать названия. Больше не надо ломать голову над именами вроде title-background или card для каждого элемента, который хочется оформить.
• Таблица стилей не разрастается бесконечно. В курсе CSS каждая новая часть страницы означала новые правила, а старые оставались в таблице стилей на всякий случай, даже когда ими уже ничего не пользовалось. С Tailwind, когда вы удаляете элемент, его стили исчезают вместе с ним.

Правда, за это приходится платить: HTML становится длиннее. У элемента часто бывает пять или десять классов, и поначалу это может показаться беспорядком. Большинство людей быстро привыкают, а дальше в курсе вы узнаете, как поступать с классами, которые часто повторяются.

Tailwind — это всё тот же CSS: каждый класс означает объявления CSS, знакомые вам по курсу CSS. Так что всё, что вы там узнали, остаётся в силе — от блочной модели до flexbox и grid. Вы просто будете записывать это по-другому.

На этом курсе вы создадите сайт приюта для кошек «Усики». В редакторе вы найдёте его самую первую главную страницу: обычный HTML, как в курсе HTML. Tailwind уже включён: в файле style.css одна-единственная строка, с которой вы познакомитесь в следующем упражнении. Не удивляйтесь, что заголовок выглядит как обычный текст. Tailwind делает так нарочно, и почему, вы узнаете позже в этом уроке.

Над предпросмотром появилась новая панель, «Ширина просмотра». Она может показать страницу такой ширины, как экран телефона, планшета или компьютера. В основном она понадобится вам в уроке об адаптивном дизайне. До тех пор оставляйте значение «По размеру», если только упражнение не просит попробовать другую ширину.