Media Pengembangan Web & App | by APPKEY

DesainDesign WebTailwindCSS, untuk Proses Prototyping Desain Web yang Lebih Cepat

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

css-tailwind-2

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.

Artikel Terkait  Mengenal Atomic Design dalam Pengembangan Website

Kekurangan TailwindCSS

css-tailwind-3

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.

Artikel Terkait  Cloud Hosting Adalah? Pengertian dan Keunggulannya

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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya