Tailwind CSS Part 2 Abang Kuhh 🔥 Reponsive & Custom Tailwind

Yo teman-teman! Figo balik lagi nih buat lanjutin obrolan seru kita tentang Tailwind CSS! Kali ini, kita mau bahas yang level lebih tinggi, jadi yang udah mulai kenal ama Tailwind, artikel ini wajib banget buat kalian!

Di part 2 ini, kita mau ngulik beberapa topik menarik di Tailwind yang bisa bikin website kita makin keren dan interaktif. Pertama-tama, kita bakal coba intip soal Tailwind Arbitrary Values. Jadi, kita bisa bebas ngatur nilai-nilai properti CSS tanpa ribet bikin custom CSS. Kece kan?

Trus, kita juga mau bahas soal Tailwind Layer Component, yang bisa bikin tampilan website kita makin eye-catching dengan berbagai layer dan efek visual keren. Terakhir, kita gak boleh lupain Responsive Tailwind. Karena sekarang, bikin website yang bisa adaptif itu udah wajib, guys!

Siap-siap buat nyelam ke dunia Tailwind yang lebih dalam! Yuk, kita mulai eksplorasi bareng-bareng. Jangan lupa siapin camilan favorit kalian, karena kita bakal bahas hal-hal menarik di sini. Ikimashou 🚀

Table of Content

· Table of Content
· Responsive Tailwind
∘ 1. Breakpoints
∘ 2. Menerapkan Utilities Responsif
∘ 3. Mobile-First Approach
· Arbitrary Values
· Component Layer
· Referensi Tambahan
· Penutup

Nah, kalo kalian mikirin gimana caranya biar halaman web klean bisa keliatan responsive di berbagai perangkat, nih, ku kasih tau triknya pake Tailwind CSS. Gak perlu ribet-ribet lagi nulis CSS tambahan, cukup pake yang udah ada di Tailwind!

Jadi, ada beberapa konsep dasar yang perlu kalian pahami:

1. Breakpoints

Tailwind punya lima breakpoint bawaan yang terinspirasi dari ukuran umum device . Mulai dari yang kecil sampe yang gede, semuanya udah disiapin:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Dengan ini, kamu bisa atur tampilan elemen sesuai keinginan di setiap ukuran layar.

2. Menerapkan Utilities Responsif

Setiap class utility dalam Tailwind bisa kamu pake secara kondisional di berbagai breakpoint.

Untuk menambahkan utilty class yang berpengaruh pada suatu breakpoint, kita bisa menambahkan nama breakpoint sebelum nama utily classsnya diikuti dengan titik dua :

Misalnya, buat ngatur lebar suatu elemen pada ukuran layar tertentu, bisa pake class kayak gini:

<!-- Lebar 16 by default, 32 pada medium screens, dan 48 pada large screens -->
<img class="w-16 md:w-32 lg:w-48" src="…">

Komponen yang Responsif

Liat contoh penerapan responsif di komponen waifu card ini, coba klean geser geser atau ubah tampilan web nya. maka komponent cardnya akan berubah sesuai tampilan web. itu lah yang dinamakan responisve gess.

3. Mobile-First Approach

Tailwind pakai sistem breakpoint mobile-first secara default. Ini artinya, utility class tanpa prefix bakal berlaku untuk semua ukuran layar, sementara yang pake prefix cuma bakal berlaku di breakpoint tertentu dan yang lebih gede dari itu.

Targeting Tampilan Mobile

Nah, buat ngatur tampilan buat perangkat mobile, gunain versi utility tanpa prefix, bukan yang pake prefix kayak sm:. Contohnya:

✅ Gunakan utility class tanpa prefix untuk target tampilan mobile, lalu timpa utility class tadi di breakpoint yang lebih besar

<!-- Ini bakal nengahin teks buat layar ponsel, dan kalo layarnya lebar dari 640px, teksnya bakal kembali ke kiri -->
<div class="text-center sm:text-left"></div>

❌ Jangan gunakan sm: untuk men-target ukuran layar mobile

