Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya

Saat membuat kode aplikasi dari awal ingin itu mencerminkan merek unik, responsif pada perangkat apa pun, dan mudah untuk menulis dan memelihara dan itu mungkin hanya beberapa item di daftar sesuai keinginan.

Dengan membangun dengan Tailwind CSS dapat mencentang item ini dari daftar. Tailwind CSS adalah kerangka kerja untuk membangun dan menyesuaikan aplikasi dengan cepat tanpa menulis CSS khusus.

Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS utilitas-pertama yang dirancang untuk memungkinkan pengguna membuat aplikasi lebih cepat dan lebih mudah. Dapat menggunakan kelas utilitas untuk mengontrol tata letak, warna, spasi, tipografi, bayangan, dan lainnya untuk membuat desain komponen yang sepenuhnya disesuaikan tanpa meninggalkan HTML atau menulis satu baris CSS kustom.

Misalnya, katakanlah ingin membuat tombol yang memiliki tinggi tetap, bantalan horizontal, warna latar hitam, tepi membulat, dan font putih setengah tebal. Inilah HTML yang akan digunakan :

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>

HTML berisi enam kelas utilitas. Mari kita uraikan masing-masing di bawah ini :

• h-10 : Kelas ini mengatur tombol ke ketinggian tetap 10 unit.
• px-6 : Kelas ini mengatur padding horizontal tombol menjadi 6 unit.
• font-semibold : Kelas ini mengatur berat font tombol menjadi semibold.
• rounded-md : Kelas ini mengatur radius batas tombol sehingga memiliki sudut membulat.
• bg-black : Kelas ini mengatur warna latar belakang tombol menjadi hitam.
• text-white : Kelas ini mengatur warna teks tombol menjadi putih.

Seperti yang mungkin sudah diduga, kurva pembelajaran saat menggunakan Tailwind CSS terutama terdiri dari membiasakan diri dengan kelas utilitasnya. Namun begitu melakukannya akan dapat dengan cepat dan konsisten membuat komponen khusus seperti tombol di bawah ini.

Sekarang setelah kita memahami framework Tailwind CSS dengan lebih baik, mari kita lihat beberapa manfaat menggunakannya.

Manfaat Tailwind CSS

Ada banyak manfaat menggunakan kerangka kerja CSS seperti Tailwind. Di bawah ini adalah yang utama.

• Menulis lebih sedikit CSS khusus. Dengan Tailwind, menata elemen dengan menerapkan kelas yang sudah ada sebelumnya langsung di HTML. Dengan menggunakan kelas utilitas dengan cara ini dapat membuat desain khusus tanpa menulis CSS.
• Menyimpan file CSS kecil.  Tanpa kerangka kerja seperti Tailwind, harus terus menulis CSS saat menambahkan fitur dan komponen baru. Akibatnya, file CSS terus bertambah dan bertambah berat. Dengan menggunakan utilitas seperti flexbox dan utilitas padding Tailwind, sebagian besar gaya dapat digunakan kembali sehingga  jarang perlu menulis CSS baru.
• Tidak perlu menemukan nama kelas. Saat Tailwind memilih kelas dari sistem desain yang telah ditentukan sebelumnya. Itu berarti tidak perlu bersusah payah memilih nama kelas “sempurna” untuk gaya dan komponen tertentu, atau mengingat yang rumit seperti sidebar-inner-wrapper.
• Dapat membuat perubahan yang lebih aman.  Dengan pendekatan tradisional, jika membuat perubahan pada CSS, dapat merusak sesuatu di situs. Tidak seperti CSS, kelas utilitas di HTML bersifat lokal. Itu berarti dapat mengubahnya tanpa khawatir merusak sesuatu yang lain di situs.

Mengapa Tailwind CSS?

Sekarang mungkin bertanya-tanya mengapa menggunakan Tailwind daripada kerangka kerja CSS lainnya? Tailwind CSS adalah framework tingkat rendah. Artinya, tidak seperti kerangka kerja CSS lainnya seperti Bootstrap dan Materialize, Tailwind tidak menawarkan komponen bergaya penuh seperti tombol, dropdown, dan navbar. Sebagai gantinya, ia menawarkan kelas utilitas sehingga dapat membuat komponen sendiri yang dapat digunakan kembali.

Untuk alasan itu, ini memberikan lebih banyak fleksibilitas dan kontrol atas seperti apa tampilan aplikasi daripada kerangka kerja CSS lainnya. Ini dapat memungkinkan untuk membuat situs yang lebih unik.

