Tailwind Alchemist: find all tailwind colors in your codebase

Source: Dev.to

Why hard‑coded Tailwind colors are a problem

When using Tailwind you often place the color (or background‑color) directly on the element, e.g. bg-blue-500. This makes it easy to see how a component looks, but it becomes painful when you need to change the theme later—you have to hunt down every hard‑coded color and replace it.

Design systems and semantic naming (e.g. bg-primary) solve this, but many projects start with templates that contain a lot of raw Tailwind color names. Converting those to semantic names manually is error‑prone and time‑consuming.

Tailwind Alchemist

Tailwind Alchemist is a small CLI tool written in TypeScript that scans a codebase and lists all default Tailwind color names that are still present. It helps you identify where hard‑coded colors live so you can replace them with semantic names (e.g. via DaisyUI).

Installation & basic usage

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

Basic output

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

More detailed output

Show which files contain each color (-v flag)

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

...

Show exact lines and utilities (-vv flag)

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

...

Limitations

• Currently only supports Tailwind v4.
• Works on the Context7 platform, so you can invoke it from an LLM with the appropriate MPC when refactoring.

Get involved

If you find Tailwind Alchemist useful, consider starring the repository on GitHub:
⭐️ https://github.com/your‑username/tw‑alchemist

Feel free to open issues or submit pull requests to add features such as Tailwind v5 support.