Tailwind Olarak Kopyala, görsel tasarım ile Tailwind CSS kodu arasındaki boşluğu kapatır. Bir web sayfasındaki herhangi bir öğeye tıklayın ve hesaplanmış CSS stillerinden oluşturulan eşdeğer Tailwind utility sınıflarını anında alın — JSX, Vue şablonu veya HTML dosyanıza yapıştırmaya hazır.
Tailwind CSS ile geliştirmek, özel CSS yazmak yerine utility sınıfları cinsinden düşünmek demektir. Ancak mevcut bir tasarıma başvurduğunuzda — ister bir rakibin açılış sayfası, ister vanilya CSS ile oluşturulmuş bir tasarım sistemi, ister bir müşterinin mevcut web sitesi olsun — görsel stilleri Tailwind sınıflarına manuel olarak çevirmek zahmetli ve hataya açıktır. Tailwind Olarak Kopyala bunu tamamen otomatikleştirir. Herhangi bir öğe için tarayıcının hesaplanmış stillerini okur ve varsayılan ölçeği kullanarak her özelliği en yakın Tailwind utility sınıfına eşler. Renkler en yakın Tailwind paleti rengine eşleştirilir, boşluk değerleri en yakın rem tabanlı utility'ye yapışır ve tipografi text-* ve font-* sınıflarına eşlenir. Çıktı, doğrudan bileşeninize yapıştırabileceğiniz temiz, tek satırlı bir sınıf dizesidir.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Herhangi bir öğeye tıklayın, tam hesaplanmış CSS'i gerçek zamanlı olarak analiz edilir. Uygulanabilir her özellik eşdeğer Tailwind utility sınıfına eşlenir — bg-purple-600'dan rounded-lg'ye, font-semibold'e kadar. Dönüşüm yükleme veya işleme gecikmesi olmadan anında gerçekleşir.
Araç sadece dize değişimi yapmaz — Tailwind'in tasarım sistemini anlar. 12px'lik bir dolgu p-3'e eşlenir (özel bir değere değil), renkler Tailwind paletindeki en yakın tona eşleştirilir (örn. #7c3aed, purple-600 olur) ve yazı tipi boyutları text-sm, text-base, text-lg vb. olarak eşlenir.
Oluşturulan sınıf dizesi temiz bir çıktı panelinde görüntülenir. Kopyala düğmesine bir kez tıklayın ve dizenin tamamı panonuzda olur — React'ta className="..."a, HTML'de class="..."a veya Vue'de :class="..."a yapıştırmaya hazır.
Daha da hızlı iş akışı için, tarayıcı bağlam menüsünden doğrudan "Tailwind Olarak Kopyala" seçeneğine erişmek için sayfadaki herhangi bir öğeye sağ tıklayın. DevSuite yuvasını açmanıza gerek yok — sadece sağ tıklayın, tıklayın ve sınıflar panonuzda olsun.
Basit eşlemelerin ötesine geçer. Kutu gölgelerini (shadow-md, shadow-lg), degradeleri, kenarlık stillerini, flex/grid düzen sınıflarını, opaklık değerlerini ve hatta max-width ve en-boy oranları gibi duyarlı özellikleri işler.
Yalnızca tarayıcının varsayılanlarından farklı olan sınıfları içerir — gereksiz utility'ler yok. Çıktı özlü ve üretime hazırdır, miras alınan veya varsayılan değerler için sınıflarla şişirilmemiştir.
Tailwind Olarak Kopyala covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorBir web sitesini vanilya CSS'ten veya Bootstrap'ten Tailwind'e mi yeniden oluşturuyorsunuz? Mevcut sitedeki her büyük bileşene tıklayın, Tailwind sınıflarını kopyalayın ve bunları yeni Tailwind bileşenleriniz için başlangıç noktası olarak kullanın. Manuel özellik-sınıf çevirisinden saatler kurtarır.
Başka bir web sitesinde güzel tasarlanmış bir kart, kahraman bölümü veya navigasyon mu buldunuz? Üzerine tıklayın, Tailwind sınıflarını alın ve kendi sürümünüzü oluşturmak için referans olarak kullanın. Onlarca CSS özelliğini manuel olarak incelemeye gerek yok.
Bir Figma veya PSD maketinden yeni Tailwind bileşenleri oluştururken, önce DevTools kullanarak tarayıcıda tasarımı uygulayın, ardından elle yazmak yerine tam utility sınıflarını almak için Tailwind Olarak Kopyala ile öğeye tıklayın.
Elle yazılan CSS değerlerinizin gerçekten geçerli Tailwind ölçek değerlerine eşlendiğinden emin olun. Padding: 14px yazdıysanız, araç size bunun p-3'e (12px) mi yoksa p-3.5'a (14px) mı yuvarlandığını gösterir — yayınlanmadan önce tutarsızlıkları yakalar.
Tailwind'e yeni misiniz? Geleneksel CSS özelliklerinin utility sınıflarına nasıl çevrildiğini görmek için herhangi bir web sayfasındaki öğelere tıklayın. Gerçek örnekleri görerek Tailwind sınıf adlandırma sistemini öğrenmenin etkileşimli bir yoludur.
DevSuite Pro yüzen yuvasını açın ve Tailwind Olarak Kopyala simgesine tıklayın. Araç etkinleşir ve imleciniz artık öğelere tıklayabileceğinizi belirten bir artı imlecine dönüşür.
Sayfadaki herhangi bir öğeye tıklayın — bir düğme, kart, başlık, navigasyon çubuğu. Öğe vurgulanır ve hesaplanmış CSS'i analiz edilir. Oluşturulan Tailwind sınıf dizesini gösteren yüzen bir panel belirir.
Panel, mantıksal gruplara ayrılmış tam Tailwind sınıf dizesini gösterir. Hangi CSS özelliğinin hangi Tailwind sınıfına eşlendiğini tam olarak görebilirsiniz. Altta yatan CSS değerini görmek için herhangi bir sınıfın üzerine gelin.
Tam sınıf dizesini almak için "Kopyala" düğmesine tıklayın. Doğrudan bileşeninizin className'ine, class özniteliğine veya şablonuna yapıştırın. Sınıflar standart bir Tailwind kurulumuyla anında çalışır.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.