Tailwind Alchemist：在代码库中查找所有 Tailwind 颜色

Source: Dev.to

为什么硬编码的 Tailwind 颜色是个问题

在使用 Tailwind 时，你常常直接在元素上写颜色（或背景颜色），例如 bg-blue-500。这让你能快速看到组件的外观，但当需要以后更改主题时就会很痛苦——必须把所有硬编码的颜色逐一找出来并替换。

设计系统和语义化命名（例如 bg-primary）可以解决这个问题，但很多项目一开始就使用了包含大量原始 Tailwind 颜色名称的模板。手动把这些颜色转换为语义化名称既容易出错，又耗时。

Tailwind Alchemist

Tailwind Alchemist 是一个用 TypeScript 编写的小型 CLI 工具，它会扫描代码库并列出仍然存在的所有默认 Tailwind 颜色名称。它帮助你定位硬编码颜色的位置，以便将其替换为语义化名称（例如通过 DaisyUI）。

安装与基本用法

npx tw-alchemist scan -p 'resources/js/**'

基本输出

Found 28 Tailwind colors:

amber-400
black
blue-100
blue-200
blue-700
blue-800
green-500
green-600
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
orange-300
red-100
red-200
red-50
red-500
red-600
red-700
violet-500
white
yellow-500
zinc-900

更详细的输出

显示每个颜色出现在哪些文件（-v 参数）

npx tw-alchemist scan -p 'resources/js/**' -v

Found 28 Tailwind colors:

Color: violet-500 (found in 3 files)
  - resources/js/components/AppHeader.vue
  - resources/js/components/AppLogo.vue
  - resources/js/components/MobileHeader.vue

Color: neutral-500 (found in 5 files)
  - resources/js/components/AppHeader.vue
  - resources/js/components/AppearanceTabs.vue
  - resources/js/components/TextLink.vue
  - resources/js/pages/auth/TwoFactorChallenge.vue
  - resources/js/pages/settings/Profile.vue

...

显示精确行号和实用类（-vv 参数）

npx tw-alchemist scan -p 'resources/js/**' -vv

Found 28 Tailwind colors:

Color: violet-500 (3 occurrences)
  - resources/js/components/AppHeader.vue
    - Line 106: text-violet-500
  - resources/js/components/AppLogo.vue
    - Line 10: text-violet-500
  - resources/js/components/MobileHeader.vue
    - Line 28: text-violet-500

Color: neutral-500 (6 occurrences)
  - resources/js/components/AppHeader.vue
    - Line 233: text-neutral-500
  - resources/js/components/AppearanceTabs.vue
    - Line 33: text-neutral-500
  - resources/js/components/TextLink.vue
    - Line 21: dark:decoration-neutral-500
  - resources/js/pages/auth/TwoFactorChallenge.vue
    - Line 100: dark:decoration-neutral-500
    - Line 132: dark:decoration-neutral-500
  - resources/js/pages/settings/Profile.vue
    - Line 244: dark:decoration-neutral-500

...

限制

• 目前仅支持 Tailwind v4。
• 运行在 Context7 平台上，因此可以在使用相应 MPC 的 LLM 中调用它进行重构。

参与贡献

如果你觉得 Tailwind Alchemist 有用，欢迎在 GitHub 上为仓库加星：
⭐️ https://github.com/your‑username/tw‑alchemist

也可以提交 issue 或 pull request，添加诸如 Tailwind v5 支持等功能。