CARI
KATEGORI
KATEGORI
KASKUS
51
244
https://www.kaskus.co.id/thread/611b0f5b1bcb2355d8506bee/saya-pilih-tailwind-css

Saya Pilih Tailwind CSS

Setelah belajar HTML dan CSS maka kita tahu bahwa sebuah website pasti tidak lepas dari kedua hal tersebut. Pas kenal Bootstrap (salah satu CSS framework paling populer), saya sangat senang karena kita gak perlu ngoding CSS dan HTML secara manual karena banyak hal sudah dibuatin. Bootstrap menangani tampilan mobile pada sebuah website secara otomatis, dan berbagai komponennya memudahkan kita untuk bikin popup, table, form, dan lain sebagainya.

Namun, ada suatu ketidakpuasan ketika saya pertama kali mengenal CSS framework macam Bootstrap, Materialize, Bulma dan kawan - kawannya. Tambah gak puas lagi ketika mengenal UI framework atau UI library macam Vuetify dan Material UI. Selain penggunaannya yang repot karena harus import - import melulu, kita juga harus ikuti aturan main mereka betul - betul. Untuk bikin padding dan margin baru bakalan sulit karena mau gak mau kita harus edit komponen yang sudah jadi, yang pastinya repot banget. Pada akhirnya kita gak jarang dipaksa untuk ngoding CSS secara manual kalau mau tampilan yang sesuai desain apalagi pixel perfect.

Saya Pilih Tailwind CSS

Ketika lihat di sosmed kok banyak yang membanggakan Tailwind ya? Emangnya apasih itu Tailwind? Belum kenal saya udah gak suka karena terkesan overrated dengan fans-nya yang banyak. Saya tak pernah menyangka kalau saya bakalan jadi salah satu fans dari Tailwind CSS. Awalnya coba - coba, tapi setelah nyaman jadi gak mau pindah lagi ke yang lain. Untuk membahas keistimewaan dari si Tailwind ini, yuk kita bahas mengenai perbedaan antara Tailwind CSS dan CSS framework lain, beserta perbandingannya dengan UI framework atau UI library.



Component-based & Utility-based

Bootstrap, Materialize, Bulma, Vuetify, dan Material UI itu component-based. Artinya mereka sudah menyediakan berbagai komponen yang siap pakai tapi sulit untuk diedit dan dirombak, makanya gak bisa ubah - ubah sembarangan. Berbeda dengan Tailwind yang utility-based, yang hanya menyediakan kumpulan class untuk bikin margin, padding, display flex, dan sebagainya.

Istilahnya kalau CSS frameworks macam Bootstrap itu menyediakan komputer gaming yang sudah utuh tinggal pake, tapi kita gak bisa sembarangan bongkar pasang spartpart di dalamnya seenaknya. Sedangkan Tailwind menyediakan berbagai macam spartpart canggih yang bisa dipakai untuk merakit komputer gaming sesuai keinginan kita.



Bikin komponen

Saya Pilih Tailwind CSS

Untuk bikin tombol warna biru di Bootstrap, kita mungkin hanya perlu bikin button dengan class "btn btn-primary", atau sekedar copy paste code-nya dari dokumentasinya. Untuk bikin tombol warna biru di Tailwind, kita perlu mengkombinasikan berbagai class di dalamnya seperti "px-4 py-2 bg-blue-500 hover:bg-blue-700 rounded-md".

Mungkin Tailwind ini kelihatan merepotkan karena kita harus bikin manual segala macam komponen yang kita inginkan. Tapi justru dengan kita bikin manual melalui kombinasi class itulah, maka kita bisa merombaknya lebih bebas.

Pengalaman saya, justru kalau pakai CSS framework dan UI framework, saya lebih sering ngoding CSS secara manual karena banyak sekali tampilan yang tidak sesuai keinginan saya. Tapi kalau pakai Tailwind, saya hampir gak pernah ngoding CSS secara manual karena kalau butuh sparepart yang lain, tinggal custom aja lewat file tailwind.config.js.



