Full code: raflizocky/laravel11-tailadmin.
# Laravel 11 Requirements
php -v # >= 8.2
composer -v
node -v # >= v14.16
npm -v
Laravel
Start Apache & MySQL in your web server.
# install laravel 11
composer create-project "laravel/laravel:^11.0" example-app
# .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password
# migrate & serve
php artisan migrate
php artisan serve
TailAdmin
1. Download
Use the HTML + Tailwind CSS template. Extract and rename it to tailadmin, then move it to Laravel's public folder.
2. Webpack
Since the template uses Webpack, build the project to generate required assets:
# Navigate to public/tailadmin, open terminal
npm i
npm run build
Verify a build folder was created inside tailadmin.
3. Base Layout
Inside resources/views, create a components folder and layout.blade.php. Open build/index.html, copy its content, paste into layout.blade.php.
Update all asset paths:
<!-- Change from: -->
<link href="style.css" rel="stylesheet">
<!-- To: -->
<link href="{{ asset('tailadmin/build/style.css') }}" rel="stylesheet">
-
components/header.blade.php
<head>
...
</head>
components/sidebar.blade.php— continue...layout.blade.php
<!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 }">
<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>
<div class="flex h-screen overflow-hidden">
<x-sidebar></x-sidebar>
<div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
{{ $slot }}
</div>
</div>
<script defer src="{{ asset('tailadmin/build/bundle.js') }}"></script>
</body>
</html>
4. Dashboard
-
app/Http/Controllers/DashboardController.php
# php artisan make:controller DashboardController
<?php
namespace App\Http\Controllers;
class DashboardController extends Controller
{
public function index()
{
return view('dashboard.index');
}
}
-
routes/web.php
use App\Http\Controllers\DashboardController;
Route::get('/', [DashboardController::class, 'index']);
-
resources/views/dashboard/index.blade.php
<x-layout>
<!-- continue... -->
</x-layout>
Need help building your app?
I'm available for freelance web & Android development — raflizocky.netlify.app
☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky
United States
NORTH AMERICA
Related News
How Braze’s CTO is rethinking engineering for the agentic area
11h ago
Amazon Employees Are 'Tokenmaxxing' Due To Pressure To Use AI Tools
22h ago
KDE Receives $1.4 Million Investment From Sovereign Tech Fund
2h ago
Instagram’s new ‘Instants’ feature combines elements from Snapchat and BeReal
2h ago
Six Claude Code Skills That Close the AI Agent Feedback Loop
2h ago