Tailwind CSS Blog
·
Tailwind CSS v2.0
💡
原文英文，约2100词，阅读约需8分钟。
📝
内容提要
Tailwind CSS v2.0发布，新增色彩调色板、暗模式支持、2XL断点、改进的表单样式和文本溢出工具。更新简化了样式应用，增强了可定制性，并减少了与IE11的不兼容性。升级过程简单，预计耗时约30分钟。
🎯
关键要点
- Tailwind CSS v2.0是首次重大更新，新增220种颜色和新的色彩调色板。
- 支持暗模式，用户可以根据设备设置动态切换设计。
- 新增2XL断点，支持1536px及以上的设计。
- 引入新的轮廓环工具，改善了视觉效果。
- 提供了更友好的表单样式，简化了表单元素的自定义。
- 每种字体大小都有默认的行高，提升了排版效果。
- 扩展了间距、排版和不透明度的比例，提供更多微调选项。
- 允许在@apply中使用任何变体，增强了灵活性。
- 新增文本溢出工具，提供更精确的文本控制。
- 默认启用group-hover和focus-within，提升了交互体验。
- 简化了过渡效果的类，减少了所需的类数量。
- 放弃对IE11的支持，减小了构建体积，提升了性能。
- 升级过程简单，预计耗时约30分钟。
❓
延伸问答
Tailwind CSS v2.0有哪些新特性？
Tailwind CSS v2.0新增了220种颜色、暗模式支持、2XL断点、改进的表单样式和文本溢出工具等。
如何在Tailwind CSS v2.0中启用暗模式？
在tailwind.config.js文件中，将darkMode设置为'media'，然后在类名前加上'dark:'即可。
Tailwind CSS v2.0的升级过程复杂吗？
升级过程简单，预计耗时约30分钟，具体步骤可参考升级指南。
Tailwind CSS v2.0如何改善表单样式？
引入了新的官方插件@tailwindcss/forms，规范化和重置了基本表单控件，使其更易于使用纯工具类进行样式定制。
Tailwind CSS v2.0中如何使用新的文本溢出工具？
新增了overflow-ellipsis和overflow-clip工具，可以更精确地控制文本溢出效果。
Tailwind CSS v2.0是否支持IE11？
Tailwind CSS v2.0不再支持IE11，这样可以减小构建体积并提升性能。
➡️
