はじめに
ブラウザのサポートと他のツールとの互換性について学びます。
Tailwind CSS v4.0 はモダンブラウザ向けに設計・テストされており、フレームワークのコア機能は特にこれらのブラウザバージョンに依存しています。
Tailwind は、field-sizing: content、@starting-style、text-wrap: balance など、ブラウザのサポートが限られている最先端のプラットフォーム機能もサポートしています。これらのモダンな機能をプロジェクトで使用するかどうかはあなた次第です。— 対象のブラウザがサポートしていない場合は、これらのユーティリティとバリアントを使用しなければ問題ありません。
最新のプラットフォーム機能のサポートについて不明な点がある場合は、「Can I use」データベースが非常に役立ちます。
Tailwind CSS v4.0 は、特定のワークフロー向けに設計されたフル機能の CSS ビルドツールであり、Sass、Less、Stylus などの CSS プリプロセッサと併用するようには設計されていません。
Tailwind CSS 自体をプリプロセッサと考えてください — Sass を Stylus と併用しないのと同じ理由で、Tailwind を Sass と併用すべきではありません。
Tailwind はモダンブラウザ向けに設計されているため、実際にはネストや変数などのためにプリプロセッサは不要であり、Tailwind 自体がインポートをバンドルしたり、ベンダープレフィックスを追加したりします。
Tailwind は、@import でインクルードした他の CSS ファイルを自動的にバンドルするため、Sass や postcss-import のような別のプリプロセッシングツールは不要です。
@import "tailwindcss";@import "./typography.css";この例では、typography.css ファイルは、Sass や postcss-import のような他のツールなしで、Tailwind によってコンパイルされた CSS にバンドルされます。
すべてのモダンブラウザは、プリプロセッサを必要とせずに、ネイティブ CSS 変数をサポートしています。
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind は内部的に CSS 変数に大きく依存しているため、プロジェクトで Tailwind を使用できる場合は、ネイティブ CSS 変数を使用できます。
Tailwind は内部で Lightning CSS を使用して、次のようなネストされた CSS を処理します。
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind は、そのネストされた CSS をフラット化して、すべてのモダンブラウザで理解できるようにします。
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}ネイティブ CSS ネストのサポートも最近は非常に優れているため、Tailwind を使用していなくても、ネストのためにプリプロセッサは実際には不要です。
Tailwind では、過去にループを使用していた可能性のあるクラスの種類（col-span-1、col-span-2 など）は、事前に定義する必要はなく、使用するたびに Tailwind によってオンデマンドで生成されます。
さらに、Tailwind CSS で何かを構築する場合、CSS ファイルではなく、HTML でスタイリングの大部分を行います。そもそも大量の CSS を記述しないため、プログラムで大量のカスタム CSS ルールを生成するために設計されたループのような機能は必要ありません。
Sass や Less などのプリプロセッサを使用する場合、色を調整するために darken や lighten などの関数を使用していたかもしれません。
Tailwind を使用する場合、推奨されるワークフローは、フレームワークに含まれている専門的に設計されたデフォルトカラーパレットのように、各色の明るい色合いと暗い色合いを含む事前定義されたカラーパレットを使用することです。
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>また、color-mix() のような最新の CSS 機能を使用して、ブラウザで直接実行時に色を調整することもできます。これにより、CSS 変数や currentcolor キーワードを使用して定義された色も調整できます。これはプリプロセッサでは不可能です。
同様に、ブラウザは min()、max()、round() などの数学関数をネイティブでサポートするようになったため、これらの機能のためにもはやプリプロセッサに頼る必要はありません。
Tailwind は CSS Modules と互換性があり、すでに CSS Modules を使用しているプロジェクトに Tailwind を導入する場合、CSS Modules と共存できますが、可能な限り CSS Modules と Tailwind を一緒に使用することはお勧めしません。
CSS Modules は、カスタム CSS を記述する代わりに HTML でユーティリティクラスを構成する場合に存在しないスコープの問題を解決するために設計されています。
スタイルは Tailwind で自然にスコープされます。なぜなら、各ユーティリティクラスは、どこで使用されても常に同じことを行うからです — UI のある部分にユーティリティクラスを追加することで、他の場所で予期しない副作用が生じるリスクはありません。
CSS Modules を使用する場合、Vite、Parcel、Turbopack などのビルドツールは、各 CSS Module を個別に処理します。つまり、プロジェクトに 50 個の CSS Module がある場合、Tailwind は 50 回別々に実行する必要があり、ビルド時間が大幅に遅くなり、開発者エクスペリエンスが悪化します。
CSS Modules はそれぞれ個別に処理されるため、グローバルスタイルをインポートしない限り、@theme はありません。
これは、グローバルスタイルを参照として明示的にインポートしない限り、@apply のような機能が期待どおりに動作しないことを意味します。
テーマ変数が定義されていることを確認するために、グローバルスタイルを参照としてインポートしてください。
@reference "../app.css";button { @apply bg-blue-500;}または、@apply の代わりに CSS 変数を使用することもできます。これには、Tailwind がこれらのファイルの処理をスキップして、ビルドパフォーマンスを向上させるという追加の利点があります。
button { background: var(--color-blue-500);}Vue、Svelte、および Astro は、コンポーネントファイルで <style> ブロックをサポートしています。これは CSS Modules と非常によく似た動作をし、ビルドツールによって完全に個別に処理され、同じ欠点がすべてあります。
これらのツールで Tailwind を使用している場合、コンポーネントの <style> ブロックを避け、Tailwind が意図されている方法で、マークアップでユーティリティクラスを使用してスタイリングすることを推奨します。
<style> ブロックを使用する場合は、@apply のような機能を期待どおりに動作させるために、グローバルスタイルを参照としてインポートしてください。
テーマ変数が定義されていることを確認するために、グローバルスタイルを参照としてインポートしてください。
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>または、@apply のような機能の代わりに、グローバルに定義された CSS 変数を使用するだけで、Tailwind がコンポーネント CSS をまったく処理する必要はありません。
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>