@splendidlabz/styles

Splendid Labz styles for Tailwind CSS v4.

Install

npm install @splendidlabz/styles

The quickest way — everything

@import 'tailwindcss';
@import '@splendidlabz/styles';

That's the whole system: reset, theme, styled HTML, utilities, and the CSS components (prose, card, table, and friends). Tailwind tree-shakes whatever you don't use, so most projects want this and nothing else.

Keep your own reset — just the classes

Already have your own reset and base styles? Take Splendid's utilities and components without letting it touch your HTML:

@import 'tailwindcss';
@import '@splendidlabz/styles/utilities';
@import '@splendidlabz/styles/components/css';

utilities is the same utility classes as above with no reset and no element styling. components/css adds the opt-in component classes. Nothing renders differently until you reach for a class.

Using Splendid's Astro or Svelte components

If you're pulling in components from @splendidlabz/astro or @splendidlabz/svelte, there are two extra things to wire up:

/* 1. Point Tailwind at the packages so it scans their class names —
      they live in node_modules, which Tailwind skips by default. */
@source "../node_modules/@splendidlabz/astro";
@source "../node_modules/@splendidlabz/svelte";

@import 'tailwindcss';

/* 2. A base + the framework component styles. */
@import '@splendidlabz/styles/base';
@import '@splendidlabz/styles/components/astro'; /* or /components/svelte */

Use base, not the full @splendidlabz/styles. The full import already carries the CSS components, and /components/astro brings them along too — so pairing them gives you two copies. base is the reset and styling without the components, and the framework layer fills them in once.

Without Tailwind's preflight

Splendid ships its own reset, so you can drop Tailwind's. Import Tailwind's theme and utilities on their own instead of the whole thing, and set the layer order so Splendid's reset lands first:

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

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@import '@splendidlabz/styles';

Everything else works the same — this just replaces @import 'tailwindcss'.

Two things that'll bite you

• One base at a time. @splendidlabz/styles, base, and utilities all overlap. Import two of them and you get two copies of the shared parts — Tailwind v4 doesn't merge repeated imports. Pick one.
• Component layers need a base under them. components/css, components/astro, and components/svelte can't stand alone — on their own they have nothing to resolve against and the build fails. Any of the three bases covers them; import order doesn't matter.

Every entry point

| Import | What you get | | ---------------------- | ---------------------------------------------------------- | | @splendidlabz/styles | Everything — reset, styled HTML, utilities, CSS components | | …/base | Reset, styled HTML, utilities — no components | | …/utilities | Utilities only — leaves your HTML alone | | …/components/css | CSS component classes (prose, card, …) | | …/components/astro | Astro component styles (includes CSS components) | | …/components/svelte | Svelte component styles (includes CSS components) | | …/components | All component styles — css, astro, svelte | | …/layouts | Layout utilities (already in every base) | | …/effects | Effects, animation, transitions (already in every base) | | …/tools | The @apply / @variant helpers | | …/theming | @theme tokens plus color/pigment | | …/variables | @theme tokens on their own |