Free tools Windows power users keep installed
One-click scans. No signup required.
If a Tailwind utility appears to have no effect, the cause may be cascade-layer precedence—not a selector that needs more specificity. For normal author declarations, unlayered CSS outranks CSS inside a cascade layer, and the browser resolves layer precedence before specificity. That means even a global * rule can beat a utility class.
Why can globals.css override a Tailwind utility?
CSS resolves competing declarations through the cascade. When declarations come from the same origin and have the same importance, layer precedence is considered before selector specificity. Among normal author declarations, a declaration in a later layer outranks one in an earlier layer, while an unlayered declaration outranks declarations in any layer.
As an Amazon Associate I earn from qualifying purchases.
Tailwind v4 generates utility CSS within cascade layers. If a handwritten global stylesheet contains a normal declaration outside any layer, that declaration can therefore win before the browser compares selectors. A utility class may look more specific, but specificity does not rescue it from an earlier cascade decision.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →This is the reported explanation for a case in Daniel Pertu’s October 1, 2026 account of a Tailwind v4 application called CogniPrep. Pertu described a 719-line app/globals.css with 17 !important declarations. Those are figures from the author’s account of one application, not general Tailwind statistics; the application’s code was not independently verified.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How did one global border rule defeat so many utilities?
Pertu identified this unlayered rule as the clearest example:
* {
border-color: var(--border);
}The selector’s specificity is zero, but its normal declaration is unlayered. According to Pertu, it consequently overrode Tailwind’s layered border-color utilities in the application. A code comment recorded 514 affected utilities at the time; a later repository grep reportedly found about 800. Both counts are application-specific figures reported by the author, not independently checked totals or a measure of how often this happens in Tailwind projects.
One visible symptom was a CSS triangle rendered as a solid rectangle. The triangle relied on transparent left and right borders and a colored top border. The global border-color rule reportedly colored the side borders, removing the transparency that made the triangle shape work.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →When is moving a default into a layer the right fix?
If a global declaration is meant to provide a default that utilities can override, place it in an appropriate lower-priority layer and make sure the project’s effective layer order puts utilities later. Pertu reported changing the rule to:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
@layer base {
* {
border-color: var(--border);
}
}This works only when the relevant utility layer comes later than base. Check the actual layer order in the compiled stylesheet rather than assuming the layer name alone guarantees the result.
| Approach | Normal-declaration effect | When it fits | What to verify |
|---|---|---|---|
| Leave the global rule unlayered | It outranks declarations inside cascade layers, regardless of their selector specificity. | Only when the rule is intentionally meant to take precedence over layered rules. | Whether the rule is unexpectedly matching utility-related elements or defeating utilities that should win. |
| Put the default in a named layer | Its precedence depends on that layer’s position relative to other layers. | When the declaration is a baseline that later-layer utilities should override. | The effective layer order, the rule’s selector breadth, and whether any competing declaration is important. |
What other global-selector failures did the author report?
The same account describes several other conflicts. They illustrate why a utility can fail because of global CSS outside the component where the symptom appears. These are the author’s reported incidents, not independently reproduced cases.
A layout rule overrode a full-screen shell
An unlayered main rule set min-height: calc(100dvh - 3.5rem) and contain: layout style paint. Pertu said it overrode min-h-0 flex-1 in full-screen shells, letting content exceed the viewport and pushing a primary button below the visible screen.
A substring selector matched utility-class names
A broad selector involving [class*='bg-card'] was narrowed after it affected card border utilities, including opacity variants whose class names contained the matching substring. Substring selectors can silently catch existing or future utility classes beyond the elements their author intended to target.
Best Value
A border utility override removed a one-pixel line
Pertu also reported a .border-t override that removed top borders from a component using a one-pixel rule. The reported workaround was border-t-[1.5px] border-current, chosen to avoid that exact selector. Treat this as a case-specific workaround, not a general replacement for finding and correcting an unintended global rule.
How should you trace a utility that is not taking effect?
- Inspect the computed property. In browser developer tools, select the affected element and find the property that is wrong, such as
border-colorormin-height. Identify the winning declaration, its selector, and whether it belongs to a cascade layer. - Check the compiled CSS. Find both the global declaration and the generated utility rule. Confirm their layer membership and the effective order of the layers; source-file order alone may not explain the winner.
- Choose the intended precedence. If the global declaration is a default, put it in an appropriate lower-priority layer so the utility layer can override it. If it is intended to win, keep that behavior deliberate rather than relying on an accidental unlayered rule.
- Narrow the selector. Replace broad selectors that match many elements or inspect class-name substrings with selectors that express the actual scope. This reduces unintended matches, including matches against utility variants added later.
- Recalculate the cascade for important declarations. Do not apply the normal-declaration layer rule unchanged: layer order is reversed for
!importantdeclarations. Check importance and layer precedence separately before changing specificity.
Why does adding specificity often fail?
Specificity matters only after the cascade has compared higher-priority factors such as origin, importance, and layer. If a normal unlayered global rule beats a normal layered utility at the layer stage, making the utility selector more specific does not change that result. First establish which declaration wins and why; then decide whether the repair belongs in layer placement, selector scope, or importance.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors
