TailwindCSS, untuk Proses Prototyping Desain Web yang Lebih Cepat

Last Updated on January 11, 2022 by

TailwindCSS merupaka salah satu framework yang saat ini populer di kalangan para programmer. Tailwind dikemas dengan classes seperti flex, pt-4, text-center, dan rotate-90 yang dapat dikomposisikan untuk membuat berbagai desain langsung pada markup Anda.

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

Pada TailwindCSS Anda tidak akan menemukan pra-desain komponen seperti framework kebanyakan. Hal ini sesuai dengan klaim mereka “utility-first” yang di mana Tailwind tidak menyediakan komponen utuh yang tinggal digunakan oleh para developer.

Tailwind menyediakan class-class kecil yang bisa digunakan dengan sangat fleksibel untuk membuat interface sesuai keinginan tanpa perlu override styles seperti framework kebanyakan. Jadi, ketika Anda ingin membuat komponen, maka Anda perlu menggunakan beberapa class kecil hingga tercipta komponen yang Anda inginkan.

Banyak developer yang beranggapan bahwa penggunaan Tailwind ini lebih rumit dibanding framework lainnya. Namun di sinilah yang menjadi keunikannya. Menggunakan TailwindCSS dapat menciptakan antar muka yang berbeda dengan developer lain meski menggunakan framework yang sama.

Hasil antar muka Anda pun menjadi lebih unik dan tidak ada duanya. Selain itu Anda dapat menghasilkan prototype yang unik dan menarik dalam waktu cepat, karena Anda tidak perlu melakukan pra-desain komponen kemudian melakukan styling. Desain komponen dan styling dapat dilakukan sekaligus menggunakan Tailwind.

Beberapa kelebihan TailwindCSS

Lebih sederhana dan efisien

Jika dibandingkan dengan framework lainnya Tailwind tergolong lebih sederhana. Framework CSS kebanyakan menyediakan segala jenis komponen yang telah didesain sebelumnya.

Memang, komponen-komponen tersebut sangat membantu di awal, namun Anda akan kesulitan saat membuat situs dengan desain khusus yang disesuaikan dengan keinginan Anda. Mengubah komponen-komponen tersebut membutuhkan waktu dan usaha yang lebih banyak.

Namun, Tailwind hadir untuk memberi jawaban atas permasalahan tersebut. Tailwind menyediakan low-level utility classes yang dapat kita gunakan untuk membangun desain yang khusus secara keseluruhan, tanpa harus keluar dari file HTML Anda.

Menggunakan Tailwind, Anda hanya perlu fokus pada satu file atau file HTML tanpa perlu melakukan switching ke file lain.  Developer juga tidak perlu memakan banyak waktu untuk memikirkan nama dari class. Untuk lebih mudah membedakan Tailwind dengan framework lain, sebagai berikut:

Framework lain:
<button class="button">Button</button>
Tailwind:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
Button
</button>

Dari sini terlihat Anda dapat melakukan kostumisasi langsung pada website Anda. Adapun, class-class pada Tailwind memiliki property dan nilai sendiri.

• bg-blue-500merepresentasikan property background-color: #4299e1;
• text-whitemerepresentasikan property color: #fff;
• font-boldmerepresentasikan property font-weight: 700;
• py-2maksudnya padding-y atau padding-vertical merepresentasikan property padding-top: 0.5rem; dan padding-bottom: 0.5rem;
• px-4maksudnya padding-x atau padding-horizontal merepresentasikan property padding-left: 1rem; dan padding-right: 1rem;
• roundedmerepresentasikan border-radius: .25rem;

Responsif

Utilitas-utilitas pada Tailwind mempunyai berbagai jenis responsive yang mempermudah developer dalam membuat antar muka yang responsive tanpa membutuhkan suatu CSS khusus.

Customizable

Tailwind dapat dikostumisasi. Tailwind membiarkan developer menyesuaikan desain termasuk menyesuaikan warna, ukuran border, bobot font, dan lainnya. Anda dapat mengubah warna bawaan, menambahkan breakpoint screen size, menambahkan font family serta menambahkan utility class yang lain.

Tailwind memiliki file config yang ditujukkan untuk menyimpan seluruh konfigurasi. Pada konfigurasi inilah Anda dapat menentukan utility class yang ingin Anda gunakan. Anda juga dapat mengatur prefix, sehingga dengan adanya prefix dapat mengurangi terjadinya konflik nama class. Tailwind menyediakan seluruh kombinasi kelas untuk setiap ukuran layar.

Kekurangan TailwindCSS

Meskipun menawarkan berbagai kemudahan, Tailwind juga memiliki beberapa kekurangan. Berikut kekurangan TailwindCSS.

