Tailwind CSS Converter
Convert between inline CSS and Tailwind CSS classes. 100% client-side processing.
No data sent to serverRelated Tools
What is Tailwind CSS?
Tailwind CSS (Adam Wathan, 2017) is a utility-first CSS framework that provides low-level utility classes — flex, p-4, text-center, bg-blue-500 — instead of pre-styled components. You compose designs directly in markup without writing custom CSS for most use cases.
Why utility-first?
Traditional CSS suffers from naming hell (.card vs .product-card-large-with-image), specificity wars, and unused styles. Utility classes solve all three: tiny vocabulary (~500 utilities cover 95% of designs), no naming required, automatically purged in production. Tailwind v4 (Stable in January 2025, after 2024 alpha/beta) generates only the CSS you actually use — typical bundle size is 5–20 KB vs Bootstrap's 200+ KB.
Why convert between CSS and Tailwind?
Two main scenarios. Migrating an existing codebase: you have stylesheets full of CSS rules that need to become Tailwind classes. Debugging or documentation: you see Tailwind classes and want to know the underlying CSS to understand specificity, override rules, or replicate elsewhere. This converter handles both directions instantly.
How to Use
- Choose CSS → Tailwind or Tailwind → CSS direction.
- Paste your CSS rules (with or without selector wrapping) or space-separated Tailwind classes.
- Conversion happens instantly. Tailwind output preserves logical grouping (layout, spacing, typography, color).
- Click Copy to copy the result.
For unmapped properties, output uses Tailwind's arbitrary value syntax: [grid-template-columns:1fr_2fr], [clip-path:polygon(...)]. This works in Tailwind v3+ and produces the exact CSS you specified.
Common CSS → Tailwind Patterns
Layout
display: flex → flex display: grid → grid display: inline-block → inline-block position: absolute → absolute position: relative → relative top: 0; left: 0 → top-0 left-0 (or inset-0)
Spacing
padding: 1rem → p-4 padding: 1rem 2rem → px-8 py-4 margin: 0 auto → mx-auto margin-top: 0.5rem → mt-2 gap: 1rem → gap-4
Typography
font-size: 1rem → text-base font-size: 1.125rem → text-lg font-weight: 700 → font-bold text-align: center → text-center color: #3b82f6 → text-blue-500 line-height: 1.5 → leading-normal
Backgrounds & Borders
background-color: #1f2937 → bg-gray-800 border: 1px solid #e5e7eb → border border-gray-200 border-radius: 0.5rem → rounded-lg border-radius: 9999px → rounded-full box-shadow: 0 4px 6px rgba(0,0,0,.1) → shadow-md
Responsive (mobile-first)
@media (min-width: 640px) {
.x { padding: 2rem; }
} → sm:p-8
@media (min-width: 1024px) {
.x { display: grid; }
} → lg:gridBreakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).
States (hover, focus, etc.)
:hover { background: red } → hover:bg-red-500
:focus { outline: blue } → focus:outline-blue-500
:active { scale: 0.95 } → active:scale-95
[disabled] { opacity: 0.5 } → disabled:opacity-50
.dark x { color: white } → dark:text-whiteMigrating to Tailwind
1. Install & configure (v4 in 2026)
Tailwind v4 (Stable since January 2025) uses a new Oxide engine with Lightning CSS for vendor prefixing — 5× faster full builds, 100× faster incremental builds, no postcss.config.js required for most projects. npm install tailwindcss@latest @tailwindcss/postcss + @import "tailwindcss"; in your CSS.
2. Migrate component-by-component
Don't migrate everything at once. Start with new components, then pick one component per week. Tailwind classes can coexist with traditional CSS during transition. Tools like @tailwindcss/upgrade CLI automate v3→v4 migration.
3. Extract repeating patterns with @apply
When you find yourself typing the same 10 utilities repeatedly (e.g., button styles), extract to a CSS class:
/* In your CSS */
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white rounded-md
hover:bg-blue-600 focus:outline-blue-500;
}Better in 2026: use component frameworks (React, Vue, etc.) where the component itself is the abstraction. @apply is occasionally useful but not the primary mode anymore.
4. Configure custom design tokens
Brand colors, custom spacing, fonts go in tailwind.config.js (v3) or @theme directive in CSS (v4):
@theme {
--color-brand-500: oklch(0.6 0.2 250);
--spacing-card: 1.5rem;
--font-display: "Inter Display", sans-serif;
}5. Watch out for specificity
Tailwind utilities have flat specificity (single class selector). Override order matters — later classes win. Conflicting utilities (e.g., p-4 p-6) need tailwind-merge library to deduplicate programmatically when concatenating class lists.
FAQ
Does this support all CSS properties?
The converter handles the most common CSS properties: display, flexbox/grid, spacing (margin/padding), colors, typography, borders, sizing, opacity, transforms. For anything not in Tailwind's vocabulary, it produces [property:value] arbitrary value syntax — works in Tailwind v3+.
Is the conversion 100% accurate?
For common patterns, yes. Edge cases (complex shorthand, custom design tokens, vendor prefixes, calc expressions) may need manual adjustment. Always review output before production. The converter is meant as a starting point, not a magic wand.
What's new in Tailwind v4?
New Oxide engine (Rust-powered, 5× faster full builds / 100× faster incremental), Lightning CSS integration, CSS-first config (no JS config file required), native CSS variables for theme, automatic content detection (no content array), modern color spaces (OKLCH). Stable release was January 2025 — most projects migrate via @tailwindcss/upgrade CLI.
Should I use Tailwind for all projects?
Best for: marketing sites, dashboards, design systems, rapid prototyping, projects with multiple developers. Less ideal for: design-heavy artistic sites, teams that strongly prefer CSS-in-JS, projects requiring strict CSS isolation (Web Components). For most modern web apps, Tailwind is the productivity win.
Why is my class list so long?
Common Tailwind complaint, but worth the trade-off. Tools like cva (class-variance-authority) and tailwind-merge let you compose variants programmatically. Or extract repeated patterns into components / @apply classes.
⚠️ Reference Only
Output is generated based on your input and is provided for reference. Results may vary depending on your specific use case, edge cases, or environment-specific behavior. We do not guarantee accuracy of conversions, validations, or computed values.
Always verify critical outputs against official documentation or production environments. We are not responsible for any decisions or losses based on these tool results.
📖 Related Guides
Color Formats — HEX, RGB, HSL, OKLCH
Modern CSS color formats explained. When to use OKLCH for perceptual uniformity.
REST vs GraphQL vs gRPC — Choosing an API Paradigm
Trade-offs across performance, tooling, type safety, and team shape. When to use each.
UUID v4 vs ULID — Which to Choose?
Compare UUID v4 and ULID for distributed systems. Performance, sortability, and use cases.