iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If a Tailwind utility loses to a rule in globals.css, adding a more specific selector may not help. For normal author declarations, the browser compares cascade-layer precedence before selector specificity: an unlayered rule outranks rules inside layers. That can let even a universal selector override a Tailwind utility.
Why an unlayered global rule can beat a Tailwind utility
CSS resolves competing declarations through the cascade, which considers factors including origin, importance, layer, specificity and source order. For normal declarations from the same origin, layer precedence is considered before specificity. The W3C’s CSS Cascading and Inheritance specification states that normal declarations in later layers outrank those in earlier layers, while normal declarations that are not assigned to a layer outrank declarations inside layers.
That means a layered utility can lose to an unlayered global rule even when the utility’s selector is more specific. The universal selector * has zero specificity, but specificity does not settle a contest that layer precedence has already decided.
Tailwind describes its utilities as single-purpose classes used in markup and says it scans project files for candidate classes to generate corresponding CSS. Its utility-first documentation displayed version 4.3 when consulted. This framework context explains the kind of utility involved; it does not independently verify any particular application’s conflict.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What the reported Tailwind conflict looked like
In an October 1, 2026 DEV Community article, Daniel Pertu described a Tailwind v4 application with a 719-line handwritten app/globals.css containing 17 !important declarations. These are details from the author’s account, not independently inspected code or a reproduced case. The article’s clearest example was this unlayered global rule:
* {
border-color: var(--border);
}Pertu reported that the rule overrode Tailwind border-color utilities because those utilities were in cascade layers while the global declaration was not. A code comment in the application reportedly recorded 514 affected border-color utilities; a later repository grep reportedly found about 800. Both figures describe that application and its code at the time, not Tailwind as a whole or an industry-wide count.
The triangle that became a rectangle
One reported symptom was a CSS triangle rendered as a solid rectangle. The triangle used transparent left and right borders and a colored top border. The global border-color rule reportedly turned the transparent borders gray, filling in the shape.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The layered-default fix
Pertu reported moving the default into @layer base:
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 can let utilities in a later layer override the default. It works only if the project’s effective layer order puts the utility layer after base; confirm the order rather than assuming the layer name guarantees it.
Other global-selector failures the author reported
The same article described additional incidents that illustrate how global rules can affect components far from the stylesheet declaration:
- An unlayered
mainrule setmin-height: calc(100dvh - 3.5rem)andcontain: layout style paint. The author said it overrodemin-h-0 flex-1in full-screen shells, allowing content to exceed the viewport and pushing a primary button below the visible screen. - A broad selector involving
[class*='bg-card']was narrowed after it affected card border utilities, including opacity variants whose class names matched the substring. The reported risk is not limited to current classes: broad substring selectors can also match future utility names. - A
.border-toverride removed top borders and affected a component that relied on a one-pixel rule. The author reported working around that exact selector withborder-t-[1.5px] border-current.
These are incidents as reported by Pertu, not independently verified reproductions. They show why a class that looks correct in a component may still be affected by a broad rule elsewhere in the stylesheet.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchChoose whether a global default should yield to utilities
The right choice depends on the intended relationship between the handwritten rule and utility classes, not simply on which selector looks stronger.
Best Value
| Approach | When it fits | What to verify |
|---|---|---|
| Leave the rule unlayered | When the normal global declaration is intentionally meant to outrank layered rules. | Its broadness and consequences: unlayered normal author CSS outranks normal author CSS inside layers, regardless of selector specificity. |
Place the default in a named layer such as base |
When utilities should be able to override the default. | The effective layer order: the utility layer must come later than the default’s layer for normal declarations to win. |
Moving a declaration into a layer changes its cascade position; it does not make an overly broad selector precise. Prefer selectors that express the intended scope, and inspect how they interact with utility class names and variants.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Debug a losing utility in browser tools
- 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 rule and whether it is layered. - Check the compiled CSS. Locate both the global declaration and the utility declaration. Confirm their cascade-layer membership and the effective layer order; do not infer precedence from the source file’s visual arrangement alone.
- Decide the intended precedence. If a global rule is only a default, put it in an appropriately lower-priority layer and ensure the utility layer comes later. If the global rule is meant to win, keep that deliberate effect and narrow its scope where possible.
- Audit selector breadth. Review universal, element-wide, substring and utility-named selectors for unintended matches. Test the affected component and relevant class variants after narrowing or changing a rule.
- Check for
!importantseparately. Important declarations do not follow the normal-declaration layer rule: layer precedence reverses for important declarations. Re-evaluate the cascade with importance included rather than assuming a normal layered fix will settle the conflict.
Why adding specificity may not be the fix
If the losing utility is in a layer and the winning normal global rule is unlayered, increasing the utility selector’s specificity does not reverse their layer precedence. First establish which rule wins and why; then change the layer placement, selector scope or declaration importance according to the intended behavior. This keeps a local component fix from masking a stylesheet-wide ordering problem.
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.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →
