Tailwind CSS v2.0

来源: OSCHINA
编辑: 局长
2021-01-28

Tailwind CSS v2.0 已于两个月前发布,其开发团队表示从 1.0 到 2.0 的 18 个月里,他们发布了 9 个小版本,增加了不少新功能,例如占位符样式、屏幕阅读器可见性、CSS 网格、过渡、变换、动画、布局工具、集成 tree-shaking 以及渐变等等。

Tailwind CSS v2.0 主要更新内容:

详情查看 Changelog

开发团队表示,虽然 Tailwind CSS v2.0 是一个大版本更新,但他们已经尽最大努力以最大程度确保减少破坏性变化,尤其是那些会迫使开发者编辑大量模板的变化。据称,任何可能造成影响的破坏性变化都可以通过在tailwind.config.js文件中添加一些小的配置项来解决,升级时间应该不超过 30 分钟。详情查看升级指南

如果希望使用 Tailwind CSS v2.0 启动一个全新的项目,请访问安装文档以快速入门。

全新的调色板

新的调色板包括 22 种颜色(以前是 10 种),每种都有 10 种阴影(以前是 9 种),总共有 220 个值。

支持深色模式

默认情况下不启用深色模式,如需使用在tailwind.config.js文件进行配置:

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

新增 2XL 断点

随着设备的屏幕越来越大,Tailwind CSS 也增加了默认屏幕宽度为 1536px 的断点,并将前缀命名为2xl

<h1 class="... 2xl:text-9xl">Godzilla</h1>

友好的实用型表单样式

Tailwind 表单元素的默认样式比较粗糙,需要开发者手动编写 CSS,并且容易引发一些边缘情况。因此,Tailwind CSS v2.0 发布了一个全新的官方插件@tailwindcss/forms,用于重置和规范基础表单控件的样式,让它们在所有浏览器的表现保持一致。插件文档:https://github.com/tailwindlabs/tailwindcss-forms

详细更新说明查看 https://blog.tailwindcss.com/tailwindcss-v2

展开阅读全文
16 收藏
分享
加载中
精彩评论
确实好用,终于不用自己想类名了,还是没有摸索出来要怎么定义过渡效果
2021-01-28 08:55
3
举报
https://tailwindui.com/ 找到了。
2021-01-30 22:39
2
举报
留言前先动动脑子,不知道的去搜搜再评论。
归根结底还是原子化和组件化之争。
组件化用的烦了,原子化反而看着清爽
2021-01-30 14:37
1
举报
最新评论 (10)
:) 不知道有没有哪个网站,用tailwind制作一些例子,让用户可以直接复制使用呢。
2021-01-30 22:32
0
回复
举报
https://tailwindui.com/ 找到了。
2021-01-30 22:39
2
回复
举报
留言前先动动脑子,不知道的去搜搜再评论。
归根结底还是原子化和组件化之争。
组件化用的烦了,原子化反而看着清爽
2021-01-30 14:37
1
回复
举报
这个最近发展势头很猛啊。我要研究研究。
2021-01-29 15:11
0
回复
举报
另一个 Bootstrap?
2021-01-28 12:27
0
回复
举报
他的ui是付费的,css来源的确实不错
2021-01-28 11:52
0
回复
举报
这玩意是给后端用的
2021-01-28 11:39
0
回复
举报
很牛逼的东西,可以在自己用或内部用的小东西上试试,生产上用不兼容 IE11 直接劝退
2021-01-28 09:36
0
回复
举报
我研究了两遍,始终不知道这玩意儿能用来干嘛,虽然我也是个前端
2021-01-28 09:36
0
回复
举报
确实好用,终于不用自己想类名了,还是没有摸索出来要怎么定义过渡效果
2021-01-28 08:55
3
回复
举报
更多评论
10 评论
16 收藏
分享
返回顶部
顶部