🌊 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.

Tailwind Classes

CSS Output

How to Use

Choose direction

Select "Tailwind → CSS" to convert class names to CSS properties, or "CSS → Tailwind" to go the other way.

Paste your code

Type or paste Tailwind classes (space-separated) or CSS properties in the input area.

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.

Tam Rehber: CSS'den Tailwind'e Dönüştürücü

Tailwind CSS, web geliştirmede en popüler CSS çerçevelerinden biri haline gelmiştir; semantik sınıf adlarından utility-first kompozisyona doğru paradigmayı değiştirmiştir. Mevcut CSS kodunu Tailwind sınıflarına dönüştürmek, projeleri taşıırken veya bir tasarım sistemiyle prototip oluştururken yaygın bir görevdir.

Utility-First Yaklaşım

Geleneksel CSS metodolojisi semantik sınıf adlarını teşvik eder: .kart, .hero-buton. Tailwind bunu tersine çevirir: flex, p-4, text-lg, bg-blue-500 gibi küçük, tek amaçlı utility sınıflarını doğrudan HTML'nizde uygularsınız. Avantajı, çoğu UI çalışması için doğrudan CSS yazmamanızdır. Dezavantajı ise daha ayrıntılı HTML işaretidir.

Yaygın CSS'den Tailwind'e Eşlemeler

margin: 16px → m-4 (Tailwind 4px temel birimi kullanır)
padding: 8px 16px → py-2 px-4
display: flex; align-items: center → flex items-center
font-size: 1.25rem; font-weight: 600 → text-xl font-semibold
border-radius: 8px → rounded-lg

JIT Modu ve Keyfi Değerler

w-[337px]
text-[#1a2b3c]
mt-[clamp(1rem,5vw,3rem)]

Keyfi değerler, tasarımın Tailwind'in varsayılan ölçeğine uymayan belirli bir değer gerektirdiği durumlarda kullanılan pratik bir kaçış kapısıdır.

@apply Direktifi

.btn-birincil {
  @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg
         hover:bg-blue-700 focus:outline-none;
}

@apply'ı idareli kullanın; Tailwind'in utility-first yaklaşımının ortadan kaldırmak için tasarlandığı soyutlama katmanını yeniden ortaya çıkarır.

Tailwind'in Kullanılmaması Gereken Durumlar

Karmaşık animasyonlar: Çok adımlı keyframe animasyonları özel CSS veya eklentiler gerektirir
Karmaşık sözde öğeler: ::before ve ::after içeriği yalnızca utility sınıflarıyla ayarlanamaz
Çalışma zamanında dinamik oluşturulan sınıflar: JIT bunları statik analizde tespit edemez

Tailwind Config Özelleştirme

module.exports = {
  theme: {
    extend: {
      colors: {
        marka: { 500: '#e63946', 600: '#c1121f' }
      },
      spacing: { 18: '4.5rem' }
    }
  }
};

Özel backdrop-blur değerleri gerektiren glassmorphism efektleri için CSS Camlaşma'ya, Tailwind gradient utility sınıflarına dönüşen gradient arka planlar için Gradient Oluşturucu'ya bakın.