TailwindCSS 现已推出动态视窗单位、:has() 支持、平衡标题、子网格等新功能!

发布于 作者:

TailwindCSS now with dynamic viewport units, :has() support, balanced headlines, subgrid, and more! image

Tailwind v3.4 现已发布,其中包含动态视窗单位、:has() 支持、平衡标题、子网格等新功能!

在发布公告中,Adam Wathan 提到这些功能中的许多与他们正在构建的新 Catalyst UI 工具包直接相关。

没有什么是比构建一个主要的新产品更能发现您希望在自己的工具中拥有的所有功能,因此我们利用了一些灵感并将其转化为 - Tailwind CSS v3.4。

与往常一样,这些改进包括您多年来一直感到愤怒的事情,以及支持您从未听说过而且可能在工作中都无法使用的 CSS 功能。

主要亮点包括

  • 动态视窗单位:真正可以在移动设备上使用的全高元素。
  • 新 :has() 变体:根据子元素的样式设置父元素。
  • 使用 * 变体为子元素设置样式:我们可能后悔给您这个功能。
  • 新 size-* 实用程序:同时设置宽度和高度,终于实现了。
  • 使用 text-wrap 实用程序平衡标题:不再需要调整最大宽度或响应式换行。
  • 子网格支持:您一直难以理解的网格功能,终于在 Tailwind CSS 中实现了。
  • 扩展的最小宽度、最大宽度和最小高度比例:现在 min-w-12 是一个真正的类。
  • 扩展的透明度比例:对于那些既不使用 60% 也不使用 70% 的情况。
  • 扩展的 grid-rows-* 比例:可能与列比例匹配。
  • 新强制颜色变体:轻松为强制颜色模式微调您的网站。
  • 新强制颜色调整实用程序:用于更精细地控制强制颜色。

查看 完整公告,了解此新版本的详细信息,您可以通过运行以下命令立即开始使用它。

npm install tailwindcss@latest
Eric L. Barnes photo

Eric 是 Laravel News 的创建者,从 2012 年开始报道 Laravel。

分类
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

现在就获得幸运 - 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

在您的 Laravel 应用程序中添加 Swagger UI

阅读文章
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 应用程序中添加评论

阅读文章