🔰 Deskripsi

Di kelas-kelas sebelumnya, Anda mungkin sudah merasa nyaman menggunakan Bootstrap. Saat Anda mengetikkan <button class="btn btn-primary">, sebuah tombol berwarna biru dengan sudut sedikit melengkung langsung muncul. Sangat ajaib dan cepat. Tetapi, ada satu kelemahan fatal: Website Anda terlihat persis sama dengan jutaan website lain di dunia yang juga menggunakan Bootstrap. Desainnya sangat kaku dan sulit dikustomisasi.

Perkenalkan Tailwind CSS. Ini bukanlah kerangka kerja komponen (Component-First) seperti Bootstrap. Tailwind adalah kerangka kerja Utility-First. Tailwind tidak memiliki kelas .btn. Jika Anda ingin membuat tombol biru, Anda harus merakitnya sendiri dengan kelas-kelas kecil penyusun: <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">.

Terlihat merepotkan? Awalnya iya. Tetapi di sinilah letak kebebasan sejati seorang Front-End Developer. Dengan kelas-kelas utilitas yang kecil ini, Anda bisa membangun desain sekaya Figma apa pun sepenuhnya langsung dari dalam file HTML tanpa perlu repot membuka dan menulis satu baris pun kode CSS kustom tambahan!

Apa yang akan saya pelajari ?

• Konsep revolusioner Utility-First: Mengapa industri global ramai-ramai meninggalkan CSS tradisional dan beralih ke penulisan kelas HTML yang super panjang.
• Memahami kamus ukur jarak (Margin/Padding), Dimensi (Width/Height), dan Warna secara logis.
• Trik mengatur Layout modern yang tidak bisa dilakukan Bootstrap lama, menggunakan Flexbox dan CSS Grid.
• Sihir Modifikator (Prefix): Mengubah warna tombol HANYA saat kursor menyentuhnya (hover:bg-blue-600) atau mengubah tata letak HANYA di layar HP (md:flex-row).
• Merakit desain responsif secara murni tanpa menuliskan @media query sama sekali.

Mengapa kelas ini wajib sebelum belajar Laravel ?

Kelas ini disusun sangat strategis. Karena sejak versi 8 ke atas, ekosistem Framework PHP raksasa Laravel telah menjadikan Tailwind CSS sebagai bahasa desain visual bawaan (default)-nya. Jika Anda memaksakan diri masuk ke kelas Laravel tanpa memahami Tailwind, Anda akan mengalami syok berat ketika melihat seluruh file tampilan (View) Laravel Anda dipenuhi kelas-kelas panjang seperti inline-flex items-center px-4 border-transparent .... Kelas ini adalah persiapan mental dan visual Anda.

💎 Materi

Siapkan jari Anda, matikan file style.css lama Anda, dan mari menulis semua gaya langsung di dalam HTML! Mari tinggalkan keterbatasan komponen, dan selami kebebasan lautan Utility-First Tailwind! 🌊