Tailwind CSS 设计稿尺寸转换规则
在使用 Tailwind CSS 开发时，如何高效地将设计稿中的尺寸（如 Figma/Sketch 中的 px 值）转换为 Tailwind 类是关键问题。本文将详细解析转换规则、计算逻辑及最佳实践。
一、核心转换规则
1. 默认单位系统及转换公式
Tailwind CSS 默认使用 4px 即 0.25rem作为基础单位，所有尺寸类（如 w-1, p-2）均基于此单位扩展。将设计稿中的 px 值转换为 Tailwind 类的公式：
1Tailwind单位 = 设计稿px值 * 1 /16 * 4 = 0.25rem
1Tailwind单位 = 设计稿px值 ÷ 4
简化换算系数为1/4
示例：
设计稿中宽度为 8px → 8 ÷ 4 = 2 → 对应 w-2
设计稿中间距为 16px → 16 ÷ 4 = 4 → 对应 p-4
二、常见转换场景
1. 标准尺寸（4 的倍数）
| 设计稿 px | Tailwind 类 | 计算过程 |
|---|---|---|
| 4px | w-1 | 4 ÷ 4 = 1 |
| 8px | w-2 | 8 ÷ 4 = 2 |
| 12px | w-3 | 12 ÷ 4 = 3 |
| 16px | w-4 | 16 ÷ 4 = 4 |
| 20px | w-5 | 20 ÷ 4 = 5 |
2. 非标准尺寸（非 4 的倍数）
使用 方括号语法 直接指定 px 值：
| 设计稿 px | Tailwind 类 | 备注 |
|---|---|---|
| 3px | w-[3px] | 直接使用 px 值 |
| 10px | h-[10px] | 适合任意尺寸 |
| 22px | gap-[22px] | 适用于所有属性 |
三、进阶技巧
1. 自定义基础单位
通过 tailwind.config.js 修改基础单位或添加常用尺寸：
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'3': '3px', // 添加3px的单位
'10': '10px', // 添加10px的单位
'screen/2': '50vh', // 自定义视口单位
},
},
}
}
使用：w-3 → 3px，p-10 → 10px
2. 字体大小转换
设计稿中的字体尺寸同样可按公式转换：
| 设计稿 px | Tailwind 类 | 备注 |
|---|---|---|
| 12px | text-[12px] | 直接使用 px 值 |
| 16px | text-base | Tailwind 默认类（16px = 1rem） |
| 20px | text-xl | Tailwind 默认类（20px = 1.25rem） |
四、工具推荐
1. 开发工具
Tailwind CSS IntelliSense（VSCode 插件）：自动提示 px 与 Tailwind 类的对应关系，输入 w- 时显示等价 px 值。
Tailwind Figma 插件：直接从 Figma 中复制组件的 Tailwind 代码。
五、总结
掌握 Tailwind CSS 的尺寸转换规则后，设计稿到代码的转化将变得高效且精准。核心在于理解 1 个单位 = 4px = 1/16 * 4 = 0.25rem 的换算关系，并灵活运用方括号语法和自定义配置。通过实践，你将逐渐形成直觉，无需每次都手动计算！
