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