Make the border reset additive: zero default width
Previous reset set border-style: solid globally but kept the browser-default border-width, which surfaced 1-2px outlines on every <button>, <input>, <header> etc. Match the relevant slice of Tailwind's Preflight by also resetting border-width to 0, so only elements that explicitly opt in via a border utility (or a legacy shorthand rule like `border: 2px solid #ddd`) draw a border. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
e464a4160d
commit
a1cab7ea6d
1 file changed
+9
-3
+9
-3
@@ -86,11 +86,17 @@
|
|||||||
.material-symbols-outlined {
|
.material-symbols-outlined {
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
}
|
}
|
||||||
/* Tailwind preflight is disabled to keep legacy screens working;
|
/* Tailwind preflight is disabled to keep legacy screens working,
|
||||||
manually restore the border defaults Tailwind utilities expect. */
|
but the border utilities expect Preflight's defaults. Restore
|
||||||
|
just the border slice: reset width to 0 and set a default
|
||||||
|
style+colour so Tailwind's `border` / `border-b` etc. work as
|
||||||
|
expected, while not turning every browser-default control
|
||||||
|
outline into a visible 2px border. Legacy CSS rules that set
|
||||||
|
shorthand `border: …` still win via their class specificity. */
|
||||||
*, ::before, ::after {
|
*, ::before, ::after {
|
||||||
border-color: #c3c6d7;
|
border-width: 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
border-color: #c3c6d7;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user