ブラウザサポート

一般的に、Tailwind CSS v3.0 は、Chrome、Firefox、Edge、Safari の最新の安定バージョン向けに設計され、テストされています。IE 11 を含む、IE のどのバージョンもサポートしていません。

Tailwind CSS のほとんどの機能はすべてのモダンブラウザで動作しますが、Tailwind には、まだすべてのブラウザでサポートされていない最先端の機能のための API も含まれています。たとえば、:focus-visible 疑似クラスと backdrop-filter ユーティリティです。

Tailwind は非常に低レベルのフレームワークであるため、CSS でこれらの CSS 機能を使用しないのと同じように、サポートされていないユーティリティやモディファイアを使用しないことで、これらの機能を使用できない場合に簡単に回避できます。

Can I Use データベースは、使い慣れていない CSS 機能のサポートについて不明な場合に最適なリソースです。

---

​ベンダープレフィクス

多くの CSS プロパティは、ブラウザで理解されるためにベンダープレフィックスが必要です。たとえば、background-clip: text は、ほとんどのブラウザで動作するために -webkit プレフィックスが必要です。

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

Tailwind CLI ツールを使用している場合、このようなベンダープレフィックスは自動的に追加されます。

そうでない場合は、Autoprefixer を使用することをお勧めします。これは、サポートする必要があると指定したブラウザに基づいて、必要なベンダープレフィックスを自動的に追加する PostCSS プラグインです。

使用するには、npm 経由でインストールします。

npm install -D autoprefixer

次に、PostCSS 設定のプラグインリストの最後に追加します。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

サポートする必要があるブラウザの指定方法の詳細については、フロントエンドツールでターゲットブラウザを定義するための標準的な方法である Browserslist を参照してください。