开始使用
了解 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,这是在前沿工具中定义目标浏览器的标准方法。