article

Kenalan Sama Tailwind CSS: Styling Tanpa Ribet

Kenalan Sama Tailwind CSS: Styling Tanpa Ribet

TAILWIND

Halo teman-teman Plimbi, pernah denger yang namanya TAILWIND? pernah penasaran engga sih, apa sih TAILWIND itu?Apa Pengertianya?Apa kelebihan dan kekurangannya?Dan mungkin kalau kamu developer pasti pernah lihat dan dengar kalau TAILWIND itu menyenangkan,Kalau belum pernah melihat dan dengar apa itu TAILWIND mari saya jelaskan secara singkat dan mudah dipahami.

Apa itu TAILWIND?

ads

TAILWIND ialah salat satu framework CSS yang sangat populer saat ini di kalangan penggembang atau develover.TAILWIND adalah kerangka kerja CSS yang sangat mengutamakan utilitas yang dibuat untuk mempercepat dan menyederhanakan atau memudahkan pembuatan aplikasi yang menggunakan desain yang unik. Biasanya kita atau kalian menulis CSS sendiri dari nol atau pakai framework seperti bootstrap yang sudah punya komponen,tapi di TAILWIND datang dengan konsep yang agak berbeda. TAILWIND itu sebagai utility-firts CSS framework artinya kita atau kalian menstyling langsung di HTML pakai class-class yang sudah disediakan atau sudah tersedia di TAILWID.

TAILWIND sangat cocok buat kamu yang sangat menyukai kontrol penuh sama tampilan website tanpa harus ribet mikiran nama class css yang aneh aneh atau ribet.

Sejarah TAILWIND

TAILWIND pertama kali diciptakan oleh insinyur dan desainer di bidang terkait yang bernama Adam Wathan,Jonathan Reinink,David Hemphill,dan Steve schoger.Tujuan mereka membuat atau mengembangkan adalah untuk kerangka kerja yang berbeda dari kerangka kerja CSS konversional.Latar belakang ini berasal dari kendala yang mereka temui saat menggunakan teknologi yang ada sebelumnya seperti Foundation dan Bootstrap,yang sering kali membatasi atau dibatasi kebebasan desain dengan kelas dan komponen yang telah diberi gaya sebelumnya,TAILWIND diumumkan pada tahun 2017.Tujuan utamanya adalah membantu pengembang atau developer dalam bekerja dengan kelas utilitas yang dapat digabungkan dan juga disesuaikan untuk membuat desain yang menarik dan juga unik.

Cara kerja TAILWIND CSS

TAILWIND sudah menyediakan ribuan utility class yang masing-masing punya satu tugas spesifik.Ada yang buat warna,margin,padding,font,ukuran,posisi,dan juga animasi.

Contoh:

  • mt-4(buat margin-toop)
  • text-center(buat merata di tengah)
  • bg-red-700(buat warna di background)
  • flex(buat di layout flexbox)

Semua class ini sudah di buat atau di generate oleh TAILWIND berdasarkan konfigurasi yang sudah ada di file tailwind.config.js biasanya.Waktu project di buat,TAILWIND bakal membaca file HTML,BLADE,JSX,VUE kamu,lalu TAILWIND hanya mengambil class yang benar-benar dipakai.Proses ini disebut dengan PURGING,dan hasilnya ukuran CSS jadi sangat kecil dan ringan.

Kelebihan TAILWIND CSS

  • Desain konsisten(spacing,warna,ukuran,font dan ukuran font)
  • Customizable(warna,font,breakpoint,utylity)
  • Cocok buat project yang besar
  • Responsive jadi mudah
  • Enak dipakai bareng framework(Laravel,React,Next.Js dan lainnya)
  • Cepat dan flexsibel

Kekurangan TAILWIND CSS

  • HTML jadi kelihatan banyak,rame,rumit dan susah buat dilihat bikin pusing kepala
  • Kurang ramah buat pemula
  • Butuh proses build(Node.Js,npm,atau framework tertentu)
  • Tidak ada komponen siap pakai(Bootsrap yang lain biasanya langsung kasih navbar,modal,dan button,di TAILWIND kamu harus bikin sendiri seperti TAILWIND UI)

Contoh Penggunaan TAILWIND

  • TAILWIND biasanya sering dipakai atau digunakan di:
  • Website company profile
  • Dashboard admin
  • Aplikasi web berbasis Laravel atau react
  • Portfolio pribadi

Kesimpulan

TAILWIND CSS ialah framework CSS moerd yang berfokus pada utilitu class dan fleksibilitas.Walaupun awalnya terlihat ribet,rumit dan bikin pusing tapi setelah terbiasa TAILWIND bisa bikin proses styling jauh lebih cepat dan efisien.Kamu harus semangat dan disiplin untuk belajar TAILWIND karena tidak biasa dalam 1 hari sudah paham dan bisa harus konsisten,dan juga jangan mudah putus asa dan jangan menyerah untuk mempelajari ilmu baru agar kamu mempunyai bekal atau kemampuan yang cukup,tidak apa-apa kalau kamu tidak terlalu paham atau pintar dalam memahami materi,yang penting kamu mau belajar terlebih dahulu dan semangat oke brooo.

 

 

 

 

 

 

 

 

0
Comments (0)
Unable to Comment
You need to be logged in to be able to post a comment. Click here to login

No comments yet. Be the first to comment.

From Author
Loading…
ads
ads
ads