TailwindCSS v4 (Alpha) を試してみた

このブログでは、現在開発中の TailwindCSS v4 を導入している。 Viteプラグインとして直接動作するため、postcss.config.js や tailwind.config.js が（基本的には）不要になるという劇的な変化がある。

v4では、設定をJavaScriptではなくCSSファイル自体に書くスタイルが推奨されている。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-primary: oklch(0.85 0.15 100);
  
  --breakpoint-3xl: 1920px;
}

CSS変数 (--) ベースでテーマを拡張できるのが直感的。また、Just-in-Time エンジンがRustで書き直されており、ビルド速度も体感できるレベルで向上している。本番投入はまだ時期尚早かもしれないが、個人ブログなら積極的に使っていきたい面白さがある。