📐 Tailwind间距生成器

Tailwind间距生成器能做什么？

Tailwind间距生成器是一款免费在线开发者工具，帮助您可视化配置Tailwind CSS的间距系统。支持自定义基准单位（4px/8px等）、最大档位、rem/px单位切换，实时可视化间距效果和盒模型预览，一键生成tailwind.config.js配置代码。所有计算在浏览器本地完成，数据绝不上传服务器。

核心功能

• 自定义基准单位：支持1-16px基准值，灵活适配设计系统
• 间距可视化：直观展示各档位对应的像素宽度
• 盒模型预览：实时预览margin/padding效果
• 多单位支持：rem/px切换，含px注释方便理解
• 半档位支持：可包含0.5、1.5等半档位间距

使用教程

1. 设置基准单位（默认4px）和最大档位。

2. 选择rem或px单位，调整根字体大小。

3. 查看间距可视化和盒模型预览效果。

4. 复制生成的tailwind.config.js配置代码到项目中。

应用场景

场景1：设计系统搭建

设计师和开发者协同制定统一的间距规范，确保UI一致性。

场景2：项目定制

前端团队根据设计稿自定义Tailwind间距，避免内联样式。

场景3：间距审计

工程师审查现有间距使用情况，优化间距系统减少冗余值。

扩展知识

Tailwind CSS的间距系统基于4px网格，遵循8点网格系统（8pt Grid System）的设计原则。spacing配置同时影响margin（m-*）、padding（p-*）和gap（gap-*）工具类。Tailwind默认使用rem单位，1rem=16px，间距值0.25rem=4px。使用rem的优势是跟随用户字体大小设置缩放，提升可访问性。在移动端设计中，4px网格是主流选择；桌面端常用8px网格。自定义间距时建议保持倍数关系，避免随意像素值导致设计不一致。