@clarityos/tailwind-preset

Shared Tailwind integration helpers for the Clarity OS design system.

Start Here

For the full Next.js consumer setup, package scanning guidance, and agent instructions, use docs/consumer/CONSUMER_SETUP.md.

Install

npm install @clarityos/tailwind-preset

This package is currently documented for:

• Tailwind CSS 4.x

Preferred Tailwind 4 Usage

Import the shared theme mapping CSS alongside the token CSS:

@import "@clarityos/tokens/tokens.css";
@import "@clarityos/tailwind-preset/theme.css";
@import "tailwindcss" source(none);

Then register your app sources and any installed @clarityos package sources with @source.

Legacy Tailwind 3 Usage

The JavaScript preset export is still available for legacy Tailwind 3 consumers:

import preset from "@clarityos/tailwind-preset";

export default {
  presets: [preset],
};

Notes

• Consumer apps should also install @clarityos/tokens.
• Load @clarityos/tokens/tokens.css in your global stylesheet.
• Tailwind 4 apps should import @clarityos/tailwind-preset/theme.css.
• Tailwind source registration still needs to include the installed @clarityos package output.