Skip to content

浏览器支持

了解 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 前缀才能在大多数浏览器中工作:

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

如果您使用的是 Tailwind CLI 工具,则会自动添加此类浏览器前缀。

如果没有,我们建议您使用 Autoprefixer,这是一个 PostCSS 插件,可以根据您告诉它需要支持的浏览器,自动添加任何必要的供应商前缀。

要使用它,请通过 npm 安装:

sh
npm install -D autoprefixer

然后将其添加到 PostCSS 配置中插件列表的末尾:

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

要了解有关指定您需要支持的浏览器的更多信息,请查看 Browserslist,这是在前端工具中定义目标浏览器的标准方法。

Released under the MIT License.