Tailwind CSS v3.3 发布,支持 ESM/TS、丰富调色板颜色


Tailwind CSS v3.3 带来了大量的新内容,更新内容如下:

  • 扩展的深色调色板:

    在 Tailwind CSS v3.3 中,为每一种颜色都增加了一个新的950色调,这是一种更加深的色调

  • ESM 和 TypeScript 支持:

    现在可以在 ESM 和 TypeScript 中配置 Tailwind CSS

  • 用逻辑属性简化 RTL 支持:

    现在你可以使用逻辑属性来更容易和自动地完成大部分的样式设计,建立适应不同方向的布局。

    新的实用程序,如 ms-3me-3,可以为元素的开始结束设置样式,以便样式自动适应 RTL。

  • 微调渐变色的位置:

    增加了新的工具,如from-5%via-35%to-85%,让你调整渐变色中每个色块的实际位置,准确地指定位置。

  • 开箱即用 Line-clamp:

    Tailwind 在两年前发布了官方的 line-clamp 插件,尽管它使用了一堆奇怪的废弃的-webkit-*的东西,但它在每个浏览器中都能正常运行,而且会一直运行下去,所以我们决定把它植入框架本身。

    因此,当你升级到 v3.3 时,如果你正在使用 line-clamp 插件,你可以安全地移除它。

  • 新的字体大小实用程序的行高缩写

    在用 Tailwind 设置行高时,从来没有同时设置字体大小的功能。因此,受颜色不透明度修改器语法的启发,Tailwind 决定用一个单一的工具来设置它们,从而节省一些字符。

  • 没有var()的 CSS 变量

    本着减少输入的精神,Tailwind 在使用 CSS 变量作为任意值时,也可以省略var()

  • 可配置的font-variation-settings:

    当使用自定义字体时,你经常想要配置诸如 font-feature-settingsfont-variation-settings ,以加入的字体提供特定调整。

    之前已经可以让font-feature-settings做到这一点了,现在你也可以对font-variation-settings进行同样的设置。

  • 新的 list-style-image 实用程序

    想过用胡萝卜的图片作为你的列表项目标记吗?现在你可以使用新的 list-image-* 实用工具来实现以剪贴画来作为列表项目标记。

<ul class="list-image-[url(carrot.png)] ...">
	<li>5 cups chopped Porcini mushrooms</li>
	<!-- ... -->
</ul>

 

  • 新的hyphens工具

    增加了对这些hyphens-*工具的支持,使用hyphens-manual&shy;,可以告诉浏览器在需要把一个词分成多行时在哪里插入一个连字符:

 

<p class="hyphens-manual ...">
... Kraftfahrzeug&shy;Haftpflichtversicherung is a ...
</p>

更多详情可查看:https://tailwindcss.com/blog/tailwindcss-v3-3


相關推薦

2021-12-13

更好的浏览器性能开箱即用的各种颜色 — 包括所有扩展调色板颜色,如青色、玫瑰色、紫红色和青柠色,以及五十度的灰白色彩色的边框阴影 — 有趣的发光和反射效果,以及为彩色背景添加更自然的阴影Scroll snap API — 一

2022-10-24

Tailwind CSS v3.2 带来了大量的新内容,包括对动态断点的支持、单个项目中的多个配置文件、容器查询等等。 一个项目中使用多个配置文件 添加了一个新的 @config指令,开发者可以在 CSS 文件中使用该指令来指定用于该文件的 T

2022-12-26

本带来了新的颜色模式支持、带有变量和实用程序的扩展调色板等。具体更新内容如下: 深色模式和彩色模式 Bootstrap现在支持通过 root<html>元素上的data-bs-theme属性来明确选择创建多种颜色模式。开发团队选择了一个数据

2023-06-01

何 Sass 和 CSS 变量。 为适应颜色模式的主题颜色扩展调色板 新版本修改了调色板,包括新的 Sass 变量、CSS 变量和用于设置 color 、 background-color 和 border-color 的实用程序。 新的链接辅助工具和实用程序 在 v5.3.0 版本中,链

2023-02-16

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

2023-05-16

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

2022-09-15

字体,这只是 COLRv1 文件格式的开始,支持渐变、自定义调色板等。 虽然你不一定熟悉彩色字体(color fonts)这个概念,但其实你每天都在使用它们,例如表情符号 emoji 就属于彩色字体。彩色字体可以在字体文件中指定颜色

2022-10-15

DManer元数建模软件(v4版本)介绍:PDManer [元数建模]-v4.0.0 发布:一款简单好用的数据库建模平台 4.2.0 版本升级内容清单 增加从EXCEL文件中导入表结构功能 增加Rust支持,在此感谢 @百小僧 的大力支持 增加

2023-07-26

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

2022-08-11

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

2023-01-08

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

2023-03-23

数据可视化引擎 G2 5.0 正式版本 “Spring” 现已发布。本次主版本更新包含更简洁和专业的可视化语法,更丰富的图表类型和图表特性,易于拓展的全新 API 和架构。在提高 G2 灵活性和易用性的同时,也为 G2 未来的长期稳定

2022-03-19

设置面板,选择喜欢的系统 UI 颜色,Ubuntu 提供来自 Yaru 调色板的 10 种色调供用户选择,包括默认的(标志性)橙色和其他 9 种 。不过在发布最终版本之前,最终的色调阵容可能会发生变化。 其他用户界面更改 除了可选的系

2022-12-24

:用于 Edge 的轻量级 Node.js 运行时 Turbopack 更新:支持 Tailwind CSS、next/image、next/font、改进内存使用、改进的 CSS 模块支持 中间件的改进:可以从中间件返回响应,并在请求中设置 headers 在 Next.js 中添加了一个新的 SWC 转换,