Tailwind CSS v2.0 已于两个月前发布,其开发团队表示从 1.0 到 2.0 的 18 个月里,他们发布了 9 个小版本,增加了不少新功能,例如占位符样式、屏幕阅读器可见性、CSS 网格、过渡、变换、动画、布局工具、集成 tree-shaking 以及渐变等等。
Tailwind CSS v2.0 主要更新内容:
truncate
focus-visible
详情查看 Changelog。
开发团队表示,虽然 Tailwind CSS v2.0 是一个大版本更新,但他们已经尽最大努力以最大程度确保减少破坏性变化,尤其是那些会迫使开发者编辑大量模板的变化。据称,任何可能造成影响的破坏性变化都可以通过在tailwind.config.js文件中添加一些小的配置项来解决,升级时间应该不超过 30 分钟。详情查看升级指南。
tailwind.config.js
如果希望使用 Tailwind CSS v2.0 启动一个全新的项目,请访问安装文档以快速入门。
新的调色板包括 22 种颜色(以前是 10 种),每种都有 10 种阴影(以前是 9 种),总共有 220 个值。
默认情况下不启用深色模式,如需使用在tailwind.config.js文件进行配置:
// tailwind.config.js module.exports = { darkMode: 'media', // ... }
随着设备的屏幕越来越大,Tailwind CSS 也增加了默认屏幕宽度为 1536px 的断点,并将前缀命名为2xl。
2xl
<h1 class="... 2xl:text-9xl">Godzilla</h1>
Tailwind 表单元素的默认样式比较粗糙,需要开发者手动编写 CSS,并且容易引发一些边缘情况。因此,Tailwind CSS v2.0 发布了一个全新的官方插件@tailwindcss/forms,用于重置和规范基础表单控件的样式,让它们在所有浏览器的表现保持一致。插件文档:https://github.com/tailwindlabs/tailwindcss-forms。
@tailwindcss/forms
详细更新说明查看 https://blog.tailwindcss.com/tailwindcss-v2。
评论删除后,数据将无法恢复
Tailwind CSS v2.0
Tailwind CSS v2.0 已于两个月前发布,其开发团队表示从 1.0 到 2.0 的 18 个月里,他们发布了 9 个小版本,增加了不少新功能,例如占位符样式、屏幕阅读器可见性、CSS 网格、过渡、变换、动画、布局工具、集成 tree-shaking 以及渐变等等。
Tailwind CSS v2.0 主要更新内容:
truncate
进行更精确的控制focus-visible
,而无需重新声明整个列表或考虑顺序详情查看 Changelog。
开发团队表示,虽然 Tailwind CSS v2.0 是一个大版本更新,但他们已经尽最大努力以最大程度确保减少破坏性变化,尤其是那些会迫使开发者编辑大量模板的变化。据称,任何可能造成影响的破坏性变化都可以通过在
tailwind.config.js
文件中添加一些小的配置项来解决,升级时间应该不超过 30 分钟。详情查看升级指南。如果希望使用 Tailwind CSS v2.0 启动一个全新的项目,请访问安装文档以快速入门。
全新的调色板
新的调色板包括 22 种颜色(以前是 10 种),每种都有 10 种阴影(以前是 9 种),总共有 220 个值。
支持深色模式
默认情况下不启用深色模式,如需使用在
tailwind.config.js
文件进行配置:新增 2XL 断点
随着设备的屏幕越来越大,Tailwind CSS 也增加了默认屏幕宽度为 1536px 的断点,并将前缀命名为
2xl
。友好的实用型表单样式
Tailwind 表单元素的默认样式比较粗糙,需要开发者手动编写 CSS,并且容易引发一些边缘情况。因此,Tailwind CSS v2.0 发布了一个全新的官方插件
@tailwindcss/forms
,用于重置和规范基础表单控件的样式,让它们在所有浏览器的表现保持一致。插件文档:https://github.com/tailwindlabs/tailwindcss-forms。详细更新说明查看 https://blog.tailwindcss.com/tailwindcss-v2。