Tailwind CSS 2.2 发布,新增 CLI 和 JIT 功能

发布时间:作者:

Tailwind CSS 2.2 is Now Here With a New CLI and JIT Features image

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 VrachliotisTailwind 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 模式下支持 PostCSS dir-dependency 消息 (#4388)
  • JIT: 添加每边边框颜色工具 (#4404)
  • JIT: 添加对 beforeafter 伪元素变体和 content 工具的支持 (#4461)
  • 添加新的 transformextract 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-* 等类时,不再需要 filterbackdrop-filter 类 (#4614)
  • 支持在 Tailwind CLI 中传递 PostCSS 配置的自定义路径 (#4607)
  • 默认添加 blur-none,打算弃用 blur-0 (#4614)

修复

  • JIT: 提高对 Svelte 类绑定的支持 (#4187)
  • JIT: 提高对 calcvar 在任意值中的支持 (#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)
Paul Redmond photo

Laravel News 的撰稿人。全栈 Web 开发人员和作者。

Cube

Laravel 新闻

加入 40,000 多名其他开发人员,绝不错过新的技巧、教程等。

Laravel Forge logo

Laravel Forge

轻松创建和管理服务器,并在几秒钟内部署您的 Laravel 应用程序。

Laravel Forge
Tinkerwell logo

Tinkerwell

Laravel 开发人员必备的代码运行器。使用 AI、自动完成和即时反馈在本地和生产环境中进行测试。

Tinkerwell
No Compromises logo

不妥协

Joel 和 Aaron,来自“No Compromises”播客的两名经验丰富的开发人员,现已可以为您的 Laravel 项目提供服务。 ⬧ 固定价格为 7500 美元/月。 ⬧ 无需冗长的销售流程。 ⬧ 无需合同。 ⬧ 100%退款保证。

不妥协
Kirschbaum logo

Kirschbaum

提供创新和稳定性,确保您的 Web 应用程序取得成功。

Kirschbaum
Shift logo

Shift

运行旧版 Laravel?即时、自动化的 Laravel 升级和代码现代化,让您的应用程序保持新鲜。

Shift
Bacancy logo

Bacancy

让您的项目充满活力,只需每月 2500 美元即可获得拥有 4-6 年经验的经验丰富的 Laravel 开发人员。获得 160 小时的专业知识和 15 天的免费试用。立即预约电话!

Bacancy
Lucky Media logo

Lucky Media

立即获得 Lucky - Laravel 开发的理想选择,拥有超过十年的经验!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar:Laravel 电子商务

Laravel 的电子商务。一个开源软件包,将现代无头电子商务功能的力量带到 Laravel。

Lunar:Laravel 电子商务
LaraJobs logo

LaraJobs

官方 Laravel 招聘信息板

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit:Laravel SaaS 启动套件

SaaSykit 是一个 Laravel SaaS 启动套件,包含运行现代 SaaS 所需的所有功能。支付、美观的结账、管理面板、用户仪表板、身份验证、现成组件、统计信息、博客、文档等等。

SaaSykit:Laravel SaaS 启动套件
Rector logo

Rector

您无缝 Laravel 升级、降低成本和加速创新以帮助成功企业的合作伙伴

Rector
MongoDB logo

MongoDB

通过 MongoDB 和 Laravel 的强大集成来增强您的 PHP 应用程序,使开发人员能够轻松高效地构建应用程序。支持事务、搜索、分析和移动用例,同时使用熟悉的 Eloquent API。了解 MongoDB 灵活的现代数据库如何改变您的 Laravel 应用程序。

MongoDB
Maska is a Simple Zero-dependency Input Mask Library image

Maska 是一个简单的无依赖输入掩码库

阅读文章
Add Swagger UI to Your Laravel Application image

将 Swagger UI 添加到您的 Laravel 应用程序

阅读文章
Assert the Exact JSON Structure of a Response in Laravel 11.19 image

在 Laravel 11.19 中断言响应的精确 JSON 结构

阅读文章
Build SSH Apps with PHP and Laravel Prompts image

使用 PHP 和 Laravel 提示构建 SSH 应用程序

阅读文章
Building fast, fuzzy site search with Laravel and Typesense image

使用 Laravel 和 Typesense 构建快速、模糊的网站搜索

阅读文章
Add Comments to your Laravel Application with the Commenter Package image

使用 Commenter 包将评论添加到您的 Laravel 应用程序

阅读文章