🌊 Tailwind CSS'den Düz CSS'e Dönüştürücü

Convert Tailwind CSS utility classes to plain CSS and back. Supports Tailwind v3 classes including spacing, colors, flexbox, grid. Free online converter.

Paste a list of Tailwind classes (like flex items-center p-4 text-lg font-bold) and get the equivalent plain CSS properties. Switch direction for CSS → Tailwind conversion. Useful when migrating projects or working without Tailwind in scope.

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.