Tailwind CSS v2.0

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

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

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

• 全新的调色板：提供了 220 种颜色和一个新的工作流来建立属于自己的颜色方案
• 支持深色模式：当启用黑暗模式时，新版本支持更便捷地动态更改设计
• 新增 2XL 断点：用于屏幕宽度为 1536px 及以上的设计
• 创建轮廓的新通用类：用于自定义聚焦状态的样式
• 友好的实用型表单样式：全新的表单重置方式，只需通过实用类就能轻松定制表单元素（甚至是复选框）
• 为每个 font-size 设置默认 line-height：新版本支持为每一个字号设置一个自定义的 line-height
• 拓展留白、排版和透明度范围：支持在更细粒度的基础上进行微调
• @apply 支持与任意内容搭配使用：包括响应式、悬停、焦点和其他变体
• 新的文本溢出实用类：比单独使用truncate进行更精确的控制
• 扩展 variants：支持启用其他的 variants 如focus-visible，而无需重新声明整个列表或考虑顺序
• 默认使用 Group-hover 和 focus-within：现已默认使用，无需手动添加拓展
• 提供默认的 transition duration 和 easing curve
• 不兼容 IE11

详情查看 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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。