Contoh Tailwind CSS

Tailwind menawarkan komponen dan template UI, atau “contoh”, untuk membantu mulai membangun aplikasi dengan cepat. Ada repositori yang dibuat oleh Tailwind yang mencakup contoh pahlawan halaman arahan, bagian fitur, formulir pendaftaran buletin, tabel, jendela modal, formulir checkout, keranjang belanja, dan banyak lagi. Bisa mendapatkan kode untuk sebagian besar atau semua contoh ini dengan biaya paket satu kali.

Repositori lainnya dibuat oleh anggota komunitas dan bersifat open-source. Kami akan fokus pada contoh dari repositori di bawah ini.

1. Formulir CSS Tailwind

Untuk memungkinkan pengguna berlangganan buletin dapat menggunakan Tailwind untuk membuat formulir keikutsertaan email. Untuk membuat formulir opt-in email sederhana dapat menggunakan kode berikut :

<div>
<form class="m-4 flex">
<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="[email protected]"/>
<button class="px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Subscribe</button>
</form>
</div>

Untuk menyesuaikan batas, warna latar belakang, warna teks, dan aspek lain dari formulir ini, dapat mengubah antara lain kelas utilitas batas-{style}, bg-{color}, dan teks-{color}.

Kiat pro : Tambahkan nomor ke kelas utilitas border-{color},bg-{color}, dan text-{color} untuk menggunakan bayangan palet warna default Tailwind.

2. Bilah Pencarian CSS Tailwind

Untuk memungkinkan pengguna menelusuri aplikasi berdasarkan kata kunci, dapat menggunakan Tailwind untuk membuat bilah pencarian. Untuk membuat bilah pencarian dengan ikon dan tombol Kirim seperti yang ditunjukkan di atas, dapat menggunakan kode berikut :

<div class="max-w-2xl mx-auto">
<form class="flex items-center"> 
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
</form>
</div>

Kiat pro : Gunakan kelas utilitas w-full untuk mengatur lebar bidang pencarian menjadi 100%.

3. Penggeser CSS Tailwind

Untuk menggeser beberapa elemen dan gambar, dapat menggunakan Tailwind untuk membuat komponen penggeser atau korsel. Untuk membuat slider seperti yang ditunjukkan di atas, dapat menggunakan HTML berikut :

<div class="h-screen w-full overflow-hidden flex flex-nowrap text-center" id="slider">
<div class="bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Your Big Ideia</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Tailwind CSS works by scanning all of your HTML</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">React, Vue, and HTML</h2>
<p class="max-w-md">Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.</p>
</div>
</div>

Catatan : Komponen ini dibuat tanpa JS Library, tetapi memerlukan JavaScript berikut untuk memicu penggeser.

<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('#slider');
setTimeout(function moveSlide() {
const max = slider.scrollWidth - slider.clientWidth;
const left = slider.clientWidth;

if (max === slider.scrollLeft) {
slider.scrollTo({left: 0, behavior: 'smooth'})
} else {
slider.scrollBy({left, behavior: 'smooth'})
}

setTimeout(moveSlide, 2000)
}, 2000)

})
</script>

Kiat pro : Tambahkan kelas utilitas flex-nowrap ke div induk untuk mencegahnya membungkus dan tambahkan kelas utilitas flex-none ke div anak (slide) untuk mencegahnya tumbuh atau menyusut.

4. Tabel Harga Tailwind CSS

Untuk menunjukkan kepada pelanggan beberapa paket premium dengan fitur dan harga yang berbeda, dapat menggunakan Tailwind CSS untuk membuat tabel harga. Untuk membuat bagian “Intro” dari tabel harga seperti yang ditunjukkan di atas, dapat menggunakan kode berikut :

<section class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">

<div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>

<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>

<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>


</div>
</div>
</section>

Catatan : Kode ini hanya akan membuat wadah pertama untuk paket “Intro”. Untuk membuat wadah untuk paket “Dasar”, “Populer”, dan “Perusahaan”, harus mereplikasi kode ini, menukar teks untuk setiap nama paket dan harga.

Kiat pro : Tambahkan pengubah “hover:” sebelum nama kelas seperti “bg-gray-200” untuk menerapkan kelas utilitas itu secara kondisional (yaitu sehingga wadah hanya mengubah warna latar belakang saat pengguna mengarahkan kursor ke atasnya).