Урок 02. Задания
⚡ Кратко
Три практических задания на установку и четыре вопроса на понимание.
Задания
Задание 1. Проект на Vite
Создайте проект на Vite (любой шаблон), подключите Tailwind плагином и
добейтесь, чтобы заголовок text-3xl font-bold underline
отображался крупным, жирным и подчёркнутым.
Критерий: в проекте нет файла tailwind.config.js,
а в src/index.css ровно одна строка.
Задание 2. Статическая страница через CLI
Соберите ту же страницу без сборщика: input.css →
output.css, подключение через <link>.
Запустите сборку в режиме наблюдения и убедитесь, что при добавлении нового
класса файл пересобирается.
Задание 3. Размер результата
Соберите CSS дважды: обычной командой и с ключом --minify.
Сравните размеры файлов и объясните разницу. Затем добавьте на страницу
десяток новых утилит и пересоберите — насколько вырос файл?
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Какой пакет подключает Tailwind в проект на Vite?
Вопрос 2
Что нужно написать в главном CSS-файле проекта в v4?
Вопрос 3
Какой ключ CLI пересобирает CSS при изменении файлов?
Вопрос 4
Почему браузерную сборку не используют в продакшене?