Docs diz que na v4 as camadas base e componentes ainda são definidas com @layer basee @layer components, também na v3 classes definidas dessa forma podem ser usadas com @apply. O problema é que elas falham na v4.
https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles
Na prática, isso significa que sou forçado a definir todas as camadas de base, componentes e utilitários @utilitypara poder usar essas classes, @applyo que, claro, criaria uma grande confusão.
Eu poderia definir todas as camadas com @utilitye então definir camadas na @importdeclaração, mas isso também não parece muito bom.
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/base.css" layer(base);
@import "tailwindcss/components.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);
Então, no final, como fazer isso na v4? Eu já tenho muito código que usa classes personalizadas com @applycamadas base e componentes definidas e agora na v4 elas produzem Cannot apply unknown utility class. Por outro lado, não quero definir base e componentes como utilitários.
Vi problemas semelhantes no Github sem solução óbvia. Se eu usar, @referencerecebo @custom-variant cannot be nested.e @utility cannot be nested..
https://github.com/tailwindlabs/tailwindcss/discussions/16429
https://github.com/tailwindlabs/tailwindcss/discussions/13336
Você pode ver meu código de estilos aqui:
https://github.com/nemanjam/nemanjam.github.io/tree/feat/tailwind4-v2/src/styles