浏览器支持

了解 Tailwind CSS 支持哪些浏览器以及如何管理供应商前缀。

一般来说，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 前缀才能在大多数浏览器中工作。

  1. .bg-clip-text {
  2.   background-clip: text;
  3.   -webkit-background-clip: text;
  4. }

如果您正在使用Tailwind CLI工具，则会自动添加此类供应商前缀。

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

要使用它，请通过npm安装：

npm install -D autoprefixer

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

  1. module.exports = {
  2.   plugins: [
  3.     require('tailwindcss'),
  4.     require('autoprefixer'),
  5.   ]
  6. }

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