Включаем Tailwind

Браузеры понимают только CSS. О Tailwind они никогда не слышали. Так откуда же берётся CSS для text-center? Tailwind — это ещё и программа, которая пишет CSS за вас, а включает её строка в style.css:

@import "tailwindcss";

Правило @import подключает к вашей таблице стилей другую таблицу — здесь это стили Tailwind. Страница подключает style.css элементом link в head, как в курсе CSS. Когда вы нажимаете «Запустить», сайт делает вот что:

1. Tailwind просматривает index.html и собирает все слова, которые могут быть именами классов.
2. Для каждого слова, которое оказывается одним из его классов, например text-center, он пишет правило CSS. Все остальные слова он пропускает.
3. Написанный им CSS занимает место строки @import, и страница получает его через style.css.

Так браузер получает таблицу стилей с CSS ровно для тех классов, которые использует ваша страница, и ни для чего больше. Поэтому она никогда не разрастается сама по себе: когда вы удаляете класс из HTML, его CSS исчезает при следующем запуске.

На вашем собственном компьютере эту работу выполняет программа. В итоговом проекте вы увидите, как её настроить. Здесь за вас всё делает сайт.

Мы очистили style.css, поэтому Tailwind сейчас выключен. У заголовка по-прежнему есть класс text-center, но он слева: никто не написал CSS для этого класса, а класс без CSS ничего не делает. Обратите внимание и на то, как странно выглядит страница: заголовок крупный и жирный, у списка есть маркеры, а ссылка синяя и подчёркнутая. Это встроенные стили браузера. Посмотрите, что с ними произойдёт, когда вы включите Tailwind.