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>
2026-04-30 03:01:54 +00:00 · 2026-02-07 22:35:34 -08:00
parent a56f2d3883
commit e625b0351c
13 changed files with 123 additions and 163 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,9 +21,9 @@ catalogs:
    '@iconify/json':
      specifier: ^2.2.380
      version: 2.2.380
-    '@iconify/tailwind':
-      specifier: ^1.1.3
-      version: 1.2.0
+    '@iconify/tailwind4':
+      specifier: ^1.2.0
+      version: 1.2.1
    '@intlify/eslint-plugin-vue-i18n':
      specifier: ^4.1.0
      version: 4.1.0
@@ -805,9 +805,9 @@ importers:
      '@iconify-json/lucide':
        specifier: 'catalog:'
        version: 1.2.79
-      '@iconify/tailwind':
+      '@iconify/tailwind4':
        specifier: 'catalog:'
-        version: 1.2.0
+        version: 1.2.1(tailwindcss@4.1.12)
    devDependencies:
      tailwindcss:
        specifier: 'catalog:'
@@ -1528,6 +1528,9 @@ packages:
    peerDependencies:
      postcss-selector-parser: ^7.0.0

+  '@cyberalien/svg-utils@1.1.1':
+    resolution: {integrity: sha512-i05Cnpzeezf3eJAXLx7aFirTYYoq5D1XUItp1XsjqkerNJh//6BG9sOYHbiO7v0KYMvJAx3kosrZaRcNlQPdsA==}
+
  '@dual-bundle/import-meta-resolve@4.2.1':
    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}

@@ -2149,8 +2152,13 @@ packages:
  '@iconify/json@2.2.380':
    resolution: {integrity: sha512-+Al/Q+mMB/nLz/tawmJEOkCs6+RKKVUS/Yg9I80h2yRpu0kIzxVLQRfF0NifXz/fH92vDVXbS399wio4lMVF4Q==}

-  '@iconify/tailwind@1.2.0':
-    resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
+  '@iconify/tailwind4@1.2.1':
+    resolution: {integrity: sha512-Hd7k8y7uzT3hk8ltw0jGku0r0wA8sc3d2iMvVTYv/9tMxBb+frZtWZGD9hDMU3EYuE+lMn58wi2lS8R2ZbwFcQ==}
+    peerDependencies:
+      tailwindcss: '>= 4.0.0'
+
+  '@iconify/tools@5.0.3':
+    resolution: {integrity: sha512-W5nbH5fNv20TvU49Al19Foos/ViAnmppbCNV9ieGl6/dRMDRzxeFol6peXX/NAgaOytQwZZxTTJRq/Kxd4eWsA==}

  '@iconify/types@2.0.0':
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -4664,6 +4672,10 @@ packages:
    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
    engines: {node: '>=14'}

+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
  commander@13.1.0:
    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
    engines: {node: '>=18'}
@@ -4769,6 +4781,13 @@ packages:
  css-select@4.3.0:
    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}

+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  css-tree@3.1.0:
    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -4785,6 +4804,10 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  cssstyle@5.3.5:
    resolution: {integrity: sha512-GlsEptulso7Jg0VaOZ8BXQi3AkYM5BOJKEO/rjMidSCq70FkIC5y0eawrCXeYzxgt3OCf4Ls+eoxN+/05vN0Ag==}
    engines: {node: '>=20'}
@@ -6490,6 +6513,9 @@ packages:
  mdast-util-to-string@4.0.0:
    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}

+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
  mdn-data@2.12.2:
    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}

@@ -6683,6 +6709,10 @@ packages:
  mlly@1.8.0:
    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}

+  modern-tar@0.7.3:
+    resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
+    engines: {node: '>=18.0.0'}
+
  mrmime@2.0.1:
    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
    engines: {node: '>=10'}
@@ -7441,6 +7471,10 @@ packages:
    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
    engines: {node: '>= 0.4'}

+  sax@1.4.4:
+    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+    engines: {node: '>=11.0.0'}
+
  saxes@6.0.0:
    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
    engines: {node: '>=v12.22.7'}
@@ -7704,6 +7738,11 @@ packages:
  svg-tags@1.0.0:
    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}

+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
  swr@2.3.6:
    resolution: {integrity: sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==}
    peerDependencies:
@@ -9435,6 +9474,10 @@ snapshots:
    dependencies:
      postcss-selector-parser: 7.1.1

+  '@cyberalien/svg-utils@1.1.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@dual-bundle/import-meta-resolve@4.2.1': {}

  '@emnapi/core@1.7.1':
@@ -10023,9 +10066,22 @@ snapshots:
      '@iconify/types': 2.0.0
      pathe: 1.1.2

-  '@iconify/tailwind@1.2.0':
+  '@iconify/tailwind4@1.2.1(tailwindcss@4.1.12)':
    dependencies:
+      '@iconify/tools': 5.0.3
      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      tailwindcss: 4.1.12
+
+  '@iconify/tools@5.0.3':
+    dependencies:
+      '@cyberalien/svg-utils': 1.1.1
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      fflate: 0.8.2
+      modern-tar: 0.7.3
+      pathe: 2.0.3
+      svgo: 4.0.0

  '@iconify/types@2.0.0': {}

@@ -12834,6 +12890,8 @@ snapshots:

  commander@10.0.1: {}

+  commander@11.1.0: {}
+
  commander@13.1.0: {}

  commander@14.0.2: {}
@@ -12941,6 +12999,19 @@ snapshots:
      domutils: 2.8.0
      nth-check: 2.1.1

+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
  css-tree@3.1.0:
    dependencies:
      mdn-data: 2.12.2
@@ -12952,6 +13023,10 @@ snapshots:

  cssesc@3.0.0: {}

+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
  cssstyle@5.3.5:
    dependencies:
      '@asamuzakjp/css-color': 4.1.1
@@ -14893,6 +14968,8 @@ snapshots:
    dependencies:
      '@types/mdast': 4.0.4

+  mdn-data@2.0.28: {}
+
  mdn-data@2.12.2: {}

  mdurl@2.0.0: {}
@@ -15193,6 +15270,8 @@ snapshots:
      pkg-types: 1.3.1
      ufo: 1.6.1

+  modern-tar@0.7.3: {}
+
  mrmime@2.0.1: {}

  ms@2.1.3: {}
@@ -16233,6 +16312,8 @@ snapshots:
      is-regex: 1.2.1
    optional: true

+  sax@1.4.4: {}
+
  saxes@6.0.0:
    dependencies:
      xmlchars: 2.2.0
@@ -16570,6 +16651,16 @@ snapshots:

  svg-tags@1.0.0: {}

+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.4
+
  swr@2.3.6(react@19.2.3):
    dependencies:
      dequal: 2.0.3