После обновления Tailwind v4 все директивы @apply перестали работать.
В документации представлен обходной путь с помощью @reference, но опубликованный пример расплывчат.
Я попробовал это, но это не работает:
// @reference './../../assets/styles/scss/main.scss'; // workaround (incorrect)
@reference "tailwindcss"; // should be sufficient
header {
@apply bg-neutral-0; // used to work in Tailwind v3
}
(...)
Когда я просматриваю заголовок в браузере, ему не назначен какой-либо цвет фона.
Изменить. Мне не хватало @tailwindcss/vite, но некоторые служебные классы по-прежнему не работают. Т.е. @apply block работает, а @apply bg-neutral-0 — нет. Выдает ошибку:
19:26:13 [vite] (client) hmr update /src/components/Header.vue?vue&type=style&index=1&lang.postcss (x2)
Error: Cannot apply unknown utility class `bg-neutral-0`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions- ... -directive
Подробнее здесь: https://stackoverflow.com/questions/797 ... ailwind-v4