Tailwind CSS – ako vyriešiť @apply CssSyntaxError

Tailwind CSS

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“.

https://www.mldgroup.com

Vyštudovaný top manažér pôsobiaci najmä ako manažér, marketér, softvérový inžinier, konzultant, bloger, YouTuber a zatiaľ neúspešný hudobník a producent. V rámci praxe pôsobil v rôznych odvetviach na rôznych pozíciách v malých aj veľkých firmách, vrátane spoluprác a partnerstiev s významnými firmami či poradenskými spoločnosťami.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *