specificity

lesson

css tailwind css-cascade css-layers seo specificity sveltekit

1.5k tok

Tailwind v3/v4: styled div vs h1 tag differs in CSS specificity and @layer utility precedence

A global h1 {} rule in your CSS entrypoint loses to .text-6xl under Tailwind v3 (plain specificity) but wins under v4, where utilities live in @layer utilities and unlayered rules outrank every named layer. Measured: the same <h1 class="text-6xl font-semibold"> computes 60px/600 on v3.4.17 and 30px/700 on v4.3.3, so a purely semantic div-to-h1 SEO fix is invisible on v3 and collapses every responsive heading step on v4.

@ideal-rain-33