Introduction
Hai, Sobat Developer! Siapa yang tidak kenal dengan TailwindCSS? Framework CSS yang satu ini lagi populer banget di kalangan pengembang web, terutama karena kemampuannya yang sangat fleksibel dan mudah disesuaikan. Dengan utility-first CSS, TailwindCSS memungkinkan kita untuk mendesain web dengan cepat tanpa harus menulis banyak CSS custom.
Di artikel kali ini, saya akan menunjukkan cara install TailwindCSS di Laravel 11. TailwindCSS sangat cocok digunakan dalam proyek Laravel karena memberikan kebebasan penuh dalam penataan elemen-elemen HTML tanpa harus memikirkan konflik dengan CSS lainnya. Yuk, langsung saja kita simak panduan lengkapnya, dari instalasi project Laravel, setup TailwindCSS, hingga menggunakannya di halaman Laravel Anda.
Langkah 1: Install Project Laravel 11
Sebelum kita mulai dengan TailwindCSS, pastikan kalian sudah punya project Laravel. Jika belum, mari kita buat project Laravel terlebih dahulu.
1.1 Install Laravel 11 dengan Composer
Untuk membuat project Laravel baru, buka terminal atau command prompt dan jalankan perintah berikut:
composer create-project --prefer-dist laravel/laravel laravel-tailwind
Perintah ini akan mengunduh dan menginstal Laravel 11 dalam folder laravel-tailwind. Setelah selesai, masuk ke dalam folder project:
cd laravel-tailwind
1.2 Jalankan Laravel Development Server
Setelah project berhasil dibuat, jalankan server Laravel dengan perintah:
php artisan serve
Sekarang buka browser dan akses http://127.0.0.1:8000 untuk memastikan aplikasi Laravel Anda berjalan dengan baik.
Langkah 2: Install TailwindCSS di Laravel 11
Sekarang, mari kita fokus ke bagian utama artikel ini, yaitu install TailwindCSS di Laravel 11. Laravel memiliki sistem build assets yang sangat baik dengan menggunakan Laravel Mix, yang memungkinkan kita untuk mengintegrasikan berbagai tool front-end seperti TailwindCSS.
2.1 Install TailwindCSS menggunakan NPM
Untuk memulai, kita harus menginstal TailwindCSS dan beberapa dependensi yang dibutuhkan menggunakan npm.
Pertama, buka terminal Anda dan jalankan perintah berikut untuk menginstal TailwindCSS di project Laravel Anda:
npm install tailwindcss postcss autoprefixer
Perintah ini akan menginstal TailwindCSS beserta dua plugin yang diperlukan, yaitu PostCSS dan Autoprefixer, yang berguna untuk mengoptimalkan CSS.
2.2 Inisialisasi TailwindCSS
Setelah TailwindCSS terinstal, Anda perlu menginisialisasi konfigurasi Tailwind di dalam project. Jalankan perintah berikut:
npx tailwindcss init
Perintah ini akan menghasilkan file konfigurasi tailwind.config.js di root folder project Anda.
2.3 Konfigurasi Tailwind di Laravel Mix
Setelah file konfigurasi TailwindCSS dibuat, langkah selanjutnya adalah mengonfigurasi Laravel Mix untuk memproses file CSS menggunakan Tailwind. Buka file webpack.mix.js yang berada di root folder project Anda dan ubah isinya menjadi seperti berikut:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
Kode di atas memberitahu Laravel Mix untuk memproses file app.css di folder resources/css/ menggunakan TailwindCSS.
2.4 Konfigurasi File CSS untuk Tailwind
Sekarang, mari kita buat file app.css di folder resources/css/ (jika belum ada) dan tambahkan direktif TailwindCSS di dalamnya. Buka atau buat file resources/css/app.css dan tambahkan kode berikut:
@tailwind base;
@tailwind components;
@tailwind utilities;
Tiga direktif ini adalah inti dari TailwindCSS:
@tailwind base;: Mengimpor reset CSS dari Tailwind.@tailwind components;: Mengimpor komponen-komponen dasar.@tailwind utilities;: Mengimpor utility classes yang bisa digunakan langsung di HTML.
2.5 Menambahkan PurgeCSS (Opsional, tapi disarankan)
Untuk memastikan ukuran file CSS yang dihasilkan tidak terlalu besar, kita bisa menggunakan PurgeCSS. PurgeCSS akan menghapus kelas CSS yang tidak digunakan di aplikasi. Anda dapat mengonfigurasi PurgeCSS di file tailwind.config.js.
Buka file tailwind.config.js dan tambahkan konfigurasi purge seperti berikut:
module.exports = {
content: [
"./resources/views/**/*.blade.php",
"./resources/js/**/*.vue",
"./resources/js/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
Konfigurasi ini memberitahu Tailwind untuk mencari kelas CSS yang digunakan di file Blade dan Vue di dalam folder resources/views/ dan resources/js/, lalu menghapus kelas CSS yang tidak digunakan.
Langkah 3: Menggunakan TailwindCSS di Laravel
Sekarang setelah TailwindCSS berhasil terinstal dan dikonfigurasi, saatnya untuk mulai menggunakannya dalam aplikasi Laravel Anda. Kita akan membuat halaman sederhana yang menggunakan utility classes dari TailwindCSS.
3.1 Buat View dengan TailwindCSS
Mari kita buat halaman pertama yang menggunakan TailwindCSS. Buka folder resources/views dan buat file baru bernama welcome.blade.php. Isi file tersebut dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 & TailwindCSS</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="sm:text-center">
<h2 class="text-3xl font-extrabold text-indigo-600">Selamat Datang di Laravel 11 dengan TailwindCSS!</h2>
<p class="mt-4 text-xl text-gray-500">Mari mulai membuat aplikasi yang keren dengan TailwindCSS.</p>
</div>
<div class="mt-8 max-w-7xl mx-auto">
<div class="text-center">
<a href="#"
class="inline-block bg-indigo-600 text-white font-semibold rounded-md py-2 px-4 hover:bg-indigo-700">
Mulai Sekarang
</a>
</div>
</div>
</div>
</body>
</html>
Dalam contoh di atas, saya menggunakan beberapa utility classes dari TailwindCSS seperti:
min-h-screen,flex,justify-center, danpy-12untuk membuat layout yang responsif dan terpusat.bg-gray-100,text-gray-900untuk pengaturan warna latar belakang dan teks.bg-indigo-600,text-whiteuntuk styling tombol.
3.2 Cek Hasilnya di Browser
Sekarang, jalankan server Laravel menggunakan perintah:
php artisan serve
Buka browser dan akses http://127.0.0.1:8000. Jika semua langkah diikuti dengan benar, Anda akan melihat halaman yang sudah menggunakan TailwindCSS dengan desain yang simpel dan responsif.
Langkah 4: Menyelesaikan dan Optimasi
Setelah selesai, Anda bisa mulai mengembangkan aplikasi menggunakan TailwindCSS dengan berbagai utility classes yang tersedia. Jika aplikasi sudah siap untuk produksi, pastikan Anda menjalankan npm run production untuk meminify dan mengoptimalkan file CSS Anda:
npm run production
Ini akan menghasilkan file CSS yang lebih kecil dan lebih efisien untuk digunakan di aplikasi Anda.
Kesimpulan
Menggunakan TailwindCSS di Laravel 11 sangat mudah dan menguntungkan, karena Tailwind memberikan fleksibilitas tinggi dalam mendesain aplikasi web Anda. Dengan mengikuti langkah-langkah di artikel ini, Anda dapat dengan cepat mengintegrasikan TailwindCSS ke dalam project Laravel dan mulai membangun tampilan web yang menarik dan responsif.
Semoga artikel ini membantu Anda dalam mengatur TailwindCSS di Laravel. Jangan ragu untuk berkreasi dengan berbagai utility classes Tailwind dan eksplorasi lebih jauh dokumentasinya untuk fitur lainnya.
Leave a Reply