Tailwind CSS 2.2 发布,新增 CLI 和 JIT 功能
发布时间:作者: Paul Redmond
Tailwind v2.2 刚刚发布,带来了全新的 Tailwind CLI 工具,大量的使用 JIT 引擎的新功能,以及更多内容。让我们一起来看看一些新功能。
全新的 Tailwind CLI
Tailwind 团队从头开始发布了一个全新的 tailwindcss
CLI,添加了一些不错的功能,使其方便地立即使用 Tailwind。
npx tailwindcss \ -o dist/tailwind.css \ --watch \ --jit \ --purge="./src/**/*.html"
上面的例子来自 发布说明,展示了新的 watch 模式,一个用于使用 JIT 模式构建 Tailwind 的 --jit
标志,以及用于移除未使用类的 --purge
标志。CLI 也向后兼容以前的 CLI。
查看 更新的 CLI 文档,了解更多关于使用此选项在不使用任何外部构建工具的情况下使用 Tailwind 的信息。
使用 JIT 样式化伪元素
Tailwind 现在使用即时模式对样式化伪元素提供了第一方支持。
<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div> <!-- customize pseudo content value --><div class="before:content-['hello'] before:block ..."></div>
由于 JIT 编译器在 Tailwind CSS v2.1 中被添加到核心,许多新功能可以在不增加 Tailwind 构建总体重量的情况下利用此功能。也就是说,使用此功能需要 JIT 模式。
兄弟选择器变体
新的 peer-*
变体针对兄弟元素,这对于根据其他兄弟元素的状态对元素进行样式化很有用。发布说明中提供的示例是在选中兄弟复选框时对元素进行样式化。
<label> <input type="checkbox" class="peer sr-only"> <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500"> <!-- ... --></label>
了解更多
Tailwind 2.2.0 版本发布了许多新的实用功能,这得益于 JIT 引擎。您可以在下面查看完整的最新功能和更新列表,以及 v2.1.4 和 v2.2.0 之间的差异。
如果您更喜欢直观的学习方式,Simon Vrachliotis 的 Tailwind CSS v2.2 新功能 将为您提供帮助。
以下发布说明直接来自 更改日志
2.2.0
更改
-
JIT: 默认使用“跟踪”上下文而不是“观察”上下文,以提高大多数捆绑程序的可靠性 (#4514)
根据您使用的工具,您可能需要显式设置
TAILWIND_MODE=watch
,直到您的构建运行程序更新以支持 PostCSS 的dir-dependency
消息类型。
添加
- 添加
background-origin
工具 (#4117) - 提高处理大量 CSS 源的项目中的
@apply
性能 (#3178) - JIT: 如果禁用颜色不透明度工具,则不要将 CSS 变量用于颜色工具 (#3984)
- JIT: 重新设计
matchUtilities
API,使其更适合第三方使用 (#4232) - JIT: 支持应用重要的工具变体 (#4260)
- JIT: 支持在无法检测类型时强制转换任意值 (#4263)
- JIT: 支持在
purge
配置中使用raw
语法 (#4272) - 添加
empty
变体 (#3298) - 将
modern-normalize
更新到 v1.1 (#4287) - 在内部实现
theme
函数,删除postcss-functions
依赖项 (#4317) - 添加
screen
函数以提高嵌套插件的兼容性 (#4318) - JIT: 添加通用的简写颜色不透明度语法 (#4348)
- JIT: 添加
@tailwind variants
指令以替换@tailwind screens
(#4356) - JIT: 在
TAILWIND_DISABLE_TOUCH
模式下支持 PostCSSdir-dependency
消息 (#4388) - JIT: 添加每边边框颜色工具 (#4404)
- JIT: 添加对
before
和after
伪元素变体和content
工具的支持 (#4461) - 添加新的
transform
和extract
API 以简化 PurgeCSS/JIT 自定义 (#4469) - JIT: 添加详尽的伪类和伪元素变体支持 (#4482)
- JIT: 添加
caret-color
工具 (#4499) - 将
lightBlue
重命名为sky
,在使用弃用名称时发出控制台警告 (#4513) - 具有改进的 JIT 支持、
--watch
模式等的新的 CLI (#4526, 4558) - JIT: 添加新的
peer-*
变体,用于根据兄弟状态进行样式化 (#4556) - 将
safelist
作为purge
下的顶级选项公开,适用于 JIT 和经典引擎 (#4580) - JIT: 使用
scale-*
、rotate-*
等类时,不再需要transform
类 (#4604) - JIT: 使用
contrast-*
、backdrop-blur-*
等类时,不再需要filter
和backdrop-filter
类 (#4614) - 支持在 Tailwind CLI 中传递 PostCSS 配置的自定义路径 (#4607)
- 默认添加
blur-none
,打算弃用blur-0
(#4614)
修复
- JIT: 提高对 Svelte 类绑定的支持 (#4187)
- JIT: 提高对
calc
和var
在任意值中的支持 (#4147) - 在为不透明度支持转换时,将
hsl
颜色转换为hsla
,而不是rgba
(#3850) - 修复未生成
backdropBlur
变体 (#4188) - 改进动画值解析 (#4250)
- 在散列配置时忽略未知对象类型 (82f4eaa)
- 确保变体对于具有顺序依赖工具的插件正确分组 (#4273)
- JIT: 当节点临时目录保存在与项目本身不同的驱动器上时,修复临时文件存储 (#4044)
- 支持边框不透明度工具以及默认的
border
工具 (#4277) - JIT: 修复扩展的
@tailwind
指令的源映射 (2f15411) - JIT: 在折叠相邻规则时忽略空白 (15642fb)
- JIT: 使用自定义分隔符时,正确生成组父类 (#4508)
- JIT: 修复多个
group
变体的错误堆叠 (#4551) - JIT: 修复由于保留未使用上下文而导致的内存泄漏 (#4571)
内部
- 为流行的构建运行程序添加集成测试 (#4354)