Moduletrace/tailwind-ui-library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move base.css rules into cascade layers so utility classes win

Browse Source 
Unlayered CSS beats Tailwind's @layer utilities regardless of specificity,
so base.css (and consumer stylesheets) overrode classes passed to
components. Element defaults now live in @layer base and twui-* rules in
@layer components. Third-party TinyMCE/Ace overrides stay unlayered. README
documents wrapping consumer overrides in layers.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
tben
2026-11-09 03:16:25 +01:00
co-authored by Claude Opus 5.5
parent 7d7eae5801
commit 7e7ab495c3
2 changed files with 166 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+22 -2
View File
@@ -44,11 +44,31 @@ Import `base.css` once in your main stylesheet. It includes `@import "tailwindcs
/* ...see base.css for the full list of tokens */
}
.twui-button-general {
@apply rounded-full;
/* Element defaults */
@layer base {
h1 {
@apply text-5xl font-bold;
}
}
/* Templates for twui components */
@layer components {
.twui-button-general {
@apply rounded-full;
}
.twui-section {
@apply py-20;
}
}
```
### Overriding with utility classes
Put your own rules inside `@layer base` (element selectors like `h1`, `ul`) or `@layer components` (classes like `.twui-*`). Tailwind's utilities come in the later `utilities` layer, so a class passed to a component (`<Section className="py-4">`) overrides your stylesheet without `!important`.
CSS outside any `@layer` beats every layered rule regardless of specificity. A bare `.twui-section { @apply py-44; }` would therefore override `className="py-4"` on every `Section`, which is why these rules belong in a layer.
## Usage
Import from the root entry: