# @splendidlabz/styles

Splendid Labz styles for Tailwind CSS v4.

## Install

```bash
npm install @splendidlabz/styles
```

## The quickest way — everything

```css
@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:

```css
@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:

```css
/* 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:

```css
@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                               |