コード生成中級

CSS / SCSS から Tailwind への移行

BEM や CSS Modules で書かれたスタイルを Tailwind utility に置き換えるプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

古い SCSS ファイルが大量にあり、メンテナンスする人がいない。Tailwind に統一したいが手作業では非現実的。

プロンプト

Claude Code に入力

次のコンポーネントの SCSS を Tailwind に書き換えてください。

## 対象
- コンポーネント: [path/to/component.tsx]
- 対応する SCSS: [path/to/component.module.scss]

## 手順
1. SCSS のセレクタ階層を解析し、対応する JSX 要素を特定
2. プロパティを Tailwind utility に変換（カスタム値は theme.extend を参照）
3. メディアクエリは sm: md: lg: に変換
4. :hover :focus :disabled は state variant に変換
5. 残った独自プロパティ（複雑な animation, clip-path）は @apply で残す

## ガードレール
- クラス名の追加は className に prettier-plugin-tailwindcss 順序で並べる
- 結果のレンダリングが元と pixel perfect であることを目視確認する手順を添える
- 移行後に対応 SCSS ファイルを削除する PR を分ける

実行結果の例

Claude Code が以下を返します。 - component.tsx の className 変換 diff - 残した @apply ブロック（complex animation 1 件） - 削除予定 SCSS ファイル一覧 - 視差チェック手順（Percy / Chromatic）

コツ・ポイント

Tailwind の任意値 [calc(...)] を多用するとメリットが薄れるので注意
container query を使っているなら @container 対応 plugin を導入
SCSS の変数は tailwind.config の theme に集約する
Storybook がある場合は visual regression が必須