Урок 03. Задания

📁 Раздел: Введение ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная

⚡ Кратко

Три задания на тему и сканирование плюс четыре вопроса.

Задания

Задание 1. Токен и его утилиты

Добавьте в тему цвет --color-ocean-500 и найдите в собранном CSS три разные утилиты, которые из него получились. Выпишите их.

Задание 2. Внешний источник

Создайте файл partials/banner.html вне каталога src, добавьте в него класс bg-emerald-100 и добейтесь, чтобы он попал в сборку. Проверьте результат поиском по итоговому CSS.

Задание 3. Почему не работает

Объясните, почему этот код не покрасит блок, и предложите исправление.

const shade = 500
const tone = "emerald"
element.className = "bg-" + tone + "-" + shade

Проверка понимания

Выберите один вариант ответа — правильный подсветится после клика.

Вопрос 1

Как Tailwind находит используемые классы?

Вопрос 2

Что появится после --color-brand-500 в блоке @theme?

Вопрос 3

Зачем нужна директива @source?

Вопрос 4

Почему ваш собственный CSS иногда перебивает утилиты Tailwind?