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

이슈를 열거나 풀 리퀘스트를 제출하여 Tailwind v5 지원과 같은 기능을 추가해 주세요.