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 (...) 中使用的任何东西,例如属性/值对,甚至使用表达式 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


相關推薦

2021-12-13

Tailwind CSS v3.0 已正式发布,新版本在性能和工作流优化方面带来了巨大的提升,同时还增加了大量新特性。 Tailwind CSS v2.0 主要更新内容: 默认启用 Just-in-Time — 闪电般的快速构建时间、可堆叠的变体、支持生成任意样

2023-03-31

Tailwind CSS v3.3 带来了大量的新内容,更新内容如下: 扩展的深色调色板: 在 Tailwind CSS v3.3 中,为每一种颜色都增加了一个新的950色调,这是一种更加深的色调 ESM 和 TypeScript 支持: 现在可以在 ESM 和 TypeScript 中配置 Tai

2023-02-16

ion links() { return [{ rel: "stylesheet", href: stylesheet }]; } 内置 Tailwind 支持 现在可以得到你的 Tailwind 样式,而无需运行一个单独的进程。与 PostCSS 一样,你需要使用 future.unstable_tailwind 标志选择加入(目前)。 微调服务器构建 Remix

2024-07-16

community/datacap Shadcn UI Vue Admin 是一个使用 Shadcn UI (基于 Tailwind CSS) 和 Vite 和 Vue 制作的管理面板。在构建时考虑了响应能力和可访问性。 本次版本为公开版本,支持了 Tree 和 Timeline 模版功能。以下是该模版的目

2023-05-16

tcss.config.js存在,就可以使用 PostCSS 处理所有 CSS 文件。 Tailwind 1.16.0版本通过remix.config.js中新的tailwind选项稳定了内置的 Tailwind 支持。因此,future.unstable_tailwind选项也被废弃了。 tailwind选项默认为false,但是当设置为true时,如

2022-08-11

他特性: 自带组件框架:Astro 为 React、Vue、Svelte 和 Tailwind CSS 等前端工具提供一级支持。通过 astro add 命令即可添加使用 支持静态页面生成 (SSG) 和服务器端渲染 (SSR),可以按需渲染内容 开发者体验出众:Astro 支

2024-02-05

发和维护过程的提质降本增效。 Diboot 3.2.0版本已于近期发布,对照我们对V3的架构设想,最后一块拼图(页面设计转代码)已经顺利完成,至今,Diboot 已实现理想中的低代码解决方案:零代码、低代码、纯代码 自由切换顺畅融

2024-04-18

goview列表页/设计页与admin-ui项目间授权相关优化 goview发布后的页面与项目间的授权支持   适配支持以下数据库: PostgreSql、金仓Kingbase(Postgres模式) Oracle 12c+ 达梦DM8 SqlServer 2017+ 升级 Spring boot 至 v

2024-09-22

免维护等优点。   go-fastdfs 分布式文件系统 v1.4.6 发布,修复删除空目录引起的bug 注意:使用前请认真阅读 使用文档 或 视频教程。 优点 支持 curl 命令上传 支持浏览器上传 支持 HTTP 下载 支持多机自

2023-01-08

te 用户可为现有问题投票,或在此处创建一个新问题。 Tailwind CSS 插件配置。 对于 Tailwind CSS,希望能够配置自定义类名补全上下文 (WEB-48505)、自定义配置文件路径 (WEB-56546),以及一些其他选项。 一种更出色的文件引用处理方

2024-09-28

无中心、免维护等优点。 go-fastdfs 分布式文件系统 v1.4.7 发布,增加(删除文件名特殊字符)enable_trim_file_name_special_char选项 注意:使用前请认真阅读 使用文档 或 视频教程。 优点 支持 curl 命令上传 支持浏览器上

2024-08-10

支持深色模式,方便定制主题; 丰富的CSS工具类:基于Tailwind CSS提供了丰富的CSS工具类,包括特别的语义化外观工具类,轻松实现常见布局、文字排版、动画、外观定义; 大量实用的组件:包括必备的纯CSS实现的基础组件,

2023-07-26

他特性: 自带组件框架:Astro 为 React、Vue、Svelte 和 Tailwind CSS 等前端工具提供一级支持。通过astro add命令即可添加使用 支持静态页面生成 (SSG) 和服务器端渲染 (SSR),可以按需渲染内容 开发者体验出众:Astro 支持所有喜

2024-08-09

ThinkORM是一个基于PHP和PDO的数据库中间层和ORM类库,早期作为ThinkPHP的一个核心组件现已独立出来,以优异的功能和突出的性能著称,提供了更优秀的性能和开发体验,最新版本要求PHP8.0+。 更新日志 详细更新日志可以参考 更