Tailwind CSS v4 で preflight の無効化が上手くできなかった。

Next.js 15 の自サイト制作において、CSS Modules をメインにして、ちょっとした即席部分は Tailwind CSS にする方向にしたのだが問題が発生した。

問題は Tailwind を使用すると preflight という Tailwind のCSSリセットが効いてしまうことだ。
自分的には normalize.css のような感じが好みでなので、何でもかんでもマージン、パディング 0 やスタイル無効になるのが好みではない。

ということで、normalize.css をリセットCSSとして使用し、Tailwind の preflight は無効にしようと以下の通り（公式ドキュメント通り）にやったが、今度は Tailwind の使いたい部分まで使えなくなってしまった。

// global.css

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
- @import "tailwindcss/preflight.css" layer(base); // ←この行を削除
@import "tailwindcss/utilities.css" layer(utilities);

いろいろ試してみても Tailwind v4.1 では上手くいかなかったので、v3.4.17 をインストールし、tailwind.config.js に以下を記述したらとりあえずは上手くいきそうな感じになった。

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

制作途中でまた不具合になるかもしれないが、そうなったら CSS Modules のみの使用に絞ることにする。