🌊 Tailwind ↔ CSS Converter
Convert plain CSS to Tailwind CSS utility classes instantly. Automatically maps colors, spacing, typography, and more. Free online CSS to Tailwind converter for developers.
How to Use
1
Choose direction
Select "Tailwind → CSS" to convert class names to CSS properties, or "CSS → Tailwind" to go the other way.
2
Paste your code
Type or paste Tailwind classes (space-separated) or CSS properties in the input area.
3
Copy the output
Click Convert and then Copy to use the result in your project.
Frequently Asked Questions
What does Tailwind CSS do?
Tailwind CSS is a utility-first CSS framework where you compose designs using small single-purpose classes directly in your HTML, like text-lg, font-bold, p-4, flex, items-center. Each class maps to one or a few CSS declarations.
When should I convert Tailwind to plain CSS?
When you need styles in a non-HTML context (email templates, React Native, PDF generators), when working with a team that does not use Tailwind, or when extracting styles for a CSS component library.
Does this converter support all Tailwind classes?
This tool covers the most common Tailwind v3 utility classes: spacing, typography, colors, flexbox, grid, sizing, borders, shadows, and more. Arbitrary value classes (like w-[350px]) are not supported.
How do I convert CSS back to Tailwind?
Switch the direction to CSS → Tailwind and paste your CSS properties. The tool maps declarations like margin: 0.5rem to m-2, display: flex to flex, etc.
Is JIT mode supported?
The converter handles standard Tailwind v3 classes including responsive prefixes (sm:, md:, lg:) and state variants (hover:, focus:, dark:). JIT arbitrary values ([value]) are not converted.
完整指南：CSS转Tailwind工具
什么是这个工具？
将CSS转换为等效的Tailwind CSS实用类。适用于迁移旧版CSS、了解特定CSS值对应的Tailwind类，以及加速在现有项目中采用Tailwind。
如何使用
- 粘贴CSS到输入面板。
- 等效的Tailwind类出现在右侧面板。
- 复制类用于HTML/JSX。
专业技巧
- 无精确类时使用任意值语法：
w-[342px]。 - 在
tailwind.config.js的theme中扩展你的设计值。 - 谨慎使用
@apply——违背Tailwind避免CSS抽象的理念。