Integrating TailAdmin with Laravel

Source: Dev.to

Full code: raflizocky/laravel11-tailadmin

Laravel 11 Requirements

# php version
php -v   # >= 8.2

composer -v
node -v   # >= v14.16
npm -v

Laravel Setup

# install Laravel 11
composer create-project "laravel/laravel:^11.0" example-app

# .env configuration
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

Download the HTML + Tailwind CSS template from the official site, extract the archive, rename the folder to tailadmin, and move it into Laravel’s public directory.

2. Webpack

The template uses Webpack to compile assets.

# from the Laravel project root
cd public/tailadmin
npm i
npm run build

A build folder should now exist inside public/tailadmin.

3. Base Layout

1. Create a components directory inside resources/views.
2. Add a layout.blade.php file and copy the contents of public/tailadmin/build/index.html into it.
3. Update asset paths to use Laravel’s asset() helper.

Example layout.blade.php

 localStorage.setItem('darkMode', JSON.stringify(value)))"
      :class="{ 'dark text-bodydark bg-boxdark-2': darkMode === true }">

     { 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">
        
    

    
        
        
            {{ $slot }}
        
    

    

You can also create simple header and sidebar components (components/header.blade.php, components/sidebar.blade.php) and include them with <x-header /> and <x-sidebar /> tags.

4. Dashboard

Create a controller for the dashboard:

php artisan make:controller DashboardController

With these steps, TailAdmin’s UI is now integrated into a fresh Laravel 11 application.