Using with Tailwind

The library and Tailwind coexist cleanly: settle on one reset, order the cascade layers so Tailwind utilities win when you want them to, and pass utility classes to components through their class prop. None of it is Tailwind-specific plumbing: it is the same layer model the rest of the theme uses.

Pick one reset

The library ships an optional structural reset and Tailwind ships Preflight. They do the same job, so run one of them. Importing both is redundant, and their rules overlap.

/* Pick ONE reset. Running both is redundant and they fight. */

/* Option A: keep the library reset; turn Tailwind Preflight OFF.
   v4: import Tailwind's parts and leave out preflight.
   v3: corePlugins: { preflight: false } in tailwind.config. */
@import '@hyzer-labs/ui/reset.css';

/* Option B: keep Tailwind Preflight; just do not import the library reset. */
/* (the reference theme never needs it) */

Either choice is fine. The reference theme does not depend on the library reset. The reset only sets structure (box-sizing, media defaults), with no colors or fonts, so dropping it for Preflight changes nothing about how the components look.

Order the layers once

The reference theme lives in the hz-theme cascade layer. Tailwind puts its utilities in a utilities layer. Declare the full order in one statement at the top of your stylesheet and precedence stops depending on import order:

/* app.css: declare the whole cascade order once, at the top. */
@layer hz-reset, hz-theme, theme, base, components, utilities;

@import '@hyzer-labs/ui/tokens.css'; /* the --hz-* custom properties */
@import '@hyzer-labs/ui/theme';      /* reference theme, in @layer hz-theme */
@import 'tailwindcss';               /* theme, base, components, utilities */

/* utilities is last, so a Tailwind utility class overrides the reference
   theme. hz-theme sits before it, and both lose to any UNLAYERED CSS you
   write: your own overrides still win outright. */
A layered rule always loses to an unlayered one, so a Tailwind utility (layered) overrides the reference theme but not a bare class or ID you write yourself. Your own unlayered CSS stays the final word. See Theming Overview for the tier model.

On Tailwind v3 the utilities are emitted unlayered, so they already beat the theme without this declaration. Pinning the order is harmless, and it keeps a later Tailwind upgrade from shifting the cascade under you.

Pass utilities through class

Every component forwards its class prop onto the root element, so Tailwind utility classes compose with the component's own styling:

<!-- Every component forwards `class` to its root element, so Tailwind
     utilities compose straight onto the styled component. -->
<Button class="w-full sm:w-auto">Reserve a tee time</Button>

<Card class="mt-6 shadow-lg">
	Fairways dry, greens rolling fast.
</Card>

For structure, reach for the layout components (Stack, Grid, Cluster) or the utility sheet where they fit, then use Tailwind utilities for the one-off nudges on top.

Share the tokens

The design tokens are ordinary --hz-* custom properties, so Tailwind can read them with no bridge. Map them into your Tailwind theme to generate matching utilities, or reference one inline with an arbitrary value:

/* The tokens are plain custom properties, so Tailwind can read them
   directly. Map them into @theme (v4) to get generated utilities: */
@theme {
	--color-brand: var(--hz-intent-primary);
}

<!-- …or reach a token inline with an arbitrary value, no config: -->
<p class="text-[color:var(--hz-intent-primary)]">On brand</p>

See Tokens & Overrides for the full token surface and how to override it.