# Tailwind 类名转 CSS

把 Tailwind class(如 p-4 flex gap-2 hover:bg-blue-500/20 md:p-6)解析成等价的纯 CSS 代码,可复制到非 Tailwind 项目。覆盖 spacing、flex、grid、颜色、排版、边框、特效、变换、过渡以及响应式/状态变体。

> 标准页面: https://elysiatools.com/zh/tools/tailwind-class-to-css-converter

- **分类:** Development

- **关键词:** tailwind, tailwind 转 css, css 片段, 工具类, tailwind playground, css 转换, 设计 token, flex, grid, hover 变体

## 概述

看清一个 Tailwind 类到底生成什么——然后把纯 CSS 复制到任何项目。

**为什么需要它。** Tailwind 很棒,但有时你需要原始 CSS:非 Tailwind 代码库、邮件模板、设计 token 审计,或一次性页面。不必安装 Tailwind Playground 或翻源码,粘贴类名即可即时获得等价 CSS。

**覆盖范围。** 内置规则引擎处理最常用工具类:
- **布局**:flex、grid、gap、display、position、z-index、overflow
- **间距**:padding(p/px/py/pt/pr/pb/pl)、margin(m/mx/my/...)、space-x/space-y
- **尺寸**:width、height、max/min(w-4、h-screen、max-w-md...)
- **颜色**:background、text、border(bg-red-500、text-blue-200/75、border-gray-300)
- **排版**:font-size、font-weight、line-height、text-align、letter-spacing
- **边框**:border 宽度、radius、style
- **特效**:shadow、opacity、blur
- **变换与过渡**:scale、rotate、translate、duration、ease
- **变体**:响应式(sm/md/lg/xl/2xl)和状态(hover/focus/active)

**透明度修饰符。** Tailwind v3 的 `bg-blue-500/20` 语法(颜色+透明度)会展开成 `rgba()`,到处可用——无需 `color-mix()`。

**作用域选择器。** 用自定义选择器(`.my-card { ... }`)包裹输出,或导出原始变量。适合把片段限定到某个组件而无需构建步骤。

**局限。** 这是静态规则表,不是完整的 Tailwind JIT 引擎,所以任意值如 `w-[327px]` 和自定义主题扩展是尽力而为。要 100% 保真请用官方 Tailwind 编译器;本工具用于快速查询和复制粘贴。

## 输入项

- **Tailwind 类名** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md
- **作用域选择器** (select)

## 适用场景

- 需要在不支持 Tailwind CSS 的传统项目、第三方平台或 HTML 邮件模板中使用特定的样式片段时。
- 审计设计系统 Token，或需要查看某个特定 Tailwind 类名（如带透明度的颜色或复杂变体）对应的底层 CSS 属性时。
- 快速提取组件样式，并使用自定义选择器将其封装为独立的 CSS 规则，避免引入完整的 Tailwind 构建流程。

## 工作原理

- 在输入框中粘贴需要转换的 Tailwind 类名（支持空格分隔的多个类名，包含响应式前缀和状态变体）。
- 选择输出的 CSS 作用域选择器，例如使用自定义类名（如 `.my-class`）包裹或导出为 `:root` 变量。
- 工具内置的规则引擎会自动解析类名，将颜色透明度修饰符展开为 `rgba()`，并生成对应的媒体查询和伪类 CSS 代码。

## 使用案例

- 邮件模板开发：将 Tailwind 编写的布局和间距类名快速转换为行内或单页 CSS，用于兼容性要求极高的 HTML 邮件。
- 老旧项目维护：在没有配置 Tailwind 构建流的传统 CSS/Sass 项目中，快速复用 Tailwind 的优秀设计规范和样式。
- 样式调试与学习：帮助初学者直观地查看 Tailwind 类名（如 flex gap-4 或 shadow-lg）在底层究竟对应哪些 CSS 属性。

## 常见问题

### 这个工具支持 Tailwind 的所有任意值（如 w-\[327px\]）吗？

本工具基于静态规则表进行解析，对任意值和自定义主题扩展提供尽力而为的支持。如需 100% 准确的任意值解析，建议使用官方 Tailwind 编译器。

### 像 bg-blue-500/20 这样的透明度修饰符会如何转换？

工具会自动将颜色与透明度修饰符展开并转换为标准的 rgba() 格式，确保在所有主流浏览器中都能直接兼容使用。

### 响应式前缀（如 md:p-6）和状态变体（如 hover:bg-blue-600）能正常转换吗？

可以。工具会为响应式前缀生成对应的 @media 媒体查询块，并为状态变体生成对应的伪类选择器（如 :hover）。

### 我可以自定义输出 CSS 的类名选择器吗？

可以，您可以通过“作用域选择器”选项选择使用自定义类名（如 .my-class）来包裹输出的 CSS 规则，或者选择 :root。

### 转换过程需要联网或安装 Tailwind 依赖吗？

不需要，这是一个纯前端的静态解析工具，无需安装任何依赖或联网即可即时完成转换。

## 相关工具

- [Markdown转PDF转换器](https://elysiatools.com/zh/tools/markdown-to-pdf-converter): 将Markdown文件转换为PDF文档，支持格式化、语法高亮和样式
- [Markdown转HTML转换器](https://elysiatools.com/zh/tools/markdown-to-html): 将Markdown文本转换为HTML，支持自定义格式化选项
- [HTML转Markdown转换器](https://elysiatools.com/zh/tools/html-to-markdown): 将HTML内容转换为Markdown格式，支持自定义转换选项
- [Cron 表达式解释器](https://elysiatools.com/zh/tools/cron-expression-explainer): 解析 5 段 / 6 段 / Quartz cron 表达式为自然语言调度描述，按字段拆解，并按任意 IANA 时区列出接下来 N 次执行时间，附带 AI 生成的本地化自然语言解释
- [Figma iOS Android pt dp sp 响应式设计规范卡](https://elysiatools.com/zh/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): 把 Figma 像素值换算成平台正确单位并生成开发者规范卡：iOS pt（@1x/@2x/@3x 及各倍率渲染 px）、Android dp/sp（mdpi…xxxhdpi 全密度桶渲染表、字体缩放）、Web rem/vw 与 clamp() 流式排版片段；按 iOS 44pt / Android 48dp / WCAG 44px 与 24px 审计最小触控目标，并标注 Material 窗口类与 Tailwind 断点。
- [Markdown预览器](https://elysiatools.com/zh/tools/markdown-preview): 将Markdown转换为HTML，支持语法高亮和可自定义主题
- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [缩进列表转 ASCII 目录树](https://elysiatools.com/zh/tools/ascii-tree-from-indented-list): 把 2 空格 / 4 空格 / Tab 缩进的层级列表（Markdown bullet、- * 1. 前缀可选）渲染为可复制的 ASCII 目录树。支持 Unicode 方框与经典 ASCII 两种风格，以及整根纵线、行尾空格、叶节点方括号等开关。

## 示例

- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合
- [CSS 查看器样本](https://elysiatools.com/zh/samples/css-viewer-samples): 用于浏览器内 CSS 查看器的样本文件