In this post, we’ll explore various methods to integrate Laravel (a PHP web framework) with TailAdmin (a Tailwind admin template). If you have a more efficient approach or suggestions, feel free to share them in the comments section — we’d love to hear from you!
Before diving into the integration, let’s briefly understand what Laravel and TailAdmin are. You can learn more about them through the following links:
- Laravel: https://laravel.com/docs/11.x#meet-laravel
- TailAdmin: https://tailadmin.com/
Let’s get started! 💨
Requirements
Before we begin, make sure you have the following installed:
- Node.js >= v14.16
- PHP >= 8.2
- Composer (Dependency Manager for PHP)
- A local server environment (e.g., XAMPP, MAMP, Laragon, Herd, or any preferred setup)
- Text Editor (e.g., VS Code, Sublime Text, PHPStorm, etc.)
Installation (Laravel)
1] Install Laravel 11
Create a folder, open terminal and paste this command:
composer create-project "laravel/laravel:^11.0" tailadmin-template
code tailadmin-template
2] Configure the Database
Before running Laravel, connect it to a database by editing the .env file:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tailadmin_template
DB_USERNAME=root
DB_PASSWORD=
3] Start Your Local Server
Open your local server app environment and start your MySQL and Apache.
Now, run the migration command to set up your database tables:
php artisan migrate
Check your database (e.g., via phpMyAdmin) to ensure the migration was successful. Now, serve your Laravel application:
php artisan serve
If you encounter any errors, feel free to ask in the comments!
Customization (TailAdmin)
1] Download TailAdmin
This time, we’ll use an HTML + Tailwind CSS template. You can use other templates as well, as the basic concepts remain the same.
Select HTML and download the free version.
Or you can just clone it. Then, extract and rename it to tailadmin and move it to Laravel’s public folder.
2] Built the TailAdmin Webpack
Since the template uses Webpack as its bundler, we need to build the project to generate the required assets. Follow these steps:
# Navigate to `public/tailadmin` path, & open terminal
# First install all dependencies
npm i
# Then build the project
npm run build
After running these commands, verify that a build folder has been created inside your tailadmin directory. This folder should contain all the compiled assets and files needed for the project.
3] Create a Base Layout
Inside resources/views, create a new folder name components and a new file name layout.blade.php.
Next, open build/index.html. Copy its content and paste it into layout.blade.php.
Now, update all asset paths (CSS, JS, images) like this:
<!-- Change from: -->
<link href="style.css" rel="stylesheet">
<!-- To: -->
<link href="{{ asset('tailadmin/build/style.css') }}" rel="stylesheet">
Repeat this for all static files.
4] Create a reusable component
To improve readability and reusability, break the layout into smaller components:
-
components/header.blade.php
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
eCommerce Dashboard | TailAdmin - Tailwind CSS Admin Dashboard Template
</title>
<link rel="icon" href="{{ asset('tailadmin/build/favicon.ico') }}">
<link href="{{ asset('tailadmin/build/style.css') }}" rel="stylesheet">
</head>
-
components/sidebar.blade.php
# continue...
Use Laravel’s Blade templating to include them in layout.blade.php. In this case, I’m using component.
<!DOCTYPE html>
<html lang="en">
<x-header></x-header>
<body x-data="{ page: 'ecommerce', 'loaded': true, 'darkMode': true, 'stickyMenu': false, 'sidebarToggle': false, 'scrollTop': false }" x-init="darkMode = JSON.parse(localStorage.getItem('darkMode'));
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))" :class="{ 'dark text-bodydark bg-boxdark-2': darkMode === true }">
<!-- ===== Preloader Start ===== -->
<div x-show="loaded" x-init="window.addEventListener('DOMContentLoaded', () => { setTimeout(() => loaded = false, 500) })"
class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black">
<div class="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent">
</div>
</div>
<!-- ===== Preloader End ===== -->
<!-- ===== Page Wrapper Start ===== -->
<div class="flex h-screen overflow-hidden">
<!-- ===== Sidebar Start ===== -->
<x-sidebar></x-sidebar>
<!-- ===== Sidebar End ===== -->
<!-- ===== Content Area Start ===== -->
<div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
{{ $slot }}
</div>
<!-- ===== Content Area End ===== -->
</div>
<!-- ===== Page Wrapper End ===== -->
<script defer src="{{ asset('tailadmin/build/bundle.js') }}"></script>
</body>
</html>
5] Create a Dashboard page
Next, let’s modify the build/index.html view into a dashboard page using a controller, routes, and views in Laravel.
- Create the Controller, run:
php artisan make:controller DashboardController
- Edit
app/Http/Controllers/DashboardController.php:
<?php
namespace App\Http\Controllers;
class DashboardController extends Controller
{
public function index()
{
return view('dashboard.index');
}
}
- Edit
routes/web.php:
use App\Http\Controllers\DashboardController;
Route::get('/', [DashboardController::class, 'index']);
- Create
resources/views/dashboard/index.blade.phpand add:
<x-layout>
# continue...
</x-layout>
This renders a simple TailAdmin dashboard inside our Laravel 11 app! 🎉
After setup, your project should look like this:
Conclusion
That’s it! We’ve successfully integrated the TailAdmin template with Laravel 11. If you run into any issues or have suggestions for improvement, feel free to share them in the comments below. Your feedback is always appreciated!
Thank you for following along, and I look forward to seeing you in the next post! 👋
Full code available here: https://github.com/raflizocky/laravel11-tailadmin
Top comments (0)