<!-- Class ini hanya akan menengahkan text pada ukuran layr 640px bukan layar yang lebih kecil-->
<div class="sm:text-center"></div>

Arbitrary Values

Kadang-kadang, meskipun udah punya banyak token desain / template yang bagus di Tailwind, tapi ada saatnya kita butuh keluar dari batasan-batasan itu buat bikin sesuatu yang custom banget, bahkan jika kita butuh 1px pun.

Pas klean nemuin situasi yang bener-bener butuh sesuatu kayak top: 117px biar gambar latar ada di tempat yang pas, pake aja notasi kurung siku dari Tailwind buat ngebuat kelas on-the-fly dengan Arbitrary Value:

<div class="top-[117px]">
  <!-- ... -->
</div>

Bisa dicombine dengan pseudo class seperti hover dan responsive prefix
Ini kayaknya kayak inline styles gitu, tapi yang beda, klean bisa gabungin sama modifier interaktif kayak hover dan modifier responsif kayak lg:

<div class="top-[117px] lg:top-[344px] hover:top-[120px]">
  <!-- ... -->
</div>

Bisa Dipakai Untuk Apa Aja
Ini bisa dipake buat apa aja, mulai dari warna background, ukuran font, konten pseudo-element, dan masih banyak lagi:

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

Support Variable CSS

Kalo klean pake variabel CSS sebagai Arbitrary Value, gak perlu pake var(…) , cukup kasih nama variabel aslinya aja:

<div class="bg-[--my-color]">
  <!-- ... -->
</div>

Component Layer

Di Tailwind CSS, ada yang namanya component layer yang bisa klean pake buat mengelompokan kelas-kelas ke dalam suatu tailwind class tapi masih bisa klean override / timpa pake utility classes.

Biasanya kelas-kelas ini kayak card, btn, badge, gitu deh.

@layer components {
  .btn {
    @apply w-fit rounded-xl bg-blue-500 px-4 py-2 text-white;
  }
}

Kita bisa gunakan class component tadi html kita

<div class="btn">
    <span>Click Here</span>
</div>

Tampilan dari component class `btn`

nah bedanya dengan class css biasa, kita bisa timpa atau override style dengan menggunakan class component.

<div class="btn bg-teal-300">
    <span>Click Here</span>
</div>

Tampilan Class component yang warna backgroundnya di override dengan warna `bg-teal-300`

nah jadi kesimpulannya kalau pakai class component style di css kita tadi bisa kita timpa dengan utility class. sedangkan kalau tidak menggunakan class component maka kita tidak bisa mengubah style nya sama sekali dari html.

Referensi Tambahan

Jika kawan kawan ingin menjelajah lagi mengenai custom tailwind beserta referensinya bisa kunjungi link link di bawah yaaa

• Custom Style Tailwind Official Docs : https://tailwindcss.com/docs/adding-custom-styles
• Responsive Design Tailwind Official :https://tailwindcss.com/docs/responsive-design
• Tailwind Playground (cocok untuk coba coba pakai tailwind) :https://play.tailwindcss.com/

Penutup

Yowwww! Udah selesai nih pembicaraan seru kita tentang Tailwind CSS! Dari ngulik Tailwind Arbitrary Values yang bikin kita bisa eksperimen dengan nilai-nilai CSS tanpa harus repot bikin custom CSS, sampe menjelajahi Layer Component yang bisa nambahin kesan visual yang makin kece di website kita.

Jangan lupa juga sama Responsive Tailwind, yang penting banget buat bikin website kita tetep keren di layar mana aja. Dengan ngerti dan bisa ngaplikasiin semua ini, kita bisa bikin website yang makin kekinian dan sesuai sama kebutuhan zaman!

Tetep semangat terus eksplorasi dunia Tailwind CSS, karena di situlah letak keajaiban buat bikin website jadi makin asik! Sampai ketemu lagi di petualangan selanjutnya, yaa! Makasih udah bareng-bareng di sini, temen-temen! 🚀🎉