feat: migrate from @iconify/tailwind to @iconify/tailwind4 (#8724)

## Summary

Migrate from `@iconify/tailwind` (Tailwind 3 JS plugin) to
`@iconify/tailwind4` (native Tailwind 4 CSS plugin), moving all config
into CSS directives.

## Changes

- **What**: Replace `addDynamicIconSelectors()` JS plugin with `@plugin
"@iconify/tailwind4"` CSS directive. Move `boxShadow` theme extension
into `@theme` block. Delete both `tailwind.config.ts` files and the
runtime `iconCollection.ts` module.
- **Dependencies**: `@iconify/tailwind` removed, `@iconify/tailwind4`
added

## Review Focus

- `from-folder` path resolution in monorepo context (paths relative to
project root)
- SVG auto-cleanup behavior of `from-folder` vs the previous manual
`iconCollection.ts` loader
- Removal of `@config` directive and both tailwind config files — all
config now in CSS

## Files

| File | Change |
|------|--------|
| `pnpm-workspace.yaml` | Swap catalog entry |
| `packages/design-system/package.json` | Swap dep, remove
`tailwind-config` export |
| `packages/design-system/src/css/style.css` | Add `@plugin`,
`--shadow-interface` theme token, remove `@config` |
| `packages/design-system/tailwind.config.ts` | Deleted |
| `packages/design-system/src/iconCollection.ts` | Deleted |
| `tailwind.config.ts` | Deleted |
| `tsconfig.json`, `components.json` | Remove stale references |
| `knip.config.ts` | Ignore `@iconify-json/lucide` (CSS-consumed, not
JS-imported) |
| Docs | Updated `CONTRIBUTING.md` and `icons/README.md` |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8724-feat-migrate-from-iconify-tailwind-to-iconify-tailwind4-3006d73d36508144a9b3e7ae73448f98)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Alexander Brown
2026-02-07 22:35:34 -08:00
committed by GitHub
parent a56f2d3883
commit e625b0351c
13 changed files with 123 additions and 163 deletions

View File

@@ -201,7 +201,7 @@ The project supports three types of icons, all with automatic imports (no manual
2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.
For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).