Tailwind CSS setup

@azmr/ui is styled with Tailwind CSS v4. The package does not install Tailwind for you; your app provides it.

What you need

• Tailwind CSS v4. The stylesheets use v4 directives (@theme inline and @source), so v3 does not work.
• A build step for Tailwind. With PostCSS (Next.js, for example), add Tailwind's plugin:

// postcss.config.mjs
export default {
  plugins: { "@tailwindcss/postcss": {} },
};

This setup, Next.js with PostCSS, is the one the package's own consumer test installs and builds. Tailwind's Vite plugin (@tailwindcss/vite) is its standard alternative; it is not covered by that test yet, and the getting-started guides will add it.

Import the stylesheet

In your global CSS, after Tailwind:

@import "tailwindcss";
@import "@azmr/ui/styles.css";

Use @azmr/ui/tokens.css instead if your app already has global styles. The package page explains the difference, and the token reference lists everything the stylesheet defines.

How Tailwind finds the package's classes

Tailwind generates CSS only for the class names it finds in the files it scans. Your own files are scanned automatically, but the package's components are in node_modules. The stylesheet handles that with one rule:

@source "./**/*.js";

A path in @source is relative to the stylesheet that contains it, so Tailwind scans the installed package's JavaScript, wherever your package manager put it. You add nothing to your config.

The package's consumer test checks this. It packs the package, installs it into a fresh Next.js and Tailwind v4 app outside this repository, builds the app, and confirms that classes which exist only inside the package's JavaScript are in the generated CSS. It also runs once with the @source rule removed and expects that run to fail, so the check is known to detect the problem.

Classes in other packages of your own, such as a shared component library in a monorepo, need their own @source:

@source "../../packages/my-ui/src";

Spell class names out in full

Tailwind finds a class by reading it as text. A class built at runtime is never seen, so it silently produces no CSS:

// Not generated: "bg-success" never appears in the source as a whole.
const wrong = (tone: string) => `bg-${tone}`;

// Generated: every class appears in full.
const tones = {
  success: "bg-success",
  warning: "bg-warning",
  info: "bg-info",
} as const;

The package follows the same rule. Its responsive layout classes (Stack direction, Grid columns and spans) are tables of complete class strings, generated by a script, and a test recomputes the tables and fails if they drift. If you wrap a component and choose classes from a prop, use a lookup table like tones above.