Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】

はじめに

2024年3月7日、TailwindCSS v4-alphaが公開されました🎉

TailwindCSS v4では、ViteプロジェクトにTailwind CSSを導入する際に必要な設定が減り、今までよりも簡単にインストールできるようになりました。

Playing with an early Tailwind CSS v4 alpha in a @vite_js project —

🚫 No `postcss.config.js file
🚫 No `tailwind.config.js` file
🚫 No configuring `content` globs
🚫 No `@​tailwind` directives in your CSS

The future is clean ✨

Hoping to open-source this week for the bold 🤙🏻 pic.twitter.com/zY7vyF1iTs

— Adam Wathan (@adamwathan) March 3, 2024

この記事では、実際にVIteプロジェクトにTailwindCSS v4-alphaを導入して、設定方法の変更点を確認します。

Vite + TailwindCSS v4環境の構築

今回はTypeScript、フレームワークを使用しないVanilla環境を作成します。

Viteプロジェクトの作成

Viteプロジェクトの作成

ディレクトリの移動

TailwindCSS v4のインストール

TailwindCSSとViteプラグインのインストール

vite-config.jsを以下の内容で作成

style.cssの先頭に以下を追加

設定はこれだけです。
次に実際に動作するか確認します。

動作確認

開発サーバの起動

以下の画面が表示されます。

初期画面

index.htmlにTailwindCSSのクラスを追加してみます。

bg-blackが有効になっている

bg-blackが有効になって背景色が黒色になりました。

v3とのインストール方法の違い

TailwindCSS v3のインストール手順は、以下に記載されています。

v3→v4の変化は以下の通りです。

tailwind.config.jsがないとブレークポイントや色のカスタマイズができないと思われるかもしれませんが、そこはCSS変数で設定できるようになっています。

プラグインやカスタムユーティリティの追加は、正式版までに何らかの方法で追加できるようになるとのことです。

まとめ

この記事ではViteプロジェクトにTailwindCSS v4-alphaを導入してみて、設定方法がどのように変更になったのかを確認しました。

TailwindCSS v4では他にも機能追加や改善があるようなので、正式リリースが楽しみです。

参考

• Open-sourcing our progress on Tailwind CSS v4.0