浏览器支持 - 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.

当你不确定是否支持不熟悉的 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: {},
  }
}

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

¥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.

​浏览器前缀

目录

浏览器前缀