File TailwindCSS cukup besar dibanding yang lain

Besarnya file TailwindCSS ini diakibatkan oleh sekumpulan utility classes. Jadi sangat wajar jika file TailwindCSS cukup besar dibanding framework lainnya.

Belum adanya komponen untuk form

Komponen untuk form ini berguna untuk pembuatan aplikasi (CRUD). Untuk membuat aplikasi perlu mengkombinasikan CSS dengan library yang lain.  

Nama Class Sangat Panjang

Contoh class pada Tailwind adalah :

class=”rounded-lg bg-orange-200 text-orange-600 text-xs px-2 py-1

Namun panjangnya nama class ini bisa diatasi dengan mengekstrak file menjadi kompnen HTML serta mengekstrak sekumpulan class tersebut menjadi satu class menggunakan @apply.

Utility Class pada Tailwind dibagi menjadi 11 kategori. Adapun 11 kategori tersebut adalah:

Layout

Beberapa properti yang berhubungan dengan layout:

• Container berfungsi untuk membungkus berbagai elemen di dalamnya serta mengatur min-widthdan max-width pada current breakpoint. Container pada Tailwind perlu diatur marginnya menjadi auto karena container Tailwind tidak otomatis di tengah.
• Display berfungsi mengatur beberapa display property seperti block, inline, inline-block, flex, dan lain-lain.
• Top/Bottom/Right/Left yang dapat digunakan bersamaan dengan position seperti absolute, relative atau fixed.
• Z-index untuk mengatur urutan tumpukan atau layer. Class ini akan mereduksi penggunaan custom class.

Typography

Class yang ada pada kategori Typography diantaranya:

• Color yang terdiri palet warna yang cukup beragam serta memiliki tingkat transparansinya masing-masing.
• Font Family yang memiliki 3 jenis huruf bawaan yaitu font-sans, font-serif, serta font-mono.
• Font size yang telah diatur dan disediakan langsung oleh Tailwind.

Backgrounds

Utility class yang berguna untuk mengatur background memang telah disediakan oleh Tailwind namun Anda tetap perlu membuat custom class guna mengatur background image. Uility class yang tersedia pada kategori backgrounds diantaranya background attachment, background color, background position, background repeat dan background size.

Borders

Beberapa utility class pada borders:

• Border color, yang pengaturannya mirip dengan mengatur warna lainnya pada Tailwind, hanya saja diawali dengan nama border-*
• Border Radius berbeda dengan border color. Untuk mengaturnya perlu menggunakan nama class yang diawali dengan kata ‘rounded’.

Flexbox

Beberapa utility class pada flexbox yaitu flex direction, flex wrapping, align items, align content, align self, justify content, flex, flex grow dan flex shrink.

Spacing

Spacing terdiri dari padding, margin, dan negative margin. Mengatur padding, Anda perlu mengawali class dengan p dan dilanjutkan dengan side dan size, dengan demikian format-nya : p{size?}-{size} . Mengatur margin pun menggunakan cara yang sama dengan padding, namun margin diawali dengan m dan negative margin diawali dengan –m.

Sizing

Utility class pada kategori sizing terdiri dari height dan width. Kategori ini dipecah kembali mengingat CSS memiliki nilai minimum dan maximum, sehingga terdapat width, min-width, max-width, height, min-height, dan max-height.

Tables

Framework ini ini terdiri dari 2 utility class, yaitu border collapse dan table layout.

Effects

Terdapat 2 utility class yaitu shadow dan opacity. Ada 8 class untuk mengatur shadow yaitu, shadow, shadow- md, shadow- lg, shadow- xl, shadow- 2xl, shadow- inner, shadow- ouline, dan shadow- none. Sementara pada opacity terdiri dari 5 class yaitu, opacity- 100, opacity- 75, opacity- 50, opacity- 25, dan opacity- 0.

Interactivity

Interactivity memiliki utility class terdiri dari, appreance, cursor, outline, pointer events, resize, dan user select. Adanya utility class ini, Anda dapat mengatur jenis kursor, mengatur respon elemen pada pointer events, serta mengatur interaktifitas lainnya.

SVG

SVG mempunyai 2 utility class yaitu fill dan stroke. Fill memiliki satu class yaitu fill- current untuk mengatur isian warna SVG menjadi warna teks sekarang. Stroke memiliki satu fungsi yaitu stoke- current yang berfungsi untuk mengatur warna stroke.

Demikianlah ulasan terkait dengan TailwindCSS, mulai dari penjelasan singkat, kelebihan serta kekurangan Tailwind serta rangkuman fitur-fitur serta komponen yang ada pada TailwindCSS. Semoga artikel dari Appkey ini selalu bermanfaat untuk Anda!