入門
了解 Tailwind 支援哪些瀏覽器,以及如何管理供應商前綴。
一般來說,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,這是前端工具中定義目標瀏覽器的標準方式。