Tailwind Yardımcısı, bir web sayfasındaki herhangi bir öğeyi inceler ve eşleşen Tailwind CSS utility sınıflarının kapsamlı, kategorize edilmiş bir dökümünü oluşturur. Basit bir sınıf dizesinin aksine sonuçları kategoriye göre düzenler — Düzen, Boşluk, Tipografi, Renkler, Kenarlıklar ve Efektler — böylece her sınıfın tam olarak neyi kontrol ettiğini anlarsınız.
Tailwind Olarak Kopyala yapıştırmanız için hızlı bir sınıf dizesi verirken, Tailwind Yardımcısı derinlemesine analiz yapan yardımcıdır. Bir öğenin tam stil kompozisyonunu Tailwind terimleriyle anlamak isteyen geliştiriciler için oluşturulmuştur. Her hesaplanmış CSS özelliği Tailwind karşılığına eşlenir ve mantıksal kategorilere gruplanır. Bir öğenin items-center hizalamalı flex düzen kullandığını, alt öğeler arasında gap-3 ile p-5 dolgusuna sahip olduğunu, tipografi için text-lg font-bold kullandığını ve bg-slate-900 rounded-lg border border-slate-700 görünümüne sahip olduğunu bir bakışta görebilirsiniz. Yalnızca birini kopyalamak için herhangi bir sınıf etiketine tıklayın veya tüm dizeyi almak için "Tümünü Kopyala"yı kullanın. Kategorize edilmiş görünüm, her şeyi kopyalamak yerine tam olarak ihtiyacınız olan sınıfları seçmeyi kolaylaştırır.
Tailwind sınıfları net kategorilere düzenlenir: Düzen (flex, grid, konum), Boşluk (dolgu, kenar boşluğu, aralık), Tipografi (yazı tipi boyutu, kalınlık, renk), Renkler (arka plan, metin, kenarlık), Kenarlıklar (yarıçap, genişlik, stil) ve Efektler (gölge, opaklık, dönüştürme). Her kategori daraltılabilir ve net bir şekilde etiketlenmiştir.
Herhangi bir öğeye tıklayın — düğmeler, kartlar, başlıklar, giriş alanları, kapsayıcılar — ve panel tam Tailwind sınıf dökümüyle anında dolar. Öğe mor bir kenarlıkla vurgulanır, böylece neyin incelendiğini tam olarak bilirsiniz.
Her Tailwind sınıfı tıklanabilir bir etiket olarak görüntülenir. Sadece o sınıfı panoya kopyalamak için herhangi bir etikete (p-5 veya font-bold gibi) tıklayın. İnce bir "kopyalandı" animasyonu eylemi onaylar. Yalnızca bir veya iki belirli sınıfa ihtiyacınız olduğunda mükemmeldir.
Alttaki "Tüm Sınıfları Kopyala" düğmesi, tüm Tailwind sınıflarının temiz, boşlukla ayrılmış bir dizesini oluşturur ve panonuza kopyalar. className="..." veya class="..." içine doğrudan yapıştırmaya hazır.
Her değer Tailwind'in varsayılan boşluk ve boyutlandırma ölçeğine eşlenir. 16px yazı tipi text-base'e, 24px dolgu p-6'ya ve #7c3aed purple-600'e eşlenir. Tam eşleşme olmadığında en yakın ölçek değeri seçilir ve belirtilir.
Panelde herhangi bir Tailwind sınıf etiketinin üzerine gelerek oluşturulduğu orijinal hesaplanmış CSS değerini görün. Örneğin, "p-5" üzerine geldiğinizde "padding: 20px" görünür. Bu çift yönlü görünüm, sınıfları gerçek CSS değerleriyle bağlayarak Tailwind ölçeğini öğrenmenize yardımcı olur.
Tailwind Yardımcısı covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*Düz bir sınıf dizesinin aksine, kategorize edilmiş görünüm bir öğenin tam kompozisyonunu anlamanızı sağlar. Bir kartın flex düzen, belirli dolgu, kalın tipografi, slate arka plan, yuvarlatılmış kenarlıklar ve hafif bir gölge kullandığını görün — her yönü kendi bölümünde.
Herhangi bir web sitesinde iyi tasarlanmış bir öğeyi inceleyin, ardından ilgili kategori sınıflarını kopyalayarak Tailwind projenizde yeniden oluşturun. Düzeni bir öğeden, tipografiyi başka bir öğeden ve renkleri marka paletinizden alın — karıştırın ve eşleştirin.
CSS kaynak değerlerini görmek için sınıf etiketlerinin üzerine gelin. Bu etkileşimli eşleme, p-4'ün 16px anlamına geldiğini, text-lg'nin 18px anlamına geldiğini veya purple-600'ün #7c3aed olduğunu öğrenmenin en hızlı yoludur. Herhangi bir web sitesini bir Tailwind öğrenme alıştırmasına dönüştürün.
Kendi Tailwind ile oluşturulmuş sitenizdeki öğeleri, tasarım sisteminden tutarlı boşluk, renk ve tipografi kullandıklarını doğrulamak için inceleyin. Standart ölçek değerleri (p-3 veya p-3.5) olması gereken yanlışlıkla tek seferlik değerleri (p-[13px] gibi) tespit edin.
Yapıştırmanız için hızlı bir sınıf dizesine ihtiyacınız olduğunda Tailwind Olarak Kopyala'yı kullanın. Dökümü incelemek, tek sınıfları seçici olarak kopyalamak veya her CSS özelliği için neden belirli Tailwind sınıflarının seçildiğini anlamak istediğinizde Tailwind Yardımcısını kullanın.
DevSuite Pro yüzen yuvasını açın ve Tailwind Yardımcısı simgesine tıklayın. Araç etkinleşir ve sınıf dökümlerini görüntülemeye hazır şekilde sağ tarafta bir panel görünür.
Sayfadaki herhangi bir öğeye tıklayın. Mor bir kenarlıkla vurgulanır ve panel kategorize edilmiş Tailwind sınıflarıyla dolar. Her kategori (Düzen, Boşluk, Tipografi, Renkler, Kenarlıklar, Efektler) sınıf etiketleriyle bir bölüm olarak gösterilir.
Öğenin tam stil kompozisyonunu anlamak için kategorilere göz atın. Her sınıf tıklanabilir bir etikettir — kaynak CSS değerini görmek için üzerine gelin, o tek sınıfı kopyalamak için tıklayın.
Belirli sınıfları kopyalamak için tek etiketlere tıklayın veya her şeyi tek bir dize olarak almak için alttaki "Tüm Sınıfları Kopyala" düğmesini kullanın. Doğrudan Tailwind bileşeninize yapıştırın.
Paneli yeni sınıflarla anında güncellemek için sayfadaki başka bir öğeye tıklayın. Devre dışı bırakıp yeniden etkinleştirmeye gerek yok — birden fazla öğeyi sırayla incelemek için tıklamaya devam edin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.