DEV Community

Cover image for Integrating TailAdmin with Laravel
Rafli Zocky
Rafli Zocky

Posted on • Originally published at Medium

Integrating TailAdmin with Laravel

#php #tailwindcss #laravel #webdev

Full code: raflizocky/laravel11-tailadmin.

# Laravel 11 Requirements

php -v # >= 8.2
composer -v
node -v # >= v14.16
npm -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
  • components/header.blade.php 
<head>
   ...
</head>
Enter fullscreen mode Exit fullscreen mode

  • 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>
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode
  • routes/web.php 
use App\Http\Controllers\DashboardController;
Route::get('/', [DashboardController::class, 'index']);
Enter fullscreen mode Exit fullscreen mode
  • resources/views/dashboard/index.blade.php 
<x-layout>
  <!-- continue... -->
</x-layout>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)