浏览器支持 - Tailwind CSS 中文网

总体而言，Tailwind CSS v3.0 旨在并已在最新稳定版的 Chrome、Firefox、Edge 和 Safari 上进行测试。它不支持任何版本的 IE，包括 IE 11。

🌐 In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.

虽然 Tailwind CSS 中的大多数功能在所有现代浏览器中都能使用，但 Tailwind 还包括一些前沿功能的 API，这些功能尚未被所有浏览器支持，例如 :focus-visible 伪类和 backdrop-filter 工具类。

🌐 While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren’t yet supported by all browsers, for example the :focus-visible pseudo-class and backdrop-filter utilities.

由于 Tailwind 是一个低级框架，如果你无法使用某些功能，只需不使用不支持的工具类或修饰符就可以轻松避免这些功能，这就像你在 CSS 中本来就不会使用那些 CSS 功能一样。

🌐 Since Tailwind is such a low-level framework, it’s easy to avoid these features if you can’t use them by simply not using the utility or modifier that’s not supported, much like how you just wouldn’t use those CSS features in your CSS.

Can I Use 数据库是一个很好的资源，当你不确定某个不熟悉的 CSS 功能是否被支持时可以参考它。

🌐 The Can I Use database is a great resource when you’re unsure about the support for an unfamiliar CSS feature.

浏览器前缀(Vendor Prefixes)

许多 CSS 属性需要浏览器前缀才能被浏览器识别，例如 background-clip: text 在大多数浏览器中需要 -webkit 前缀才能正常工作：

🌐 Many CSS properties require vendor prefixes to be understood by browsers, for example background-clip: text needs the -webkit prefix to work in most browsers:

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

如果你使用 Tailwind CLI 工具，这样的供应商前缀将会自动添加。

🌐 If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically.

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

🌐 If not, we recommend that you use Autoprefixer, which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support.

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

🌐 To use it, install it via npm:

npm install -D autoprefixer

然后将其添加到 PostCSS 配置中插件列表的最后一项：

🌐 Then add it to the very end of your plugin list in your PostCSS configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

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

🌐 To learn more about specifying which browsers you need to support, check out Browserslist which is the standard way to define target browsers in front-end tooling.

​浏览器前缀(Vendor Prefixes)

目录

浏览器前缀(Vendor Prefixes)