Tailwind CSS: Rangka Kerja dan API Utiliti Pertama CSS untuk Reka Bentuk Cepat dan Responsif
Walaupun saya menceburkan diri dalam bidang teknologi setiap hari, saya tidak mendapat banyak masa kerana saya ingin berkongsi integrasi dan automasi kompleks yang dilaksanakan syarikat saya untuk pelanggan. Saya juga tidak mempunyai banyak masa penemuan. Sebilangan besar teknologi yang saya tulis adalah syarikat yang mencari Martech Zone merangkumi mereka, tetapi sekali-sekala - terutamanya melalui Twitter - saya melihat beberapa berita mengenai teknologi baru yang perlu saya kongsi.
Sekiranya anda bekerja dalam reka bentuk web, pengembangan aplikasi mudah alih, atau bahkan hanya membuat sistem pengurusan kandungan, anda mungkin bergelut dengan kekecewaan gaya bersaing di pelbagai helaian gaya. Walaupun dengan alat pengembangan luar biasa yang terdapat di dalam setiap penyemak imbas, penjejakan dan pembersihan CSS memerlukan terlalu banyak masa dan tenaga.
Rangka Kerja CSS
Dalam tahun-tahun kebelakangan ini, para pereka telah melakukan pekerjaan yang cukup menakjubkan untuk melepaskan koleksi gaya yang disiapkan dan siap digunakan. Lembaran Gaya CSS ini lebih dikenal sebagai Kerangka Kerja CSS, berusaha menampung semua gaya dan kemampuan responsif yang berbeza sehingga pembangun hanya dapat merujuk kerangka kerja dan bukannya membuat fail CSS dari awal. Beberapa kerangka kerja yang popular adalah:
- Bootstrap - kerangka kerja yang berkembang lebih dari satu dekad, pertama kali diperkenalkan oleh Twitter. Ia menawarkan banyak ciri. Ia memang mempunyai kelemahan, memerlukan SASS, sukar untuk diatasi, bergantung pada JQquery, dan ia cukup besar untuk dimuat.
- Bulma - rangka kerja bersih yang mesra pemaju dan tidak bergantung pada JavaScript.
- Yayasan - rangka kerja CSS yang lebih umum dan boleh digunakan yang mempunyai banyak komponen yang mudah disesuaikan. Selain itu, ada Asas untuk E-mel and UI Pergerakan untuk animasi.
- Kit UI - gabungan HTML, JavaScript, dan CSS untuk menjadikan front-end anda dikembangkan dengan cepat dan mudah.
Kerangka CSS Tailwind
Walaupun kerangka kerja lain berfungsi dengan baik untuk menampung elemen antara muka pengguna yang popular, Tailwind menggunakan metodologi yang dikenali sebagai CSS atom. Ringkasnya, Tailwind dengan bijak mengatur nama kelas menggunakan bahasa semula jadi untuk melakukan apa yang mereka katakan. Oleh itu, walaupun Tailwind tidak mempunyai perpustakaan komponen, kemampuan untuk membina antara muka yang responsif dan kuat hanya dengan merujuk nama kelas CSS adalah elegan, pantas, dan tiada tandingannya.
Berikut adalah beberapa contoh yang sangat hebat:
Grid CSS
Kecerunan CSS
CSS untuk Sokongan Mod Gelap
Tailwind juga mempunyai hebat sambungan tersedia untuk VS Code supaya anda dapat mengenal pasti dan memasukkan kelas dengan mudah dari editor kod Microsoft.
Lebih bijak lagi, Tailwind secara automatik membuang semua CSS yang tidak digunakan ketika membuat produksi, yang bermaksud kumpulan CSS terakhir anda adalah yang terkecil. Sebenarnya, kebanyakan projek Tailwind menghantar kurang dari 10kB CSS kepada pelanggan.