A Tailwind CSS v4 plugin that gives nested rounded elements the right corner radius automatically: inner radius = outer radius - gap.
@import "tailwindcss";
@import "tailwindcss-concentric";<div class="rounded-3xl p-3">
<img class="rounded-concentric" /> <!-- 24px - 12px = 12px -->
</div>Package documentation: packages/tailwindcss-concentric/README.md.
| Path | What it is |
|---|---|
packages/tailwindcss-concentric |
The npm package. src/build.ts generates dist/index.css; src/merge.ts is the tailwind-merge plugin; src/audit.ts and src/cli.ts are the audit command. |
packages/tailwindcss-concentric/test |
Unit, snapshot and audit tests (Vitest, real Tailwind compiler) and browser tests (Playwright) for every edge case in test/cases.ts. |
skills/concentric |
Agent skill: SKILL.md, references/, and an eval (eval/) with a seeded sample app and a grader. |
apps/site |
Playground and docs site: Astro and Tailwind CSS, with React islands for the interactive demos. |
brand |
The logo, drawn from an interactive Hairline figure in brand/hairline. node apps/site/scripts/brand.ts redraws the logo, the favicon and the iOS icon from it. Also the launch film (film.mp4, and film.gif for this README), rendered from apps/site/src/pages/film.astro. |
DECISIONS.md |
Spike results and the architecture choices behind them. |
Requires Node 22.18 or later (TypeScript files run directly with Node's type stripping) and pnpm 10.
pnpm install
pnpm build # generate dist/
pnpm test # unit + snapshot + size tests
pnpm test:e2e # browser tests (Chromium, Firefox, WebKit)
pnpm lint # Biome
pnpm typecheck
pnpm --filter concentric-site dev # site at http://localhost:4321The first e2e run needs browsers: pnpm --filter tailwindcss-concentric exec playwright install.
Other scripts:
pnpm --filter tailwindcss-concentric compat 4.0.0 latest # browser suite against published Tailwind releases
pnpm --filter tailwindcss-concentric size # gzipped size of dist/index.css
node packages/tailwindcss-concentric/scripts/readme-image.ts # re-render the README image
pnpm --filter concentric-site og-image # re-render the site's social image (public/og.png)
node apps/site/scripts/film.ts # re-render brand/film.mp4 and film.gif (needs ffmpeg and the dev server)To run the skill eval, see skills/concentric/eval/README.md.
Add a changeset with pnpm changeset. On main, the release workflow opens a "Version packages" pull request; merging it publishes to npm with provenance. It publishes through npm trusted publishing, so it needs no token: the package's trusted publisher on npmjs.com points at release.yml in this repository.
MIT