Bikin margin: 50px

Gimana caranya bikin margin: 50px; di Bootstrap dan Tailwind? Kalau di Bootstrap caranya ada beberapa, antara bikin inline-style, bikin class baru namanya m-50px, atau stylenya di taruh di file css di dalamnya komponennya langsung, misalnya:

Quote:


Quote:


Quote:


Kalau di Tailwind gak perlu bingung mau pilih yang mana. Cukup bikin aja atau modifikasi aja di file tailwind.config.js:

Saya Pilih Tailwind CSS

Bikin property baru dalam object spacing, terserah nama property-nya apa, bisa sesuka hati. Kalau spacing-nya di-extend maka Tailwind akan otomatis membuat beberapa class baru seperti m-50px, p-50px, w-50px, h-50px, dan lain - lain. Berikut ini arti - artinya:

Quote:


Quote:


Quote:


Quote:


Extend sekali, beberapa class langsung kebuat sehingga sangat memudahkan untuk bikin desain sesuai yang kita mau. Pixel perfect jadi mudah diwujudkan.



Bagaimana dengan tampilan responsive?

Biasanya di Bootstrap kan kita harus bikin div dengan class container dulu, bikin div dengan class row dulu, bikin div dengan class col dulu, untuk bikin tampilan yang responsive. Itupun gak bisa bebas dan terlalu banyak boilerplate code atau code template yang kudu ditulis (div-nya banyak banget). Di satu sisi bagi sebagian orang pastinya memudahkan, tapi di sisi lain, sejak saya kenal sama Bootstrap, ini lama - lama jadi gak enak dipandang.

Saya Pilih Tailwind CSS

Kalau di Tailwind memang tampilan yang responsive harus dibuat manual, tapi bukan berarti sulit ya. Kurang lebih seperti ini jika ditulis dengan Tailwind:

Saya Pilih Tailwind CSS

Kurang lebih ini artinya class - class tersebut:

Quote:


Quote:


Quote:


Quote:


.flex-col bakalan ditampilkan di mobile, sedangkan .flex-row bakalan ditampilkan di desktop. Breakpoint dan berbagai macam hal juga bisa di-custom di Tailwind.



Kesimpulan

Itu dia beberapa perbedaan sederhana mengenai Tailwind dan yang lainnya. Tentu kalau mau tahu lebih lanjut harus pelajari sendiri dan cobain sendiri. Menurut saya Bootstrap dan kawan - kawan, juga UI framework cocok untuk dipakai bikin tampilan website yang gak harus pixel perfect atau mirip - mirip banget. Tailwind cocok untuk bikin tampilan yang pixel perfect.



Terimakasih sudah mau membaca. Jangan sungkan untuk bertanya dan ngobrol dengan saya lewat PM Kaskus atau sosmed lain seperti Instagram saya:
https://www.instagram.com/anggakswr

Baca juga:
Tips Belajar Pemrograman Secara Otodidak HT
Sentimen Negatif Tentang Programmer HT
Pernah Ada Project yang Gagal Gak? HT
Enaknya Jadi Programmer Menurut Agan Ini HT
Seberapa Penting Ngetik Cepat untuk Programmer? HT
Cara Jadi Front-end Web Developer Modal Youtube HT
Cara Jadi Web Developer Otodidak HT
Mengenal title Attribute di HTML HT
profile-picture
profile-picture
profile-picture
delfatesting260 dan 15 lainnya memberi reputasi
Halaman 1 dari 2
Buat yang malas baca:

