Skip to Content
v1 is on npm — atomic classes for Tailwind CSS
Examples

Examples

The monorepo ships runnable apps. From the repo root, after pnpm install and pnpm build:

CommandAppPort
pnpm devNext.js 15 · App Router · Tailwind 43016
pnpm dev:viteVite · React 18 · Tailwind 33017
pnpm dev:next12Next.js 12 · Pages Router · Tailwind 33018
pnpm dev:turboNext.js 15 · Turbopack3019
pnpm dev:vite4Vite · Tailwind 43020
pnpm dev:astroAstro 5 · Tailwind 43021
pnpm dev:examplesAll example apps at once (Turborepo)—

What to look at

  1. Inspect the DOM: className should not show flex or bg-zinc-950, but hashes _ + 6 hex.
  2. Compiled CSS includes /*! tailwind-atomic */ and rules ._aa7b5f { … }.
  3. The chip that uses cn() is rewritten as well (active/inactive state).

Source: github.com/lac617a/tailwindcss-atomic .

Last updated on
Preserve & runtime