V tomto článku sa venujem CSS frameworku Tailwind CSS a chybovému hláseniu: “If a custom class, make sure it is defined within a @layer directive.”
V rámci tvorby skupinových selektorov prostredníctvom @apply sa pri kompilácii CSS môže vyskytnúť chybové hlásenie z kategórie CssSyntaxError.
.main-container {
@apply md:w-70 w-40 mx-auto text-center;
}Žiaľ aj v tomto prípade mi starosti vytvoril internet a niektoré články, ktoré uvádzali, že zápisy s dvojbodkou ako napr. sm:, md:, hover: nie sú podporované. Dokonca sa do konfiguračného súboru odporúčal zápis, ktorý mal dvojbodky podporovať alebo dvojbodky escapovať cez lomky.
Samozrejme ani jedno z riešení nie je správne a aj ja som veril, že tomu asi tak je, aj keď mi to stále nesedelo, keďže som mal k dispozícii kód, kde takéto zápisy fungovali.
Nakoniec po pár hodinách trápenia som došiel na zdroj problému a normálne riešenie.
Pôvodne som tento problém riešil tak, že zo zápisu som odstránil md:w-70 a túto triedu som zapísal do HTML súboru k HTML elementu.
example.css
.main-container {
@apply w-40 mx-auto text-center;
}example.html
<div class="main-container md:w-70"></div>No riešenie je triviálne. Všetky dvojbodkové zápisy sú podporované. Tak ako sa uvádza v chybovom hlásení “class does not exist.”, Tailwind CSS takúto triedu neobsahuje. Zápis w-70 neexistuje.
Správny zápis je nasledovný
.main-container {
@apply md:w-72 w-40 mx-auto text-center;
}Záver
Pre vyhnutiu sa chybe CssSyntaxError je potrebné v @apply uvádzať len triedy, ktoré naozaj v Tailwind CSS existujú. @apply ale nepodporuje všetky Tailwind triedy. Príkladom je trieda group. Ak je trieda group v @apply, kompilátor vypíše nasledujúce chybové hlásenie: “CssSyntaxError: tailwindcss: @apply should not be used with the ‘group’ utility“.
