Tailwind.css V4を試してみた!

今年の1月にアップデートされたTailwind CSSを今さらながら触ってみました。機能追加で使い勝手がかなり良くなったと聞いていましたが、実際に使ってみてその理由がよく分かりました。

最初に。Tailwind.cssとは？

Tailwind.cssとは、ユーティリティークラスを活用したcssフレームワークです。
HTMLのクラス名に下記のような希望のスタイルを指定すると、デザインが反映されていくというものです。

例：`
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
  footer
</footer>

近いものとしてよくBootstrapがあげられますが、明確な違いはカスタマイズ性になります。
Bootstrapもcomponentされたものをカスタマイズしていくことはできますが、基本的には上書きして設定することになります。
その点、Tailwind.cssでは設定ファイルからシステム全体のカスタマイズが可能です。

これらの違いにより、事前用意されたcomponentがあるBootstrapでは難しいデザインのサイトでもTailwind.cssは対応が可能であり一貫したデザインを効率的に作成できるという利点があります。

また、単純なレイアウトのみならず、レスポンシブデザインや3D変換・アニメーションなども追加で来ます。

Tailwind.css V4の特徴

とても便利なTailwind.cssですが、2025.01にV4がリリースされました。
大きな機能追加があり、主な変更点は以下の通りです。

PostCSS 依存の削除

• postcss.config.js や autoprefixer の設定が不要に。
• Tailwind 独自のビルドエンジンにより、導入がよりシンプルに。

tailwind.config.js の自動生成がシンプルに

• インストールプロセスが大幅に簡素化。
• 初期設定ファイルもミニマルになり、よりスムーズな導入が可能。

スタイルの適用優先度が強化（Layer Ordering の調整）

• @layer base → components → utilities の適用順が明確に。
• 意図しないスタイルの上書きを防ぎやすくなりました。

スタイル関連の新機能追加

• カラーパレットの追加 : sRGB色空間では表現できなかった、より鮮やかな色表現が可能に。
• コンテナクエリ対応 : プラグイン不要で、ネイティブな@containerクエリが使用可能。
• 3D Transformユーティリティ : rotateX, rotateY, rotateZ などの3D変換クラスが追加。
• グラデーションAPIの拡張 : 通常グラデーションに加えて、角度の指定が可能に。
• @starting-style のサポート : JSを使わずに、ページ表示時にアニメーションの初期スタイルを指定可能。
• not バリアントの追加 : 否定疑似クラス:not()に対応し、柔軟な条件指定が可能に。

※ ちなみにv4.1も2025.04にリリースされています。今まで非対応だったテキストシャドウやmask機能も対応したとのことです！

Tailwind.cssのインストール方法

v4からインストールはより手軽になりました。

# TailwindCSS v4のインストール
npm install tailwindcss@next

# Oxide Engineの確認
npx tailwindcss --help# "Powered by Oxide Engine" の表示を確認

• 参考ページ：公式サイト

おすすめツール

Tailwind.cssを使うにあたって、必須ともいえるツールを紹介いたします。
まずはこちら。

Tailwind CSS IntelliSense
Tailwind.cssを使用時には、必ず入れたいvscodeの拡張機能です。
htmlにてクラス名を自動で保管できるようになります。Tailwind.cssではユーティリティークラスを適宜あてがっていく必要がありますが、この拡張機能を使えばすべて記載する必要がないため、非常に効率的に作業できます。
Tailwind CSS IntelliSense

公式サイト
Tailwind.cssは公式サイトが充実しているので、ユーティリティークラスをうっかり忘れたときもそちらで検索かけても簡単にヒットします。
公式サイト

チートシート一覧バージョン
ただ、上記ページはかなりの量があるので、よく使うcodeがまとめられたチートシートも存在しています。
適宜使いやすいほうで確認いただくとよいかと思います。
一覧チートシート

まとめ

Tailwind CSSを実際に使ってみると、HTMLにクラスを直接書くだけでスタイルが完結するため、表示結果が固定されていて確認しやすく、作業の見通しが良くなります。
デメリットとして挙げられがちな「クラス名の長さ」も、実際に使ってみるとそれほど気になりません。BEMのようなクラス設計でも冗長になることはあるため、Tailwindに特有の問題とは感じにくいです。
また、クラス名を考える必要がなく、拡張機能のショートカットなどを活用すれば、直感的にどんどん適用できる点も大きな魅力です。慣れるまでは少し時間がかかりますが、ユーティリティクラスに慣れれば、作業効率の向上につながると実感しました。