Tailwind CSS v3.2 发布,支持动态断点、多配置和容器查询
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 (...)
中使用的任何东西,例如属性/值对,甚至使用表达式 and
和 or
.
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

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Dgraph v22.0 发布,具有图形后端的原生 GraphQL 数据库
Dgraph 是一个水平可扩展的分布式 GraphQL 数据库,有一个图形后端。作为一个原生的 GraphQL 数据库,它严格控制数据在磁盘上的排列方式,以优化查询性能和吞吐量,减少集群中的磁盘寻道和网络调用。 Dgraph v22.0.0 发布后将停止对 v21.12.0 的支持,这对任何从 v21.12.0 转移到 v22.0.0 的用户来说都是一个重大的变化。用 v21.12 创建的数据文件与 v22.0.x 不兼容。 修复 GraphQL fix(GraphQL): 优化 eq 过滤器查询 fix(GraphQL): 添加空值的验证,以正确的 graphql 规则验证顺序 fix(GraphQL):修复带有 ID 过滤器的 auth 查询重写 EDgraph fix(query): 防止同一谓词(predicate)的多个条目可能导致不一致的状态, 安全问题 CVE 修复(共 417 个) GHSA (共 5 个) 变化 CI Test Infrastructure 配置为与 Github Actions 一起运行 测试线束的稳定性改进 启用了 Unit/Integration...
- 下一篇
Spring Batch 5.0 RC1 发布
Spring Batch 5.0 发布了首个 RC 版本。 Spring Batch 是一个轻量级且功能全面的批处理框架,使用 Spring 和 Java 编写离线和批处理应用程序,旨在为开发对企业系统日常运行至关重要的批处理应用程序提供支持。 此版本包含两个主要变化: 改进执行上下文元数据 (Execution context Meta-data) 除了 Spring Batch 已经在执行上下文中保存的运行时信息(如步骤类型、重启标志等)外,该版本在执行上下文中增加了一个重要的细节,即用于序列化上下文的 Spring Batch 版本。此项变化有助于解决在调试有关执行上下文序列化和反序列化的升级问题。 移除GemFire 支持 由于 Spring Data 已停止支持 Apache Geode,因此 Spring Batch 中对 Apache Geode 的支持也被移除了。作为社区工作的存档,这些代码已被移动至spring-batch-extensions仓库。 最后,开发团队计划在 11 月初推出第二个 RC 版本,并在 11 月底之前正式发布 5.0.0 GA,保持与 Spr...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Docker安装Oracle12C,快速搭建Oracle学习环境