Tailwind Oyun Alanı
Tailwind CSS v4 yardımcı sınıflarıyla HTML yazın ve tarayıcıda canlı derleyin.
Tailwind Oyun Alanı nedir?
Tailwind CSS v4 yardımcı sınıflarıyla HTML yazıp derlenen sonucu canlı önizlemede gördüğünüz, tarayıcı içinde çalışan ücretsiz bir düzenleyicidir. Resmî Tailwind v4 tarayıcı derleyicisi sayfaya gömülüdür, kuruluma gerek yoktur.
Kodum bir yere yükleniyor mu?
Hayır. Derleme tamamen tarayıcınızda, Tailwind motorunun yerel kopyasıyla yapılır. HTML'iniz sayfadan asla çıkmaz ve taslaklar yalnızca tarayıcının localStorage'ında saklanır.
Hangi Tailwind sürümü kullanılıyor?
En yeni ana sürüm olan Tailwind CSS v4, resmî @tailwindcss/browser derleyicisiyle çalışır. Tüm çekirdek yardımcı sınıflar, varyantlar ve varsayılan tema çalışır; köşeli parantezle yazılan serbest değerler de dahildir.
Canlı önizleme nasıl çalışır?
HTML'iniz derleyiciyle birlikte yalıtılmış bir iframe'e enjekte edilir. Her düzenlemeden sonra yardımcı sınıflar 500 milisaniyelik duraklamayla yeniden derlenir; yazmak akıcı kalır, önizleme güncel olur.
Koyu mod stillerini nasıl test ederim?
«Koyu önizleme» düğmesini açın. Önizleme belgesine dark sınıfını ekler ve derleyici dark: varyantını bu sınıfa bağlar; böylece dark:bg-slate-900 gibi sınıflar anında tepki verir.
Tailwind'in ürettiği CSS'i görebilir miyim?
Evet. Editörlerin altındaki «Derlenmiş CSS» paneli, derleyicinin işaretlemeniz için ürettiği tam stil sayfasını gösterir; «CSS kopyala» düğmesi bunu panoya kopyalar.
İndirilen HTML ne içerir?
HTML indir düğmesi, işaretlemenizin yanına derlenmiş CSS'yi head bölümüne gömülü olarak içeren bağımsız bir dosya üretir; sayfa CDN bağlantısı ve internet olmadan çevrimdışı doğru görüntülenir.
Başlangıç şablonları var mı?
Evet. Şablon seçicide bir hero bölümü, duyarlı kart ızgarası ve üç kademeli fiyat tablosu bulunur; hepsi güncel v4 sınıflarıyla yazılmıştır, ayrıca minimal boş bir başlangıç da vardır.
Tailwind Oyun Alanı Nasıl Kullanılır
Bu oyun alanı, resmi Tailwind CSS v4 tarayıcı derleyicisini tamamen sizin makinenizde çalıştırır. Solda yardımcı sınıflarla düz HTML yazarsınız, derleyici eşleşen CSS'yi izole bir önizleme iframe'i içinde üretir ve alttaki panel üretilen tam stil sayfasını gösterir. Hiçbir şey yüklenmez: derleyici, işaretlemeniz ve taslaklarınızın hepsi tarayıcıda kalır.
- Şablon seçicisinden bir başlangıç noktası seçin: Hero, kart ızgarası, fiyat tablosu veya Boş; metniniz ziyaretler arasında otomatik olarak geri yüklenir.
- Soldaki editörde HTML'i düzenleyin. Tab'a basmak iki boşluk ekler ve yazmayı bıraktıktan yaklaşık 500 ms sonra önizleme yeniden derlenir.
- Satır kaymasını kontrol etmek için Yumuşak kaydırma'yı, editör metin boyutunu ayarlamak için yazı boyutu seçicisini açıp kapatın.
- Önizleme belgesine "dark" sınıfını eklemek için Koyu önizleme'yi açın; dark:bg-slate-900 gibi yardımcılar anında tepki verir.
- Oluşturulan kuralları Derlenmiş CSS panelinde okuyun ve gerektiğinde CSS'yi kopyala ile kopyalayın.
- Ham işaretleme için HTML'yi kopyala'yı, derlenmiş CSS gömülü bağımsız bir dosya için HTML'yi indir'i kullanın — çevrimdışı açılmaya hazır.
İndirmede gerçek stiller ancak en az bir derlemeden sonra olur; dışa aktarmadan önce önizlemenin bir kez render olmasına izin verin. Üretilen CSS'yi azaltmak için şablondan kullanılmayan öğeleri silin — panel her zaman mevcut işaretlemenizin tam olarak neye ihtiyaç duyduğunu yansıtır.
İlgili Araçlar
- Kod Oyun Alanı Canlı önizlemeli, satır numaralı düzenleyicili ve yakalanan konsollu çevrimiçi HTML, CSS ve JavaScript oyun alanı. Kod parçalarını anında test edin ve sonucu tek bir HTML dosyası olarak indirin - tamamen tarayıcınızda.
- CSS Grid Oluşturucu Canlı önizlemeli ücretsiz görsel CSS Grid oluşturucu. Etkileşimli olarak duyarlı ızgara düzenleri tasarlayın ve üretim hazır CSS kodunu anında dışa aktarın.
- Chmod Hesaplayıcı Onay kutularıyla Linux dosya izinlerini görselleştirmek ve hesaplamak için ücretsiz çevrimiçi chmod hesaplayıcı. Sayısal (755, 644) ve sembolik gösterim (rwxr-xr-x) arasında anında dönüştürün. setuid, setgid, sticky bit gibi özel izinleri destekler.
- ASCII Tablosu Ondalık, onaltılık, sekizlik, ikili kodlar, HTML varlıkları ve karakter açıklamaları ile eksiksiz ASCII karakter kodlama referansı. Anında arama ve filtreleme.
- HTTP İstek Test Aracı REST API'leri doğrudan tarayıcınızda test edin. Özel başlıklar, gövde ve parametrelerle GET, POST, PUT, DELETE istekleri gönderin. Yanıt durumunu, başlıklarını ve JSON gövdesini anında görün.
- .htaccess oluşturucu Apache .htaccess kuralları oluşturun: yönlendirmeler, yeniden yazmalar, güvenlik başlıkları, önbellekleme ve daha fazlası.
- Robots.txt Oluşturucu Ücretsiz çevrimiçi robots.txt oluşturucu. Arama motoru taramasını kontrol etmek, tarayıcı erişimini yönetmek ve sitenizin SEO'sunu optimize etmek için robots.txt dosyaları oluşturun ve özelleştirin.
- Sitemap Oluşturucu Ücretsiz çevrimiçi XML sitemap oluşturucu. URL ekleyin, öncelik ve sıklık ayarlayın, SEO uyumlu sitemap anında oluşturun.