Kami memutuskan untuk menggunakan Tailwind

Dikutip dari beranda Tailwind CSS :

A utility-first CSS framework for rapidly building custom designs.
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Framework ini dibuat oleh Adam Wathan, dengan desain visual komponennya dibuat oleh Steve Schoger serta diluncurkan sekitar pertengahan 2020 lalu.

Tailwind css adalah css framework yang menawarkan konsep baru dengan konsep utility first di mana kita tidak perlu lagi memikirkan nama kelas untuk komponen HTMLnya. Tailwind terdiri dari nama kelas yang cukup intuitif untuk digunakan.

Tailwind cocok untuk membangun UI yang kompleks dan mempunyai ciri khas tersendiri.

Apa saja yang ditawarkan Tailwind CSS ?

●      Lebih sederhana dibandingkan framework css lainnya

●      Responsif

●      Komponen friendly

●      Didesain untuk disesuaikan

Beberapa kelebihan Tailwind CSS

●      Lebih sederhana dan efisien

Tailwind menyediakan low-level utility classes yang dapat digunakan untuk membangun desain khusus secara keseluruhan, tanpa harus keluar dari file HTML.   

●      Responsif

Utilitas utilitas di Tailwind mempermudah untuk membuat tampilan antar muka yang responsif tanpa membutuhkan CSS khusus.

●      Customizable

Tailwind menyediakan seluruh kombinasi kelas untuk semua ukuran layar.

 

Kekurangan Tailwind CSS

 

Meskipun memiliki banyak kelebihan, Tailwind juga memiliki beberapa kekurangan. Berikut ini adalah beberapa kekurangan framework ini.

 

●      File Tailwind CSS cukup besar dibandingkan framework lainnya

            Besarnya file Tailwind ini disebabkan oleh sekumpulan utility-classes.

●      Belum ada komponen untuk form

Komponen untuk form ini berguna untuk pembuatan create,update,delete (CRUD). Untuk membuat aplikasi diperlukan kombinasi CSS dengan library lainnya.

●      Nama kelas terlalu panjang

Contoh kelas di Tailwind

 

Install Tailwind via NPM

Generate package.json

Di terminal Anda, jalankan perintah berikut:

Perintah ini akan menghasilkan package.json di folder root kita, file ini memungkinkan kita untuk menginstal dependensi untuk proyek kita.

Pasang Tailwind CSS

Sekarang, kita perlu menginstal Tailwind CSS di proyek kita, jadi, kita akan menjalankan perintah ini:

Buat file tailwind.config.js

file tailwind.config.js memungkinkan kita menyesuaikan Tailwind CSS. Anda perlu menjalankan perintah berikut:

Kemudian, Tailwind CSS akan membuat tailwind.config.jsdi folder root kita.

Di dalam file ini kita memiliki sesuatu seperti ini:

Tambahkan Tailwind CSS ke CSS kita

Sekarang, kita perlu menambahkan beberapa baris kode di index.css file, jika Anda tidak memiliki file ini, Anda perlu membuat.

Buka file tersebut, dan masukkan kode berikut:

Menambahkan skrip dan menghasilkan Tailwind CSS Build

Sekarang, kita perlu membuat dan membuat skrip di package.jsonfile kita .

Dengan skrip ini kita dapat membuat build Tailwind CSS, satu-satunya hal yang perlu kita lakukan adalah menjalankan perintah berikut di terminal:

Skrip ini akan menghasilkan styles.css file di folder assets kita, file ini berisi semua kelas yang dibutuhkan Tailwind.

Menambahkan Style di HTML kita

Di dalam index.html, Anda perlu menambahkan file CSS build:

Anda dapat melihat dokumentasi Tailwind CSS untuk informasi lebih lanjut.

Contoh membuat form login menggunakan Tailwind

Kodenya seperti berikut ini  :

 

 

 Kesimpulan

Tailwind adalah framework CSS baru yang menyegarkan, pendekatan pertama membuat saya cepat mempelajarinya. Sintaks di Tailwind juga sangat konsisten, sehingga dengan sedikit pengalaman kita bisa mendesain proyek seperti yang kita inginkan.  Tailwind tidak memiliki tampilan default, jadi kita benar-benar bebas mendesain seperti yang diinginkan.


Administrator 25 November, 2021
Share this post
Tag
Archive
Sign in to leave a comment
A/B Testing Guide