Tailwind v4 replaced the three familiar directives with real CSS imports and cascade layers. That is a genuine improvement — the layering is now something the browser understands rather than a preprocessor convention — but it moves a footgun into the open.
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);The order of that first line is the whole game. Layers declared later win, regardless of specificity. Import utilities before your own component layer and every utility class silently loses to it — no error, no warning, just styles that do not apply and an afternoon spent adding !important to things that should not need it.
The other one
A related trap in the same file: :where() does not survive the production minifier here. It is attractive for design-system rules precisely because it contributes zero specificity, which is what you want for defaults that anything should be able to override. It works in development and disappears in the build, which is the worst possible failure schedule.
Both facts now live in a comment at the top of the stylesheet, because neither is discoverable from the symptom. Someone hitting "my utility class is not applying" will not think to check the order of four import statements, and there is nothing in the error output to point them there — there is no error output.
Write down the traps that produce no error. Those are the only ones that cost a whole afternoon.