Pernah nggak sih kamu nulis CSS ratusan baris cuma buat bikin satu tombol yang lumayan kelihatan bagus? Atau copy-paste class Bootstrap yang itu-itu aja sampai file kamu penuh dengan btn btn-primary di mana-mana? Kalau iya, selamat datang di club! 😅
Di artikel ke-37 dari seri 50 Artikel Belajar Laravel ini, kita bakal ngobrolin sesuatu yang bakal mengubah cara kamu styling web selamanya: Tailwind CSS terintegrasi di Laravel. Dan yang bikin makin keren, kita akan kombinasikan ini dengan kekuatan blade component Laravel — fitur template engine Laravel yang memungkinkan kamu membuat komponen UI yang bisa dipakai ulang di seluruh aplikasi. Cocok banget kan?
Tailwind CSS adalah framework CSS utility-first — artinya kamu styling langsung di HTML menggunakan class-class kecil seperti flex, text-xl, bg-indigo-500. Berbeda dari Bootstrap yang punya komponen jadi, Tailwind memberi kamu "bahan mentah" untuk membangun desain yang benar-benar unik tanpa harus override style orang lain.
🚀 Kenapa Tailwind CSS + Blade Component Laravel = Pasangan Ideal?
Bayangkan kamu lagi masak. Tailwind CSS itu seperti lemari bumbu yang isinya lengkap — ada garam, gula, merica, semua tersedia dalam toples-toples kecil. Sedangkan blade component Laravel itu seperti resep masakan yang sudah kamu tulis sekali dan bisa kamu ikuti kapan saja tanpa harus ingat semua langkahnya dari awal.
Kombinasi keduanya? Kamu bisa membuat UI yang konsisten, bisa dipakai ulang, dan mudah dimodifikasi — tanpa harus nulis CSS baru setiap saat. Ini bukan cuma soal gaya; ini soal produktivitas dan maintainability jangka panjang.
Tailwind secara otomatis menghapus class yang tidak dipakai saat build production (PurgeCSS). Hasilnya? File CSS kamu bisa sekecil 5–10 KB di production — jauh lebih ringan dari Bootstrap yang bisa 100+ KB!
📊 Tailwind CSS vs Bootstrap: Pilih yang Mana?
🛠️ Cara Mengintegrasikan Tailwind CSS di Laravel (Step-by-Step)
Oke, mari kita langsung praktik. Pastikan kamu sudah punya proyek Laravel yang berjalan. Kalau belum, bisa lihat artikel-artikel sebelumnya di seri ini. Berikut langkah-langkahnya:
Install Tailwind CSS via NPM
Buka terminal di root proyek Laravel kamu, lalu jalankan perintah berikut:
# Install Tailwind CSS dan dependencies-nya npm install -D tailwindcss postcss autoprefixer # Generate file konfigurasi Tailwind npx tailwindcss init -p
Perintah ini akan menghasilkan dua file: tailwind.config.js dan postcss.config.js
Konfigurasi tailwind.config.js
Buka file tailwind.config.js dan tambahkan path ke file Blade kamu agar Tailwind bisa melakukan purging dengan benar:
/** @type {import('tailwindcss').Config} */ export default { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [], };
Tambahkan Directive Tailwind ke CSS
Buka file resources/css/app.css dan tambahkan tiga baris magic ini:
/* Tiga directive ini wajib ada! */ @tailwind base; @tailwind components; @tailwind utilities;
Pastikan Vite Sudah Dikonfigurasi
Cek file vite.config.js — pastikan ada konfigurasi untuk Laravel dan file CSS:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js' ], refresh: true, }), ], });
Jalankan Development Server
Buka dua terminal secara bersamaan — satu untuk Laravel, satu untuk Vite:
# Terminal 1 — jalankan Laravel php artisan serve # Terminal 2 — jalankan Vite dev server npm run dev
Jangan lupa tambahkan directive @vite di layout utama Blade kamu di dalam tag <head>:
@vite(['resources/css/app.css', 'resources/js/app.js'])
🧱 Membuat Blade Component Laravel dengan Styling Tailwind
Nah, ini bagian yang paling seru! Setelah Tailwind terpasang, sekarang kita gabungkan dengan blade component Laravel untuk membuat komponen UI yang reusable. Bayangkan kamu punya tombol dengan desain khusus — daripada nulis class yang panjang berkali-kali, lebih baik bungkus jadi satu component!
▶ Langkah 1: Buat Blade Component baru via Artisan
# Buat blade component bernama "AppButton"
php artisan make:component AppButton
Ini akan menghasilkan dua file: app/View/Components/AppButton.php dan resources/views/components/app-button.blade.php
▶ Langkah 2: Edit file component Blade dengan class Tailwind
<!-- Blade Component: AppButton --> <button {{ $attributes->merge([ 'class' => 'inline-flex items-center px-6 py-3 rounded-xl font-semibold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200 shadow-md hover:shadow-lg active:scale-95' ]) }} > {{ $slot }} </button>
▶ Langkah 3: Gunakan component di halaman Blade mana pun
<!-- Pakai blade component dengan syntax x- prefix --> <x-app-button type="submit"> Simpan Data </x-app-button> <!-- Bisa tambah class ekstra juga! --> <x-app-button class="w-full mt-4"> Login Sekarang </x-app-button>
Sejak Laravel 11 dengan Laravel Breeze sebagai starter kit, Tailwind CSS otomatis diinclude! Ini menandakan bahwa komunitas Laravel sudah "mengadopsi" Tailwind sebagai pilihan styling utama untuk proyek modern.
🎓 Contoh Nyata: Membuat Card Component dengan Blade & Tailwind
Sekarang mari kita buat contoh yang lebih kompleks: sebuah Card component dengan blade component Laravel yang bisa menerima properti dinamis — judul, konten, warna, dan gambar. Ini adalah pola yang paling sering kamu pakai di proyek nyata!
▶ Class PHP untuk Component
<?php namespace App\View\Components; use Illuminate\View\Component; class InfoCard extends Component { public function __construct( public string $title = '', public string $badge = '', public string $color = 'indigo', ) {} public function render() { return view('components.info-card'); } }
▶ Template Blade Component
<div class="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden hover:shadow-xl transition-shadow duration-300"> <!-- Header dengan warna dinamis --> <div class="bg-{{ $color }}-600 px-6 py-4"> <div class="flex items-center justify-between"> <h3 class="text-white font-bold text-lg"> {{ $title }} </h3> @if($badge) <span class="bg-white/20 text-white text-xs font-medium px-3 py-1 rounded-full"> {{ $badge }} </span> @endif </div> </div> <!-- Body: slot untuk konten bebas --> <div class="p-6"> {{ $slot }} </div> </div>
Tailwind menggunakan PurgeCSS saat build. Kalau kamu tulis bg-{{ $color }}-600, class itu tidak akan dikenali saat scanning. Solusinya: gunakan safelist di tailwind.config.js atau buat mapping class secara eksplisit di PHP.
Gunakan Tailwind ketika: styling bisa diexpresikan dengan utility class standar (padding, margin, warna, typography, flexbox, grid). Ini mencakup 80-90% kasus styling sehari-hari.
Gunakan @apply di CSS ketika: kamu butuh class yang dipakai berkali-kali dengan kombinasi utility yang sama — misalnya .btn-primary.
Gunakan Custom CSS murni ketika: kamu butuh animasi kompleks, pseudo-element yang tidak didukung Tailwind, atau properti CSS yang sangat spesifik.
Extension Tailwind CSS IntelliSense di VS Code memberikan autocomplete untuk semua class Tailwind, preview warna, dan warning jika ada class yang tidak valid. Ini menghemat waktu kamu 10x lipat! Cari di marketplace VS Code dengan keyword "Tailwind CSS IntelliSense".
No comments:
Post a Comment