Tailwind CSS: Kerangka Kerja CSS dan API Utilitas-Pertama untuk Desain yang Cepat dan Responsif

Kerangka CSS Tailwind

Sementara saya mendalami teknologi setiap hari, saya tidak mendapatkan waktu sebanyak yang saya ingin bagikan tentang integrasi dan otomatisasi kompleks yang diterapkan perusahaan saya untuk pelanggan. Juga, saya tidak punya banyak waktu penemuan. Sebagian besar teknologi yang saya tulis adalah perusahaan yang mencari Martech Zone meliputnya, tetapi sesekali – terutama melalui Twitter – saya melihat beberapa desas-desus seputar teknologi baru yang perlu saya bagikan.

Jika Anda bekerja dalam desain web, pengembangan aplikasi seluler, atau bahkan hanya menyiapkan sistem manajemen konten, Anda mungkin telah bergulat dengan frustrasi gaya bersaing di beberapa stylesheet. Bahkan dengan alat pengembangan luar biasa yang dibangun di dalam setiap browser, melacak dan membersihkan CSS dapat membutuhkan terlalu banyak waktu dan energi.

Kerangka CSS

Dalam beberapa tahun terakhir, desainer telah melakukan pekerjaan yang luar biasa dalam merilis koleksi gaya yang telah disiapkan dan siap digunakan. CSS Stylesheet ini lebih dikenal sebagai CSS Frameworks, mencoba mengakomodasi semua gaya yang berbeda dan kemampuan responsif sehingga pengembang hanya dapat mereferensikan kerangka kerja daripada membangun file CSS dari awal. Beberapa kerangka kerja populer adalah:

  • Bootstrap – kerangka kerja yang berkembang lebih dari satu dekade, pertama kali diperkenalkan oleh Twitter. Ini menawarkan fitur yang tak terhitung jumlahnya. Itu memang memiliki kelemahan, membutuhkan SASS, sulit untuk di-overwreied, tergantung pada JQquery, dan itu cukup besar dan kuat untuk dimuat.
  • Bulma – kerangka kerja bersih yang ramah pengembang dan tidak bergantung pada JavaScript.
  • Yayasan – kerangka kerja CSS yang lebih umum dan dapat digunakan yang memiliki banyak komponen yang mudah disesuaikan. Selain itu, ada Yayasan untuk Email serta UI Gerak untuk animasi.
  • Kit UI – kombinasi HTML, JavaScript, dan CSS untuk mengembangkan front-end Anda dengan cepat dan mudah.

Kerangka CSS Tailwind

Sementara kerangka kerja lain melakukan pekerjaan yang baik untuk mengakomodasi elemen antarmuka pengguna yang populer, Tailwind menggunakan metodologi yang dikenal sebagai CSS atom. Singkatnya, Tailwind dengan cerdik mengatur nama kelas menggunakan bahasa alami untuk melakukan apa yang mereka katakan. Jadi, meskipun Tailwind tidak memiliki pustaka komponen, kemampuan untuk dengan mudah membangun antarmuka yang kuat dan responsif hanya dengan merujuk nama kelas CSS adalah hal yang elegan, cepat, dan tak tertandingi.

Berikut adalah beberapa contoh yang sangat bagus:

Grid CSS

kolom css mulai kolom grid

Gradien CSS

gradien css

CSS untuk Dukungan Mode Gelap

mode gelap css

Tailwind juga memiliki yang fantastis ekstensi tersedia untuk Kode VS sehingga Anda dapat dengan mudah mengidentifikasi dan menyisipkan kelas dari editor kode Microsoft.

Bahkan yang lebih cerdik, Tailwind secara otomatis menghapus semua CSS yang tidak digunakan saat membangun untuk produksi, yang berarti bundel CSS terakhir Anda adalah yang terkecil. Faktanya, sebagian besar proyek Tailwind mengirimkan kurang dari 10kB CSS ke klien.

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.