Elysia Tools
导航
Design
粘贴使用任意值的 Tailwind 类（w-[137px]、text-[#bada55]、grid-cols-[1fr_2fr]、[mask-type:luminance]），查看生成的 CSS、实时可视化预览、数据类型提示识别，以及每条转换的解释。适合调试 calc()、CSS 变量与超出设计令牌刻度的一次性取值。
详情
面向前端工程师与设计系统作者的 Tailwind 任意值演练场：
纯离线解析器：不会运行 Tailwind 运行时，因此静态工具类与主题令牌不在范围内。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
Tailwind 任意值演练场是一个专为前端开发者设计的在线调试工具，支持即时解析 Tailwind CSS 的方括号任意值语法（如 w-[137px]、[mask-type:luminance] 等）。它能够离线将这些类名转换为标准的 CSS 规则，提供实时可视化预览、数据类型提示识别以及详细的转换说明，帮助您轻松调试复杂的 calc() 计算、CSS 变量和非常规的设计令牌数值。
背景
在重构页面时，需要使用非标准尺寸的容器和自定义渐变色背景，但不想在本地频繁修改代码查看编译结果。
问题
需要确认 w-[137px]、h-[calc(100vh-4rem)] 和 bg-[linear-gradient(90deg,#6366f1,#8b5cf6)] 能否正确转换为 CSS。
如何使用
将这些类名粘贴到输入框中，选择“展开”输出风格，并开启实时预览。
classes: "w-[137px]\nh-[calc(100vh-4rem)]\nbg-[linear-gradient(90deg,#6366f1,#8b5cf6)]"结果
工具立即生成了对应的 width、height 和 background-image CSS 规则，并展示了渐变色的视觉预览。
背景
正在使用 Tailwind 构建复杂的网格布局，并需要应用一些不常用的 CSS 属性（如 scroll-snap-type）。
问题
需要确保下划线在网格轨道中正确转换为空格，且任意属性 [scroll-snap-type:y_mandatory] 语法无误。
如何使用
输入 grid-cols-[1fr_2fr_1fr] 和 [scroll-snap-type:y_mandatory]，选择“压缩”输出风格。
classes: "grid-cols-[1fr_2fr_1fr]\n[scroll-snap-type:y_mandatory]"结果
下划线被成功转换为网格轨道间的空格，任意属性也直接输出了对应的 CSS 规则。
不支持。本工具采用纯离线解析，专注于方括号任意值语法，不运行完整的 Tailwind 运行时，因此无法展开静态类和主题令牌。
数据类型提示用于消除前缀复用时的歧义，例如 text-[length:14px]（解析为字体大小）与 text-[color:var(--brand)]（解析为文本颜色）。
在 Tailwind 任意值中，空格需要使用下划线代替，例如 grid-cols-[1fr_2fr] 会被解析为 grid-template-columns: 1fr 2fr。
可以。您可以输入类似 bg-[var(--my-color)] 的类名，工具会正确生成引用该变量的 CSS 规则。
工具会根据解析出的 CSS 属性，在预览区域动态应用样式（如颜色色板或尺寸块），并支持切换浅色和深色主题。