tailwind-mergeのマージ結果を確認できるtailwind-merge playgroundを作った

tailwind-mergeの「このクラスはどっちが勝つ？」を手早く確認したかったので、シンプルなplaygroundを作りました。
StackBlitzで動くので、ブラウザだけで試せます。

できること

• マージ前/マージ後のクラスを一覧表示
• まとめたクラスをプレビューで確認
• tailwind-mergeの拡張設定を編集

使い方

1. src/1_tailwind.css でtailwindのthemeなどを設定
2. src/2_tw-merge-config.ts でマージルールを調整
3. src/3_playground-classes.ts にクラスを追加
4. 画面で「Raw / Merged / Preview」を確認

実装メモ

Tailwind v4(CSS First Configurations)

src/1_tailwind.css に @theme とカスタムユーティリティをまとめています。

マージ設定

src/2_tw-merge-config.ts で extendTailwindMerge を使い、独自グループなどを定義。

export const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      text: ["body", "hero", "micro"],
    },
    classGroups: {
      surface: [{ surface: ["paper", "ink", "brand"] }],
    },
  },
});

クラス入力

src/3_playground-classes.ts の classInputs を編集します。
各要素が1行分として表示され、すべてまとめて twMerge に渡します。

export const classInputs = [
  "p-8 p-4", // p-4
  "surface-paper surface-ink surface-brand", // surface-brand
  "text-red text-xs text-hero text-paper", // text-hero text-paper
];

まとめ

tailwind-mergeの挙動確認が簡単にできるので、検証がとても楽になります。
気になったらStackBlitzで触ってみてください。