了解Tailwind支持哪些浏览器以及如何管理供应商前缀。
一般来说,Tailwind CSS v3.0是为Chrome、Firefox、Edge和Safari的最新稳定版本设计和测试的。它不支持任何版本的IE,包括IE 11。
虽然Tailwind CSS中的大多数功能都可以在所有现代浏览器中使用,但Tailwind还包括一些尚未被所有浏览器支持的前沿功能的API,例如“:focus visible”伪类和“background 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: {
tailwindcss: {},
autoprefixer: {},
}
}
要了解有关指定需要支持哪些浏览器的更多信息,请查看Browserslist which is the standard way to define target browsers in front-end tooling.