Tailwind sınıf sıralayıcı
Utility sınıflarını class / className nitelikleri içinde Tailwind'in önerilen sırasına göre sırala.
Tailwind sınıf sıralayıcı
HTML veya JSX kodunu yapıştırın ve bu araç her class ve className niteliğinde bulunan sınıfları Tailwind CSS'nin önerilen sırasına göre yeniden düzenler — resmi prettier-plugin-tailwindcss'nin kullandığı aynı kategori sırası: önce düzen ve konumlandırma, sonra flexbox ve grid, aralık, boyutlandırma, tipografi, arka planlar, kenarlıklar, efektler ve bunun gibi şeyler, yanı sıra duyarlı ve durum değiştiricileri (hover:, sm:, dark:) uyguladıkları temel yardımcı programın ardından. Tutarlı bir sıra daha küçük diffler ve daha kolay incelenen pull istekleri sağlar, çünkü "flex p-4 text-white" ve "text-white p-4 flex" yazan iki geliştirici aynı çıktı alır.
Tüm yapıştırılan belgeyi işlemeyi seçin — bulduğu her class ve className niteliğini tarar — veya girdileri etrafında başka bir şey olmayan basit bir sınıf listesi olarak işleyin. Tailwind olmayan sınıflar (kendi bileşen sınıflarınız veya bu aracın tanımadığı bir CSS çerçevesinin yardımcı program adları) her listenin başında veya sonunda tutulur, liste boyunca dağılmak yerine. "Yinelenen sınıfları kaldır" seçeneğini açarak tam tekrarları bırakabilir ve "Birbirini iptal eden sınıflar hakkında uyar" seçeneğini açarak p-4 ve p-2 veya block ve hidden gibi çiftleri işaretleyebilirsiniz, bu da birlikte uygulandığında birbirini geçersiz kılar — sayı çıktının altında canlı tally'de görünür. "Duyarlı varyantları gruplaştır" seçeneği tüm sm:, md: ve lg: sınıflarını sonunda toplar, aksine her birini unprefixed muadili yanında ara vermek yerine.
Template literalinin içindeki sınıflar JavaScript ifadesi içerir, className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`} gibi, varsayılan olarak dokunulmaz kalır çünkü araç çalışma zamanında bir değişkenin ne döndüreceğini bilemez — "Dinamik sınıfları dokunulmamış bırak" seçeneğini kapatarak yerine sıralamak için, her ifadeyi opak bir token olarak ele alın. Çıktı, editörünüze geri yapıştırmaya hazır değiştirilen kaynak kodu veya düz sıralanmış listeyi, satır başına bir sınıf olarak yapılandırır.
Her şey tarayıcınızda yerel olarak çalışır — yapıştırdığınız HTML, JSX veya sınıf listesi hiçbir yere yüklenmez. İşiniz bittiğinde sonucu kopyalayın, .txt dosyası olarak indirin veya çıktıyı başka bir araç çalıştırmak için geri girdiye gönderin.