Styling & CSS Isolation

CWA ships its styles (cwa.css) inside CSS cascade layers on purpose. This is what lets your own site styles take precedence over CWA's without specificity battles or !important.

Why CWA styles are layered

cwa.css registers its rules in named cascade layers:

@layer theme, base, cwa, components, utilities;

Cascade layers always have lower priority than unlayered CSS. So any ordinary styles in your app override CWA's automatically — you can theme your site freely and CWA's own styling gets out of the way.

The one gotcha: unscoped global element styles

That same rule cuts the other way. Because layered styles lose to unlayered ones, bare global element selectors in your app beat CWA's styles too:

/* ⚠️ unlayered + unscoped — wins over everything, everywhere */
h1     { color: red }
a      { text-decoration: underline }
button { border-radius: 0 }

The CWA admin UI renders inside your app's DOM, so these rules bleed into the admin chrome — the editor's headings, links, buttons, dialogs, and form controls pick up your site's global styles, which is rarely what you want.

Best practice: scope your global element styles

Target a content wrapper (or a layer) instead of the bare element, so your styles apply to your content but leave embedded UI — including the CWA admin — untouched.

Do — scope to your content:

.prose h1 { color: red }        /* only your content */
.content a { text-decoration: underline }

Do — or put your base styles in your own cascade layer, so they play by the same rules as CWA's:

@layer app-base {
  h1 { color: red }             /* now layered — participates in the cascade order */
}

Don't — leave bare, unlayered element resets at the top level of a global stylesheet:

h1 { … }   a { … }   button { … }   ul { … }

Practical options:

• Wrap your rendered content in a container (.prose, .content, a layout wrapper) and scope element styles to it.
• Use the Tailwind typography plugin's prose classes instead of global element resets.
• Declare your own @layer for base element styles so they slot into the cascade-layer order rather than trumping every layered style.

Any of these keeps your site looking exactly as you intend while leaving the CWA admin chrome (and other third-party UI) styled the way it ships.