| CSS 属性 | 示例值 | Tailwind 类名 |
|---|---|---|
| display: flex | flex | flex |
| display: grid | grid | grid |
| justify-content: center | center | justify-center |
| align-items: center | center | items-center |
| flex-direction: column | column | flex-col |
| padding: 16px | 16px | p-4 |
| margin: 8px | 8px | m-2 |
| background-color: #3b82f6 | #3b82f6 | bg-blue-500 |
| color: #ef4444 | #ef4444 | text-red-500 |
| border-radius: 8px | 8px | rounded-lg |
| font-size: 16px | 16px | text-base |
| font-weight: 700 | 700 | font-bold |
| box-shadow | 0 4px 6px | shadow-md |
| width: 100% | 100% | w-full |
| text-align: center | center | text-center |
| position: relative | relative | relative |
| gap: 16px | 16px | gap-4 |
| opacity: 0.5 | 0.5 | opacity-50 |
| overflow: hidden | hidden | overflow-hidden |
| cursor: pointer | pointer | cursor-pointer |
CSS转Tailwind转换器是一款专为前端开发者设计的在线工具，能够将传统的CSS样式代码自动转换为Tailwind CSS工具类名。Tailwind CSS是目前最流行的实用优先CSS框架之一，通过预定义的工具类来快速构建界面，无需编写自定义CSS文件。本工具帮助开发者快速将现有的CSS代码迁移到Tailwind体系，提升开发效率。
本转换器基于Tailwind CSS v3.x默认配置，支持以下类别的属性映射：
转换结果会以不同颜色标记区分状态：绿色表示成功映射到Tailwind类名；红色表示无法自动映射的属性，建议保留原始CSS或手动处理；黄色表示近似映射，可能需要根据项目配置微调。
当您需要将现有项目从传统CSS迁移到Tailwind CSS时，手动逐行转换每个样式规则是耗时且容易出错的工作。使用本工具可以快速完成大部分属性的自动映射，显著缩短迁移周期。特别是对于中小型组件的样式迁移，转换器可以处理80%以上的常见属性。
对于Tailwind初学者，本工具是理解CSS属性与Tailwind类名对应关系的绝佳学习工具。通过观察转换结果，您可以快速掌握Tailwind的命名规范和间距/颜色体系，加速从传统CSS到实用优先范式的转变。
在快速原型阶段，您可能已经习惯用传统CSS编写样式思路。将CSS粘贴到本工具中，可以快速获得对应的Tailwind类名，直接用于HTML原型中，无需查阅Tailwind文档逐个查找类名。
从设计工具（如Figma、Sketch）导出的CSS代码往往使用传统CSS格式。通过本工具转换，可以快速将设计稿中的样式转换为Tailwind类名，便于在基于Tailwind的项目中直接还原设计效果。
Tailwind CSS采用"实用优先"（Utility-First）的设计理念，与传统CSS框架（如Bootstrap）的组件化思路截然不同。实用优先意味着框架提供大量低级别的工具类（如pt-4、text-center、bg-red-500），开发者直接在HTML中组合这些类名来构建界面，而非依赖预定义的组件（如"btn-primary"）。这种方式的优势在于：更高的设计自由度、更小的CSS体积（通过PurgeCSS自动移除未使用的样式）、更快的开发速度（无需在HTML和CSS文件之间切换）。
Tailwind的间距系统基于0.25rem（4px）的基准单位。例如p-4表示padding: 1rem（16px），m-2表示margin: 0.5rem（8px）。这种一致的间距比例（遵循4px网格系统）有助于创建和谐的视觉节奏。转换器会自动将常见的px值映射到最近的Tailwind间距值，如16px→4、24px→6、32px→8等。对于不在默认比例中的值，转换器会给出近似建议或保留原始值。
Tailwind CSS v3引入了JIT（Just-In-Time）引擎，支持使用任意值语法（如h-[32px]、text-[#1da1f2]）。这意味着即使某个值不在默认配置中，您也可以直接使用方括号语法。转换器在无法匹配预设值时，会建议使用任意值语法作为备选方案，确保转换尽可能完整。
Tailwind的颜色系统采用语义化命名（如slate、gray、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose），每种颜色提供50-950共11个色阶（50最浅，950最深）。转换器内置了常见十六进制颜色到Tailwind色名的映射表，对于未匹配的颜色会建议使用任意值颜色语法。