Elysia Tools
导航
Development
把 Tailwind class(如 p-4 flex gap-2 hover:bg-blue-500/20 md:p-6)解析成等价的纯 CSS 代码,可复制到非 Tailwind 项目。覆盖 spacing、flex、grid、颜色、排版、边框、特效、变换、过渡以及响应式/状态变体。
详情
看清一个 Tailwind 类到底生成什么——然后把纯 CSS 复制到任何项目。
为什么需要它。 Tailwind 很棒,但有时你需要原始 CSS:非 Tailwind 代码库、邮件模板、设计 token 审计,或一次性页面。不必安装 Tailwind Playground 或翻源码,粘贴类名即可即时获得等价 CSS。
覆盖范围。 内置规则引擎处理最常用工具类:
透明度修饰符。 Tailwind v3 的 bg-blue-500/20 语法(颜色+透明度)会展开成 rgba(),到处可用——无需 color-mix()。
作用域选择器。 用自定义选择器(.my-card { ... })包裹输出,或导出原始变量。适合把片段限定到某个组件而无需构建步骤。
局限。 这是静态规则表,不是完整的 Tailwind JIT 引擎,所以任意值如 w-[327px] 和自定义主题扩展是尽力而为。要 100% 保真请用官方 Tailwind 编译器;本工具用于快速查询和复制粘贴。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
Tailwind 类名转 CSS 工具可以快速将 Tailwind CSS 实用类名（如布局、间距、颜色、响应式及状态变体）解析并转换成等效的纯 CSS 代码，方便您直接复制应用到非 Tailwind 项目或邮件模板中。
背景
正在为一个老旧的 jQuery 项目开发一个新的卡片组件，希望复用 Tailwind 的现代卡片样式，但项目未配置 Tailwind 构建环境。
问题
需要将包含 flex 布局、内边距、阴影和悬停效果的 Tailwind 类名转换为纯 CSS。
如何使用
在输入框中输入 `flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg`，选择作用域选择器为 `.my-class`。
classes: "flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg", selector: ".my-class"结果
输出包含 `.my-class` 的基础样式、`.my-class:hover` 伪类样式（透明度自动转换为 rgba）以及 `@media (min-width: 768px)` 响应式样式的纯 CSS 代码。
背景
需要为一个独立的营销单页制作一个高亮按钮，单页只引入了基础的 CSS 文件。
问题
需要快速获取 `bg-blue-500/75 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none` 对应的标准 CSS 代码。
如何使用
在输入框中输入上述类名，并将作用域选择器设置为 `.btn`。
classes: "bg-blue-500/75 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none", selector: ".btn"结果
本工具基于静态规则表进行解析，对任意值和自定义主题扩展提供尽力而为的支持。如需 100% 准确的任意值解析，建议使用官方 Tailwind 编译器。
工具会自动将颜色与透明度修饰符展开并转换为标准的 rgba() 格式，确保在所有主流浏览器中都能直接兼容使用。
可以。工具会为响应式前缀生成对应的 @media 媒体查询块，并为状态变体生成对应的伪类选择器（如 :hover）。
可以，您可以通过“作用域选择器”选项选择使用自定义类名（如 .my-class）来包裹输出的 CSS 规则，或者选择 :root。
不需要，这是一个纯前端的静态解析工具，无需安装任何依赖或联网即可即时完成转换。
成功生成 `.btn` 的基础样式（背景色自动展开为 rgba 格式）、`.btn:hover` 和 `.btn:focus` 的 CSS 规则，可直接复制到单页的 style 标签中。