CSS 转 Tailwind 转换器 – 在线转换 CSS 规则
这款 CSS 转 Tailwind 转换器读取 CSS 规则块，将声明映射为 Tailwind 工具类。没有命名工具类时，它使用 w-[137px] 等任意值语法；无法映射的声明会被列出，而非静默丢弃。选择与项目匹配的 Tailwind v3 或 v4，即可复制换算结果用于检查和使用。
CSS 转 Tailwind 转换器读取 CSS 规则块，将其声明映射为 Tailwind 工具类。当您想查看工具类等效写法而无需逐条手动查找声明时，可在线将 CSS 转换为 Tailwind。结果会区分映射到命名工具类的声明与需要任意值语法的值，例如 w-[137px]。
选择与项目版本相匹配的 Tailwind v3 或 v4。转换器对没有命名工具类的声明使用任意值语法，并将无法映射的声明列出，避免静默丢失。其映射表位于单一数据模块，而非散落在换算逻辑中。
CSS 规则通过声明表达样式，Tailwind 则通过工具类应用样式。当您将现有样式迁移到 Tailwind，或核对某条声明如何用工具类表示时，换算规则块很有帮助。版本选择器与无法映射列表让您更易对照项目需求检查输出。
转换器完全在浏览器中运行：输入在设备上处理，不会上传、存储或发送到服务器。页面加载后支持离线使用，无需联网即可继续换算。工具免费，无需在本地安装任何东西即可使用。
开发者和 DevOps 工程师可用本转换器做快速的 CSS 转 Tailwind 核对，无论是刚接触 Tailwind 还是维护现有项目。粘贴或输入 CSS 规则块，选择 Tailwind 版本，检查已映射与无法映射的声明，然后复制结果。
步骤 1：粘贴或输入 CSS 规则块。转换器读取其中的声明并映射为 Tailwind 工具类。
步骤 2：选择 Tailwind v3 或 v4。选择与您正在使用的 Tailwind 项目相匹配的版本。
步骤 3：换算 CSS。结果尽可能使用命名工具类，没有命名工具类的值则使用任意值语法。
步骤 4：查看无法映射的声明。检查该列表，了解哪些声明未被换算。
步骤 5：复制结果。在项目中使用之前，先检查生成的工具类。
使用场景：迁移过程中将 CSS 规则块转换为 Tailwind 工具类。无法映射列表可帮您找出需要额外处理的声明。
使用场景：查看某条 CSS 声明如何映射为 Tailwind 工具类。没有命名工具类的值可用任意值语法表示。
使用场景：对比 Tailwind v3 与 v4 的换算结果。选择与您正在更新的项目相匹配的版本。
使用场景：无需在本地安装任何东西，即可完成常规的 CSS 转 Tailwind 换算。将规则块粘贴到基于浏览器的工具中并复制结果。
使用场景：在任何机器上处理换算。工具在浏览器中运行，页面加载后可继续离线工作。
使用场景：换算内部 CSS 而不发送给第三方服务。输入在浏览器中处理，不会发送到服务器。