Tailwind CSS v4 で導入された、CSS First Configurationsについて

はじめに

何の気なしにインストールしてしまった、Tailwind CSS v4。
tailwind.config.js がなくなっていることに気がつきました。
どうやらアップデートがあったようなのでシェアします！

CSS First Configurations とは？

今まで、テーマなどの設定は tailwind.config.js で行っていましたが、Tailwind CSS V4からは、CSSファイル内で直接行えるようになったようです。

例えば、こんな感じで設定していた　tailwind.config.js は、

export default {
  theme: {
    extend: {
      colors: {
        daidai: "#ee7800",
        azuki: "#96514d",
      },
    },
  },
}

v4からは、globals.css に、こんな感じで書けるようです。

@import "tailwindcss";
 
@theme {
  --color-daidai: #ee7800;
  --color-azuki: #96514d;
}

そして、このような形で呼び出すことができます。

<p className="bg-azuki text-daidai">Discover and deploy boilerplate example Next.js projects.</p>

さいごに

シンプルになっていいなと思う反面、昔の方法で実装されたデザインを参考にさせていただく際など、読み替えるのが少し手間かなと感じました。

ただ、慣れかなとも思うので、これを機に活用していこうかなと思います！

もしお気づきの点があれば、ぜひぜひコメントいただけましたら幸いです！