unknown-format-variant
"A format-variant prefix must name a declared format of a template composing the section."
Venue: check — A format-variant prefix must name a declared format of a template composing the section.
A format-variant prefix in a rendered section’s class strings must name a format
declared by a template composing that section. The rendered fixtures’ class lists
are read, and the accepted set is the union of three things: every declared format
id of every template composing the section, the template’s own breakpoints
theme tokens, and any @custom-variant its CSS declares.
Tailwind’s own variants are never reported — its breakpoints, its static variants
(hover:, dark:, print:), its functional ones (group-hover:, data-open:,
min-[40rem]:) and any bracketed arbitrary variant all pass untouched.
Reason
Section titled “Reason”A rendered template’s declared format ids are its styling vocabulary: each one
compiles to a @custom-variant scoped to the frame shell’s data-format stamp, so
instagram-story:flex-col applies exactly when the page renders at that format.
There is no other vocabulary, because the acceptance set is closed.
Which means a prefix naming no declared format compiles to nothing at all.
Tailwind’s scanner does not know that instagram-stroy: was meant to be a variant;
it sees a string that matches no variant, emits no rule, and reports nothing. The
class you wrote never existed, and the page renders as though you had not written it
— correctly, at the base style, which is the trap: the format you were correcting
for is the one format that still looks wrong.
The second case this catches is drift rather than typing. A section composed by two templates is styled for the formats of both, and it is the union that is legal — so when a composition changes and a format leaves the set, every override written for it goes silently dead. Nothing else in the toolchain can see that, which is why it is graded here.
Correct the spelling, declare the format on the template, or drop the prefix if the style belongs at every format. The message names the accepted set, so the intended id is usually one character away from something already in it.
Before
Section titled “Before”<div className="flex instagram-stroy:flex-col letter-portrait:gap-8">…</div>Neither prefix resolves: one is a typo, and letter-portrait belongs to a document
template that no longer composes this section.
return <div className="flex instagram-story:flex-col">…</div>;The declared id, spelled as template.ts declares it, with the dead override
removed.
See also
Section titled “See also”template.ts—formats, and the ids that become variants.theme.ts— a template’s ownbreakpointstokens, which also become variant prefixes.