Tailwind CSS Blog
·
Tailwind CSS v1.9.0
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
Tailwind CSS v1.9发布，新增配置预设、CSS网格工具、扩展边框半径、旋转和倾斜比例、可配置焦点指示器等功能。用户可自定义基础配置，便于团队共享品牌样式。网格工具可控制自动生成的列和行大小，改进的焦点指示器提高可访问性。升级过程简单，建议用户提前适应未来版本的变化。
🎯
关键要点
- Tailwind CSS v1.9发布，新增配置预设功能，允许用户自定义基础配置以便团队共享品牌样式。
- 新增CSS网格工具，提供grid-auto-columns和grid-auto-rows的实用工具，控制自动生成的列和行大小。
- 改进的焦点指示器，outline-none类默认渲染透明轮廓，增强可访问性，新增outline-white和outline-black样式。
- 扩展边框半径、旋转和倾斜比例，新增多个边框半径和旋转、倾斜的实用工具。
- 升级到v1.9过程简单，建议用户提前适应未来版本的变化。
❓
延伸问答
Tailwind CSS v1.9有哪些新功能？
Tailwind CSS v1.9新增了配置预设、CSS网格工具、扩展边框半径、旋转和倾斜比例、改进的焦点指示器等功能。
如何使用Tailwind CSS v1.9的配置预设功能？
用户可以在tailwind.config.js文件中添加presets键，定义自定义基础配置，以便团队共享品牌样式。
Tailwind CSS v1.9的网格工具有什么用？
新增的grid-auto-columns和grid-auto-rows工具可以控制自动生成的列和行大小，便于设置默认的列/行大小。
焦点指示器的改进如何提高可访问性？
改进后的焦点指示器默认渲染透明轮廓，新增outline-white和outline-black样式，帮助低视力用户更好地识别选中的元素。
如何升级到Tailwind CSS v1.9？
升级过程简单，只需运行npm install tailwindcss@^1.9或yarn add tailwindcss@^1.9即可。
Tailwind CSS v1.9中新增的边框半径和旋转工具有哪些？
新增了rounded-xl、rounded-2xl、rounded-3xl等边框半径工具，以及多个旋转和倾斜的实用工具。
➡️
