Tailwind CSS: Framework Untuk yang Terbiasa CSS Native

Saya dulunya adalah orang yang benar-benar anti Frame-work, apapun selalu menggunakan Native. PHP Native, CSS Native dan JavaScript Native hingga beberapa fungsi-fungsi dan syntax didalamnya saya sudah hampir hafal semuanya out of the box. Saya berfikir jika menggunakan CSS Native, saya dapat membuat tampilan website semau saya sehingga tampilannya tidak akan "begitu-begitu saja".

Namun, saat ini saya dituntut untuk mempelajari framework sebagai salah satu persiapan saya sebelum mengikuti lomba LKS Nasional Tahun 2021. Berkenalanlah saya dengan Tailwind CSS ini ketika membuat sebuah project untuk SMK saya.

Mengenal TailwindCSS

TailwindCSS adalah framework CSS yang berbeda dari kebanyakan framework css lainnya. Ketika framework css lainnya membuat class-class untuk setiap komponen yang ada, tailwind css membuat class-class untuk semua property yang ada dalam syntax css.

TailwindCSS akan menghemat waktu kita dalam membuat tampilan suatu website. Jika sebelumnya kita harus menangani CSS dan HTML, ketika kita menggunakan TailwindCSS kita hanya perlu menangani HTML saja. Dan pastinya tampilan yang dihasilkan akan sesuai dengan keinginan kita karena classnya berdasarkan property yang ada dalam css.

TailwindCSS vs CSS Native

Misalnya saja, kita akan membuat sebuah card yang memiliki shadow. Ketika kita menggunakan css native, kita harus menulis dulu CSS nya:

.card {
	margin: 20px;
	padding: 32px;
	box-shadow: 0 5px 10px rgba(000,000,000,0.15);
	border-radius: 12px;
	background-color: #fff;
}

Kemudian juga harus menulis HTMLnya:

<div class="card">
	<!-- KONTEN -->
</div>

Ketika kita menggunakan tailwindcss, kita dapat menyederhanakannya dengan kode HTML saja:

<div class="m-5 p-8 shadow-lg rounded-xl bg-white">
  <!-- KONTEN -->
</div>

Mudah bukan?

Installasi TailwindCSS

Kita dapat menggunakan tailwindcss langsung dari CDNnya :

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Namun, hal ini tidak direkomendasikan karena kita tidak akan dapat mengubah default theme tailwindcss dan tidak dapat melakukan kustomisasi beberapa fitur dari tailwindcss seperti group-focus (baca disini).

Jika anda ingin menginstall tailwindcss sebagai node module silahkan baca dokumentasi di situs resminya:

Class Penting pada TailwindCSS

Untuk mempelajarai class-class pada TailwindCSS secara lengkap silahkan baca dokumentasinya. Namun, saya akan memberikan beberapa class penting yang ada pada tailwindcss agar mudah mencarinya.

Margin, Padding dan Sizing

Untuk class yang ada x,y,t,b,l,r seperti padding dan margin itu berarti axis yang akan diberikan properti, misalnya prefix class px- akan memberikan padding pada axis x. Atau pb- akan memberikan padding di bottom. Sedangkan jika di prefix class terdapat tanda minus seperti -m- maka akan memberikan value yang negatif seperti margin: -10px;.

Prefix didalam tabel ini dapat ditambahkan dengan angka atau ukuran setelahnya, misal class p-5 atau max-w-screen-md.

Font atau Typography

Warna

Untuk pewarnaan tailwindcss menggunakan beberapa palet warna :

Class Tambahan

Class tambahan ini adalah class yang ada di dalam tailwindcss untuk mempermudah kita dalam melakukan styling namun tidak ada padanannya di CSS Native.

Kesimpulan dan Penutup

TailwindCSS adalah framework css yang sangat berguna bagi para pecinta CSS Native. Framework ini akan membuat pekerjaan styling menjadi lebih cepat karena tidak perlu menyentuh css lagi.

Namun, sama seperti Framework yang lain kita juga harus membiasakan dengan prefix class yang ada di tailwindcss ini.

Kelemahan lain adalah, jika ingin mengubah style dari komponen (misalnya card) kita harus mengubah class semua komponen yang ada. Namun, hal ini dapat ditutupi dengan custom component di framework front-end javascript yang digunakan.

Sekian pembahasan tailwindcss ini, semoga dapat bermanfaat!