profile-picture
gabener.edan memberi reputasi
Diubah oleh mx667
Tailwind bagus jg cuma kudu sering2 pakenya biar apal function2nya
profile-picture
profile-picture
muhamad.hanif.2 dan gabener.edan memberi reputasi
Ya sudah jika itu pilihanmu.
profile-picture
profile-picture
servesiwi dan gabener.edan memberi reputasi
Ga pernah denger tailwind. Cuma make Bootstrap atau Bulma
profile-picture
profile-picture
muhamad.hanif.2 dan gabener.edan memberi reputasi
Apapun yg membuat agan ts bahagia, ane pun ikut bahagia dahemoticon-Cool
profile-picture
servesiwi memberi reputasi
Post ini telah dihapus
Terserah ente aja gan ..
Baiklah kalau begitu emoticon-Cool
Ane pengen dong jadi muridnya suhu
semakin dpt di custom apa gk semakin bingung team nya
i mean pas dpt lungsuran project org lain trus nemu class aneh2 gimana
profile-picture
muhamad.hanif.2 memberi reputasi
Sebuah framework (apa pun namanya), memang dibuat untuk menyediakan modul/komponen yang dalam bahasa praktisnya 'siap pakai'.
Adalah kurang tepat dan absurd jika muncul keluhan 'harus mengikuti aturan main mereka' atau bahkan 'sulit diedit dan dirombak'
Tentunya mereka-mereka(framework dan pembuatnya) sudah memikirkan banyak hal dan fungsi serta kustomasi dalam hal demikian, dan yang lebih penting adalah seragam bagi mereka yang kerja tim. (tinggal kemampuan pemakai dalam penerapan dan penggunaannya).
Jadi jika memang keluhannya adalah hal diatas, akan lebih baik agan buat framework sendiri sesuai yang dikehendaki. Bagaimanapun juga kita layak berterima kasih pada twitter yang sudah menyediakan secara bebas dan gratis bootstrap, yang mana kemunculannya sudah membuat gaya baru dalam display dan penyajian web yang dinamis di berbagai ukuran layar device.
profile-picture
profile-picture
johanbaikatos dan muhamad.hanif.2 memberi reputasi
Dulu pertama kenal develop web, smpe dibela2 in bikin tombol glossy pake photoshop atau illustrator. Semua berubah saat kenal cms Joomla. Sekarang muncul yg lbh baik lg smpe ke web dinamis tapi praktis versi mobile view emoticon-Hammer2
profile-picture
muhamad.hanif.2 memberi reputasi
Yap.. tailwind emang mantep sih kostomisasi sesuai kehendak kita sblum di pake emoticon-Recommended Seller set sana set sini cus cus.
profile-picture
muhamad.hanif.2 memberi reputasi
Mode jit ada on demand class kayak .w-[50px], .p-[5px], .text-[12px]. Bisa bikin komponen secepat kilat.

emoticon-Traveller
Setuju gan. Ane juga pas awal2 nyobain Tailwind CSS langsung cocok. Soalnya gampang customize nya sesuai keinginan kita. Ane tipe orang yg perfeksionis, jadi tiap pixelnya harus pas emoticon-Ngakak (S)

Kalo bootstrap lebih ribet customize nya, tapi kalo buat pemula ya pasti pilihnya bootstrap, karena tinggal pasang aja.
bootstrap lover emoticon-Betty
profile-picture
wolfzmus memberi reputasi
Menarik perhatian
Ane bootstrap fans emoticon-Cool
Biasa nya kalo team diperusahaan itu dah beli komponen sendiri.. tinggal anggotanya pelajari dan ikuti aturan
kalo solo project tailwind bagus menurut ane gan, karena kita cenderung suka "custom".
Nah kalo tim, pengalaman ane pake tailwind nih buruk, apalagi tim yang lagi growth karena bakal banyak pegawai baru, jadi yang namanya design system tu ga jalan hahaha karena class nya custom semua. Kalo tim saya tetep prefer "custom class" ala ala bootstrap
profile-picture
LapenBoyz memberi reputasi
Halaman 1 dari 2


×
© 2022 KASKUS, PT Darta Media Indonesia. All rights reserved
Ikuti KASKUS di