Урок 03. Решения

Решение задания 1

@import "tailwindcss";

@theme {
  --color-ocean-500: oklch(0.62 0.13 220);
}

В собранном CSS появятся, среди прочих:

.bg-ocean-500     { background-color: var(--color-ocean-500); }
.text-ocean-500   { color: var(--color-ocean-500); }
.border-ocean-500 { border-color: var(--color-ocean-500); }
.ring-ocean-500   { --tw-ring-color: var(--color-ocean-500); }

Важно: правило появится только для тех утилит, которые вы реально использовали в разметке. Токен даёт возможность, а генерация по-прежнему идёт от найденных классов.

Решение задания 2

@import "tailwindcss";
@source "../partials";

npx @tailwindcss/cli -i ./src/style.css -o ./dist/out.css
grep "bg-emerald-100" ./dist/out.css

Почему так: каталог partials лежит вне автоматически сканируемого дерева (или исключён гитом), поэтому источник добавляется явно. Путь в @source считается относительно файла CSS.

Решение задания 3

Класс собирается во время выполнения программы, а сканер работает до неё и видит только строки "bg-", "-" и переменные. Целого имени bg-emerald-500 в файле нет — правило не сгенерируется.

const TONES = {
  emerald: "bg-emerald-500",
  rose: "bg-rose-500",
  slate: "bg-slate-500",
}
element.className = TONES[tone]

Вариант для случаев, когда значение приходит с сервера и в коде его нет физически, — перечислить классы в @source inline(…):

@source inline("bg-emerald-500 bg-rose-500 bg-slate-500");

<div class="flex gap-2">
  <span class="rounded-md bg-emerald-500 px-3 py-1.5 text-sm text-white">emerald</span>
  <span class="rounded-md bg-rose-500 px-3 py-1.5 text-sm text-white">rose</span>
  <span class="rounded-md bg-slate-500 px-3 py-1.5 text-sm text-white">slate</span>
</div>