Tailwind CSS Oyun Alanı Elemanlara canlı önizleme ve HTML çıktısı ile Tailwind CSS yardımcı sınıflarını uygulayın.

🎨

Tailwind CSS Oyun Alanı

Elemanlara canlı önizleme ve HTML çıktısı ile Tailwind CSS yardımcı sınıflarını uygulayın.

Tailwind sınıflarını girin

Giriş alanına Tailwind CSS yardımcı sınıflarını yazın veya yapıştırın.

Öğe ve içeriği seçin

HTML öğesi türünü seçin ve iç metin içeriğini ayarlayın.

Ön izleme ve kopyalama

Stil öğesini canlı olarak görün ve sınıflarla birlikte HTML'yi kopyalayın.

Loading tool...

What Is Tailwind CSS Oyun Alanı?

Tailwind CSS Playground, Tailwind yardımcı sınıflarının canlı ön izlemesini sağlar. Tailwind sınıflarını yazın veya yapıştırın ve seçtiğiniz HTML öğesinin nasıl stilendiğini anında görün. Bu araç, Tailwind'i öğrenmek, sınıf kombinasyonları denemek ve bileşen stillerini hızlı bir şekilde prototip yapmak için idealdir. HTML öğesi türünü (div, button, p, span, a) seçebilir ve iç metin içeriğini ayarlayabilirsiniz. Ön ayarlı örnekler kütüphanesi, ortak bileşenler için başlangıç noktaları sağlar: birincil düğmeler, kartlar, rozetler, uyarılar, girişler ve渐işli arka planlar. Oluşturulan çıktı, Tailwind projesine kopyalamaya hazır temiz HTML'dir. Bu araç, bir Tailwind yapılandırması olan Next.js uygulaması içinde çalıştığından, ön izleme gerçek Tailwind işlenmesine göre doğrudur.

Why Use Tailwind CSS Oyun Alanı?

Herhangi bir Tailwind yardımcı sınıfı kombinasyonunun canlı ön izlemesi
Ortak bileşen kalıpları için önceden ayarlanmış örnekler
Gerçekçi prototipleme için birden fazla HTML öğesi türü
Tailwind projelerine yapıştırmaya hazır temiz HTML çıktısı

Common Use Cases

Tailwind'i Öğrenme

Görsel olarak etkilerini anlamak için Tailwind sınıfları ile deney yapın.

Bileşen Prototipleme

Kodu uygulamadan önce bileşen stillerini hızlı bir şekilde prototipleyin.

Sınıf Deneyselleştirme

Mükemmel görüntüyü bulmak için farklı sınıf kombinasyonlarını deneyin.

Takım İletişimi

Belirli Tailwind sınıfı kombinasyonlarını takım üyeleri ile paylaşın.

Technical Guide

Tailwind CSS, stillerin doğrudan HTML'de tek amaçlı sınıflar aracılığıyla uygulanabileceği bir yardımcı çerçeve olarak tasarlanmıştır. Sınıflar tutarlı bir adlandırma kuralına uyar: özellik-değer (örneğin bg-blue-500, text-white, p-4). Cevaplayıcı varyantlar breakpoint ön eklerini kullanır (sm:, md:, lg:, xl:). Durum varyantları pseudo-sınıf ön eklerini kullanır (hover:, focus:, active:). Karanlık mod dark: ön ekinin kullanılmasını gerektirir. Boşluk, 1 birim = 0.25rem (4px) olan bir ölçekte kullanılır. Renkler, en açık (50) ile en koyu (950) arasında değişen bir gölgelendirme sistemini kullanır. Tipografi sınıfları yazı tipi ailesi, boyut, ağırlık, satır yüksekliği ve izleme gibi özellikleri kontrol eder. Esnek kutu ve ızgara yardımcı araçları düzeni işler. @apply yönergesi, tekrar edilen yardımcı desenleri özel sınıflar olarak çıkarabilir. Tailwind'in JIT modu, yalnızca projenizde kullanılan sınıflar için CSS oluşturur.

Tips & Best Practices

1
Önceden ayarlanmış örneklerle başlayın ve sınıfları öğrenmek için adlandırma kalıplarını değiştirin
2
md: ve lg: gibi yanıt veren ön ekleri test edilecek yanıtlayıcı davranış için kullanın
3
hover: ile birlikte geçiş için pürüzsüz etkileşimli efektler elde edin
4
Bu aracı referans olarak resmi Tailwind belgeleri ile birlikte kullanın

Related Tools

CSS Düğme Oluşturucu

Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.

🎨 CSS & Design

CSS Kart Oluşturucu

Arka plan bulanıklığı, saydamlık ve gölge kontrolleri ile cam gibi kart tasarımları oluşturun.

🎨 CSS & Design

Cevrimiçi Tasarım Testeri

Yerleşik iframe görüntüleyici ile ortak cihaz kesme noktalarında web sitelerini önizleyin.

🎨 CSS & Design

Tailwind Yapılandırma Oluşturucu

Özel renkler, yazı tipleri ve kırılma noktaları ile Tailwind CSS yapılandırma dosyalarını oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Tüm Tailwind sınıfları kullanılabilir mi?

Evet, bu araç bir Tailwind yapılandırılmış projede çalıştığından, standart yardımcı sınıflar kullanılabilir.

Q Yanıtlayıcı sınıfları test edebilir miyim?

Yanıtlayıcı ön ekleri tanınır ancak ön izleme sabit bir konteynıra sahiptir. Kırmataşları test etmek için tarayıcı pencerenizi yeniden boyutlandırın.

Q Karanlık mod sınıflarını destekler mi?

dark: ön ekli sınıfları, sistem veya uygulamanızın karanlık mod ayarına bağlı olarak çalışacaktır.

Q Özel Tailwind sınıflarını kullanabilir miyim?

Yalnızca standart Tailwind yardımcı sınıfları kullanılabilir. Proje yapılandırmanızdan özel sınıflar burada çalışmaz.

Q Hangi sınıfları kullanacağımı nasıl öğrenebilirim?

Önceden ayarlanmış örneklerle başlayın ve tam sınıf referansları için resmi Tailwind CSS belgelerine başvurun.

About This Tool

Tailwind CSS Oyun Alanı is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.