Tailwind CSS: Hızlı, Duyarlı Tasarım için Yardımcı Programda İlk CSS Çerçevesi ve API

Tailwind CSS Çerçevesi

Günlük olarak teknolojiyle derinden ilgilensem de, şirketimin müşteriler için uyguladığı karmaşık entegrasyonları ve otomasyonu paylaşmak istediğim kadar zamanım olmuyor. Ayrıca, çok fazla keşif zamanım yok. Hakkında yazdığım teknolojinin çoğu, Martech Zone ama arada bir – özellikle Twitter üzerinden – paylaşmam gereken yeni bir teknolojinin etrafında biraz vızıltı görüyorum.

Web tasarımında, mobil uygulama geliştirmede çalışıyorsanız veya hatta sadece bir içerik yönetim sistemi kuruyorsanız, muhtemelen birden çok stil sayfasında rekabet eden stillerin hayal kırıklıklarıyla boğuşmuşsunuzdur. Her tarayıcıda yerleşik olarak bulunan harika geliştirme araçlarıyla bile, CSS'yi izlemek ve temizlemek çok fazla zaman ve enerji gerektirebilir.

CSS Altyapıları

Son yıllarda tasarımcılar, hazırlanmış ve kullanıma hazır stil koleksiyonları yayınlama konusunda oldukça şaşırtıcı bir iş çıkardılar. Bu CSS Stil Sayfaları, geliştiricilerin sıfırdan bir CSS dosyası oluşturmak yerine yalnızca bir çerçeveye başvurabilmeleri için tüm farklı stilleri ve duyarlı yetenekleri barındırmaya çalışan CSS Çerçeveleri olarak daha iyi bilinir. Bazı popüler çerçeveler şunlardır:

  • Çizme atkısı – ilk olarak Twitter tarafından tanıtılan, on yılda gelişen bir çerçeve. Sayısız özellik sunar. SASS gerektiren, üzerine yazılması zor, JQquery'ye bağlı olan dezavantajları var ve yüklenmesi oldukça ağır.
  • Bulma – geliştirici dostu ve JavaScript'e bağlı olmayan temiz bir çerçeve.
  • vakıf – kolayca özelleştirilebilen tonlarca bileşene sahip daha genel ve kullanışlı bir CSS çerçevesi. Ek olarak, var E-posta Vakfı ve Hareket UI animasyonlar için.
  • UI Kiti – ön uçunuzu hızlı ve kolay bir şekilde geliştirmek için HTML, JavaScript ve CSS kombinasyonu.

Tailwind CSS Çerçevesi

Diğer çerçeveler, popüler kullanıcı arabirimi öğelerini barındırmak için harika bir iş çıkarırken, Tailwind olarak bilinen bir metodoloji kullanır. atomik CSS. Kısacası, Tailwind, söylediklerini yapmak için doğal dili kullanarak sınıf adlarını ustaca düzenledi. Bu nedenle, Tailwind bir bileşen kitaplığına sahip olmasa da, yalnızca CSS sınıf adlarına başvurarak kolayca güçlü, duyarlı bir arabirim oluşturma yeteneği zarif, hızlı ve benzersizdir.

İşte bazı gerçekten harika örnekler:

CSS Izgaraları

css sütunu başlangıç ​​ızgaraları sütunları

CSS Gradyanları

css gradyanları

Karanlık Mod Desteği için CSS

css karanlık mod

Tailwind ayrıca harika bir uzatma mevcut VS Code için, böylece Microsoft'un kod düzenleyicisinden sınıfları kolayca tanımlayabilir ve ekleyebilirsiniz.

Daha da ustaca olan Tailwind, üretim için oluştururken kullanılmayan tüm CSS'leri otomatik olarak kaldırır; bu, son CSS paketinizin olabilecek en küçük olduğu anlamına gelir. Aslında, çoğu Tailwind projesi müşteriye 10 kB'den daha az CSS gönderir.

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.