Селектор появляется после того, как @apply не работает ⇐ CSS

[Anonymous]

Когда я пытаюсь написать селектор после использования @apply, этот селектор не работает.
Пример:

Код: Выделить всё

@layer components {
.icon {
@apply p-1 hover:bg-gray-200 rounded hover:cursor-default;
}

#welcome {
@apply text-gray-200 flex flex-col justify-center items-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none max-sm:h-screen max-sm:w-full max-sm:px-10;

.small-screen {
@apply sm:hidden m-7 bg-red-300/20 backdrop-blur-lg p-3 rounded-md absolute top-10;

p {
@apply flex-1 text-[16px] text-center font-roboto text-gray-400;
}
}
}
}

Теперь селектор (.small-screen) не работает. Я использую Tailwindcss V4.1, поэтому файл конфигурации попутного ветра нам не нужен.


Подробнее здесь: https://stackoverflow.com/questions/798 ... oesnt-work