您现在的位置是:首页 > 文章详情

Tailwind CSS v3.2 发布,支持动态断点、多配置和容器查询

日期:2022-10-23点击:221

Tailwind CSS v3.2 带来了大量的新内容,包括对动态断点的支持、单个项目中的多个配置文件、容器查询等等。

一个项目中使用多个配置文件

添加了一个新的 @config指令,开发者可以在 CSS 文件中使用该指令来指定用于该文件的 Tailwind CSS 配置:

 @config "./tailwind.admin.config.js" @tailwind base; @tailwind components; @tailwind utilities; 

这使得在具有单独 Tailwind 配置的单个项目中构建多个样式表变得更加容易。例如,你可能有一个配置文件用于站点面向客户的部分,而另一个配置用于管理/后端区域。

新的 @config指令更加简单易用,即使在你对构建工具配置没有太多控制的项目中也是如此。

基于浏览器的样式支持

现在可以根据用户浏览器是否支持某个功能来有条件地设置样式 supports-[...]变体,生成 [@supports rules](<https://developer.mozilla.org/en-US/docs/Web/CSS/@supports>)

 <div class="flex supports-[display:grid]:grid ..."> <!-- ... --> </div> 

supports-[...]变体在方括号之间接受你在@supports (...) 中使用的任何东西,例如属性/值对,甚至使用表达式 andor.

ARIA 属性变体

现在可以使用新的 aria-*变体,基于 ARIA 属性有条件地设置样式。例如,您可以根据 aria-checked状态是否是 true 来更新元素的背景颜色:

 <span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox"> <!-- ... --> </span> 

数据属性变体

现在可以使用新 data-*变体,基于 Date 属性有条件地设置样式。

 <!-- Will apply --> <div data-size="large" class="data-[size=large]:p-8"> <!-- ... --> </div> <!-- Will not apply --> <div data-size="medium" class="data-[size=large]:p-8"> <!-- ... --> </div> <!-- Generated CSS --> <style> .data-\\[size\\=large\\]\\:p-8[data-size="large"] { padding: 2rem; } </style> 

最大宽度和动态断点

添加了一个新的 max-* 变体,允许根据配置的断点应用最大宽度媒体查询:

 <div class="max-lg:p-8"> <!-- Will apply `p-8` until the `lg` breakpoint kicks in --> </div> 

作为一般规则,仍然建议个人使用 min-width 断点,但此功能确实带来了一个有用的工作流程优势,即不必在不同的断点撤消某些样式。

动态 group-* 和 peer-* 变体

现在可以通过将自己的选择器传递到方括号之间,来创建自定义 group-*peer-* 变体,

 <div class="group is-published"> <div class="hidden group-[.is-published]:block"> Published </div> </div> 

容器查询

已实现容器查询(container queries),Tailwind CSS 发布了一个新的第一方插件 @tailwindcss/container-queries,它为框架添加了容器查询支持,使用新的 @ 语法将它们与普通媒体查询区分开来:

 <div class="@container"> <div class="block @lg:flex"> <!-- ... --> </div> </div> 

更多详情可查看:https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0

原文链接:https://www.oschina.net/news/214675/tailwind-css-3-2-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章