一般來說,Tailwind CSS v3.0 針對 Chrome、Firefox、Edge 和 Safari 的最新穩定版本進行設計和測試。它不支援任何版本的 IE,包括 IE 11。

雖然 Tailwind CSS 中的大部分功能都可以在所有現代瀏覽器中使用,但 Tailwind 也包含了幾個尚未獲得所有瀏覽器支援的尖端功能的 API,例如 :focus-visible 偽類別和 backdrop-filter 實用程式。

由於 Tailwind 是一個如此低階的框架,因此如果你無法使用某個功能,只要不使用不支援的實用程式或修改器,就可以輕鬆避免這些功能,就像你不會在 CSS 中使用這些 CSS 功能一樣。

當你對不熟悉的 CSS 功能的支援不確定時,Can I Use 資料庫是一個很棒的資源。


供應商前綴

許多 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,這是前端工具中定義目標瀏覽器的標準方式。