TallStackUI adalah component library untuk Laravel yang menyediakan berbagai komponen antarmuka yang siap pakai. Dengan rilis v3, TallStackUI kini mendukung Tailwind CSS v4 secara penuh, sehingga integrasinya menjadi lebih mudah dengan proyek modern.
Namun, jika Anda sudah menggunakan Livewire Flux, perlu ada sedikit konfigurasi tambahan agar kedua library ini tidak bertabrakan. Berikut adalah panduan lengkapnya.
Mengapa Perlu Konfigurasi Khusus?
Flux dan TallStackUI sama-sama menyediakan komponen dengan nama yang sama, seperti button, alert, dan lainnya. Ketika diinstall bersamaan, ini akan menyebabkan konflik naming. Solusinya adalah menggunakan component prefix dari TallStackUI.
Langkah 1: Install TallStackUI via Composer
composer require tallstackui/tallstackui:^3.0.0Setelah install selesai, Anda akan mendapatkan versi terbaru yang kompatibel dengan Tailwind CSS v4.
Langkah 2: Konfigurasi Prefix di .env
Tambahkan konfigurasi prefix ke file .env:
TALLSTACKUI_PREFIX="ts-"With prefix ini, semua komponen TallStackUI akan dipanggil dengan awalan ts- (x-ts-button, x-ts-alert, dll), sehingga tidak bentrok dengan Flux yang menggunakan nama standar.
Langkah 3: Update app.css untuk Tailwind v4
Buka file resources/css/app.css dan update dengan konfigurasi TallStackUI untuk Tailwind CSS v4:
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@theme {
/* TallStackUI base styles */
}
/* Import TallStackUI Core */
@import "@tallstackui/core/resources/css/theme.css";Langkah 4: Update Layout Head
Tambahkan directive TallStackUI di dalam <head> pada file layout utama Anda, biasanya di resources/views/partials/head.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'App')</title>
<!-- TallStackUI Script Directive -->
<tallstackui:script />
</head>
<body>
@yield('content')
</body>
</html>Langkah 5: Install @tailwindcss/forms
Install plugin forms untuk styling elemen form yang lebih rapi:
npm install @tailwindcss/formsLangkah 6: Tambahkan Contoh Komponen di Dashboard
Sekarang kita bisa mulai menggunakan komponen TallStackUI. Tambahkan contoh komponen di resources/views/dashboard.blade.php:
<x-base.layout>
<x-slot:title>Dashboard</x-slot:title>
<div class="space-y-6">
<h1 class="text-2xl font-bold">Dashboard</h1>
<!-- TallStackUI Alert Component -->
<x-ts-alert
title="Sukses!"
description="TallStackUI v3 berhasil terintegrasi dengan Tailwind CSS v4."
color="green"
/>
<!-- TallStackUI Button Component -->
<div class="flex gap-2">
<x-ts-button color="blue">Button Primary</x-ts-button>
<x-ts-button color="red" variant="outline">Button Outline</x-ts-button>
</div>
</div>
</x-base.layout>Langkah 7: Build Assets
Setelah semua konfigurasi selesai, jalankan perintah berikut untuk meng-compile asset:
npm run build
php artisan optimize:clearCatatan Penting
Jika menggunakan Docker/Podman/Sail dan mengalami error connection ke database pada perintah optimize:clear, hal itu biasanya karena CACHE_STORE=database di file .env namun container database sedang tidak aktif. Error ini tidak memengaruhi integrasi TallStackUI, hanya berhubungan dengan cache Laravel untuk mempercepat request.
Pastikan container database berjalan sebelum menjalankan perintah tersebut:
podman-compose up -d
# atau
./vendor/bin/sail up -dMenjelajahi Lebih Banyak Komponen
Sekarang Anda sudah siap menggunakan seluruh komponen TallStackUI dengan prefix ts-. Kunjungi dokumentasi resmi di tallstackui.com untuk melihat daftar komponen yang tersedia.
Contoh penggunaan lainnya:
<!-- Modal -->
<x-ts-modal>
<x-slot:title>Konfirmasi</x-slot:title>
<p>Apakah Anda yakin ingin melanjutkan?</p>
<x-slot:footer>
<x-ts-button color="red" modals="close">Batal</x-ts-button>
<x-ts-button color="blue" modals="close">Ya, lanjutkan</x-ts-button>
</x-slot:footer>
</x-ts-modal>
<!-- Badge -->
<x-ts-badge color="purple">New Feature</x-ts-badge>
<!-- Card -->
<x-ts-card>
<x-slot:title>Informasi</x-slot:title>
<p>Ini adalah konten card Anda.</p>
</x-ts-card>Kesimpulan
Dengan konfigurasi prefix ts-, TallStackUI dan Flux dapat berjalan berdampingan tanpa konflik. Anda sekarang memiliki dua library UI yang powerful untuk membangun antarmuka Laravel dengan cepat dan konsisten.
Happy coding! 🚀