Reef exports a CSS reset file at @228-co/reef/css-reset.css. This is a comprehensive CSS reset similar to Tailwind's Preflight, designed to normalize browser defaults and provide a consistent foundation for styling.
The key difference from other CSS resets is that Reef's reset is wrapped in @layer priority1. This is critical when using StyleX in CSS layer mode.
Most CSS resets (like Tailwind's Preflight or normalize.css) are unlayered. When StyleX is configured to use CSS layers, it outputs styles into @layer priority1. Unlayered styles always take precedence over layered styles in CSS, regardless of source order. This means an unlayered reset loaded after StyleX will override your StyleX styles.
Reef's CSS reset is wrapped in the same @layer priority1 layer that StyleX uses. By placing both the reset and StyleX styles in the same layer, normal CSS cascade rules apply. StyleX's class-based selectors naturally have higher specificity than the reset's element-level selectors, so your component styles win.
/* Both in the same layer - normal cascade rules apply */
@layer priority1 {
/* CSS reset: element-level defaults (lower specificity) */
button { cursor: pointer; }
/* StyleX: class-based styles (higher specificity, wins) */
.xabc123 { cursor: not-allowed; }
}Import the CSS reset at the entry point of your application:
import "@228-co/reef/css-reset.css";
This should be imported early in your application, typically in your root layout or entry file, before your components render.
The reset is heavily based on Tailwind 4's CSS reset (Preflight). It normalizes browser defaults, sets box-sizing: border-box, removes default margins, and establishes sensible defaults for typography, forms, and media elements.