Tailwind 转 CSS
将 Tailwind CSS 工具类转换为等效的原生 CSS 声明,支持响应式和状态变体。
输出模式
功能特性
即时转换
输入时实时转换,无需点击按钮,结果即时呈现。
响应式与状态
支持 sm:、md:、lg:、xl:、2xl: 断点,以及 hover:、focus:、active: 状态变体。
任意值
支持 w-[200px]、p-[1.5rem]、text-[14px] 等任意值语法。
Ctrl+Enter 运行Ctrl+Shift+C 复制
了解更多
Tailwind 转 CSS:将工具类转换为标准 CSS
将 Tailwind 工具类转换为原生 CSS。查看每个类的作用,并了解何时使用纯 CSS。
什么是 Tailwind CSS,以及为何要转换它
Tailwind CSS 是一个功能类优先(utility-first)的 CSS 框架,它让开发者通过在 HTML 中直接套用小巧、单一用途的类来为元素设置样式。你无需编写自定义 CSS 规则,而是用 flex、p-4、text-blue-500、rounded-lg 这样的类名以内联方式组合样式。
阅读约 5 分钟阅读完整指南