Как использовать @apply в Tailwind v4?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как использовать @apply в Tailwind v4?

Сообщение Anonymous »

После обновления 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»