Zum Inhalt springen
Jefferson Gonçalves
← Zurück zu den Projekten

Tailadmin Laravel

#TailAdmin Laravel - Tailwind CSS Free Laravel Dashboard

TailAdmin Laravel is a modern, production-ready admin dashboard template powered by Laravel 12, Tailwind CSS v4, Alpine.js, and a clean, modular architecture. TailAdmin is one of the most popular Tailwind CSS dashboard now also available for Larvael. It’s designed for building fast, scalable admin panels, CRM dashboards, SaaS backends, and any data-driven application where clarity and performance matter. TailAdmin - Next.js Dashboard Preview

#Quick Links

Here’s a tighter, more search-friendly version that highlights value and avoids fluff while keeping your structure intact.

#✨ Key Features

  • 🚀 Laravel 12 Core - Built on the latest Laravel release with improved routing, security, and Blade templating
  • 🎨 Tailwind CSS v4 - Utility-first styling for rapid, consistent UI development
  • ⚡ Alpine.js Interactivity - Lightweight reactivity without a heavy JavaScript framework
  • 📦 Vite Build System - Fast dev server, instant HMR, and optimized production builds
  • 📱 Fully Responsive Layouts - Smooth, mobile-first design that adapts across all screen sizes
  • 🌙 Built-in Dark Mode - Ready-to-use modern dark theme for better usability and aesthetics
  • 📊 Advanced UI Components - Charts, data tables, forms, calendars, modals, and reusable blocks for complex dashboards
  • 🎯 Production-Ready Dashboard UI - Clean, modern interface crafted for real apps, not placeholder demos

#Other Versions

#📋 Requirements

To set up TailAdmin Laravel, make sure your environment includes:

  • PHP 8.2+
  • Composer (PHP dependency manager)
  • Node.js 18+ and npm (for compiling frontend assets)
  • Database - Works with SQLite (default), MySQL, or PostgreSQL

#Tailwind CSS Laravel Dashboard

TailAdmin delivers a refined Tailwind CSS Laravel Dashboard experience, combining Laravel’s robust backend with Tailwind’s flexible utility classes. The result is a clean, fast, and customizable dashboard that helps developers build modern admin interfaces without the usual front-end complexity. It’s ideal for teams looking for a Tailwind-powered Laravel starter that stays lightweight and easy to scale.

#Laravel Admin Dashboard

If you’re searching for a dependable Laravel Admin Dashboard template that’s easy to set up and ready for production, TailAdmin fits the job. It offers a polished UI, reusable components, optimized performance, and all the essentials needed to launch dashboards, CRM systems, and internal tools quickly. It gives developers a solid foundation, so projects move faster with fewer decisions to worry about.

#Check Your Environment

Verify your installations:

php -v
composer -V
node -v
npm -v

#🐳 Docker & Laravel Sail Setup (Official)

TailAdmin Laravel includes pre-configured, official support for Docker powered by Laravel Sail (PHP 8.4, MySQL 8.0, Redis, and Mailpit).

#Prerequisites

Make sure Docker Desktop is installed and running on your machine.

#Quick Start with Docker & Sail

  1. Clone the repository:

    git clone https://github.com/TailAdmin/tailadmin-laravel.git
cd tailadmin-laravel

  2. Configure environment:

    cp .env.example .env

    In your .env file, ensure container networking is set:

    DB_HOST=mysql
DB_USERNAME=sail
DB_PASSWORD=password
REDIS_HOST=redis

  3. Install Composer dependencies (if PHP is not installed locally):

    docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php84-composer:latest \
    composer install --ignore-platform-reqs

    (Or simply run composer install if you have PHP and Composer locally).

  4. Start Docker containers:

    ./vendor/bin/sail up -d

  5. Generate application key & run migrations:

    ./vendor/bin/sail artisan key:generate
./vendor/bin/sail artisan migrate

  6. Install frontend dependencies & start Vite dev server:

    ./vendor/bin/sail npm install
./vendor/bin/sail npm run dev

  7. Access the application:

#Convenient Sail Shell Alias

To avoid typing ./vendor/bin/sail repeatedly, add an alias to your shell profile (~/.zshrc or ~/.bashrc):

alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'

Now you can run:

sail up -d
sail artisan migrate
sail npm run dev
sail down

#Container Networking & Vite Architecture

  • Vite Dev Server (Port 5173): Pre-configured in vite.config.js with server.host: "0.0.0.0" and server.hmr.host: "localhost". This ensures the host browser can access assets directly without ERR_EMPTY_RESPONSE connection errors.
  • Volume File Watcher: File polling (usePolling: true) is enabled in vite.config.js to guarantee instant hot reload when editing code on macOS, Windows, or Linux host filesystems.
  • Container Database Host: Inside the Docker bridge network, services communicate via container names. Set DB_HOST=mysql and REDIS_HOST=redis inside Docker.
  • Tailwind CSS v4: Seamlessly compiled inside containers via @tailwindcss/vite without legacy v3 config conflicts.

#🚀 Quick Start Installation (Local / Native)

#Step 1: Clone the Repository

git clone https://github.com/TailAdmin/tailadmin-laravel.git
cd tailadmin-laravel

#Step 2: Install PHP Dependencies

composer install

This command will install all Laravel dependencies defined in composer.json.

#Step 3: Install Node.js Dependencies

npm install

Or if you prefer yarn or pnpm:

# Using yarn
yarn install

# Using pnpm
pnpm install

#Step 4: Environment Configuration

Copy the example environment file:

cp .env.example .env

For Windows users:

copy .env.example .env

Or create it programmatically:

php -r "file_exists('.env') || copy('.env.example', '.env');"

#Step 5: Generate Application Key

php artisan key:generate

This creates a unique encryption key for your application.

#Step 6: Configure Database

#Option A: Using MySQL/PostgreSQL

Update your .env file with your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tailadmin_db
DB_USERNAME=your_username
DB_PASSWORD=your_password

Create the database:

# MySQL
mysql -u root -p -e "CREATE DATABASE tailadmin_db;"

# PostgreSQL
createdb tailadmin_db

Run migrations:

php artisan migrate

#Step 7: (Optional) Seed the Database

If you want sample data:

php artisan db:seed

#Step 8: Storage Link

Create a symbolic link for file storage:

php artisan storage:link

#🏃 Running the Application

#Development Mode (Recommended)

The easiest way to start development is using the built-in script:

composer run dev

This single command starts:

  • ✅ Laravel development server (http://localhost:8000)
  • ✅ Vite dev server for hot module reloading
  • ✅ Queue worker for background jobs
  • ✅ Log monitoring

Access your application at: http://localhost:8000

#Manual Development Setup

If you prefer to run services individually in separate terminal windows:

Terminal 1 - Laravel Server:

php artisan serve

Terminal 2 - Frontend Assets:

npm run dev

#Building for Production

#Build Frontend Assets

npm run build

#Optimize Laravel

# Clear and cache configuration
php artisan config:cache

# Cache routes
php artisan route:cache

# Cache views
php artisan view:cache

# Optimize autoloader
composer install --optimize-autoloader --no-dev

#Production Environment

Update your .env for production:

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com

#🧪 Testing

Run the test suite using Pest:

composer run test

Or manually:

php artisan test

Run with coverage:

php artisan test --coverage

Run specific tests:

php artisan test --filter=ExampleTest

#📜 Available Commands

#Composer Scripts

# Start development environment
composer run dev

# Run tests
composer run test

# Code formatting (if configured)
composer run format

# Static analysis (if configured)
composer run analyze

#NPM Scripts

# Start Vite dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint JavaScript/TypeScript
npm run lint

# Format code
npm run format

#Artisan Commands

# Start development server
php artisan serve

# Run migrations
php artisan migrate

# Rollback migrations
php artisan migrate:rollback

# Fresh migrations with seeding
php artisan migrate:fresh --seed

# Generate application key
php artisan key:generate

# Clear all caches
php artisan optimize:clear

# Cache everything for production
php artisan optimize

# Create symbolic link for storage
php artisan storage:link

# Start queue worker
php artisan queue:work

# List all routes
php artisan route:list

# Create a new controller
php artisan make:controller YourController

# Create a new model
php artisan make:model YourModel -m

# Create a new migration
php artisan make:migration create_your_table

#📁 Project Structure

tailadmin-laravel/
├── app/                    # Application logic
│   ├── Http/              # Controllers, Middleware, Requests
│   ├── Models/            # Eloquent models
│   └── Providers/         # Service providers
├── bootstrap/             # Framework bootstrap files
├── config/                # Configuration files
├── database/              # Migrations, seeders, factories
│   ├── migrations/
│   ├── seeders/
│   └── factories/
├── public/                # Public assets (entry point)
│   ├── build/            # Compiled assets (generated)
│   └── index.php         # Application entry point
├── resources/             # Views and raw assets
│   ├── css/              # Stylesheets (Tailwind)
│   ├── js/               # JavaScript files (Alpine.js)
│   └── views/            # Blade templates
├── routes/                # Route definitions
│   ├── web.php           # Web routes
│   ├── api.php           # API routes
│   └── console.php       # Console routes
├── storage/               # Logs, cache, uploads
│   ├── app/
│   ├── framework/
│   └── logs/
├── tests/                 # Pest test files
│   ├── Feature/
│   └── Unit/
├── docker-compose.yml     # Docker & Laravel Sail configuration
├── .env.example           # Example environment file
├── artisan                # Artisan CLI
├── composer.json          # PHP dependencies
├── package.json           # Node dependencies
├── vite.config.js         # Vite configuration with container networking
└── resources/css/app.css  # Tailwind CSS v4 configuration (@theme)

#🐛 Troubleshooting

#Common Issues

#"Class not found" errors

composer dump-autoload

#Permission errors on storage/bootstrap/cache

chmod -R 775 storage bootstrap/cache

#NPM build errors

rm -rf node_modules package-lock.json
npm install

#Clear all caches

php artisan optimize:clear

#Database connection errors

  • Check .env database credentials
  • Ensure database server is running
  • Verify database exists

#🔄 Update Log

#[1.1.2] - 2026-09-02

  • Dependency updates: FullCalendar upgraded to v7 and ApexCharts / Swiper bumped to latest versions.
  • RTL layout support: Added right-to-left (RTL) direction support with automatic layout flipping and toggle.
  • Language / RTL switcher: Added switcher in user dropdown with persistent direction state in localStorage.
  • Keyboard & dropdown improvements: Enhanced dropdown behavior and click-outside handling.
  • Tailwind CSS v4 optimizations: Applied CSS logical properties across sidebar, tables, header, and components.

#[2026-05-23]

  • Added AI Settings page to configure models, keys, and token limits.
  • Added Maps page with MapLibre GL, Leaflet, and iframe styles.
  • Added Vector Maps page powered by AmCharts 5 geodata (World & USA).
  • Added Radar Charts page with 3 unique formats.
  • Added Radial Progress Charts page featuring 4 custom layout templates.
  • Introduced new Bar Charts Five & Six and Pie Charts Four & Five.

#[April 28, 2026]

  • Added AI Dashboard with token usage and revenue tracking.
  • Added Sales Dashboard with retention and multi-channel analytics.
  • Added Finance Dashboard with cashflow and balance management.
  • Introduced 6 New Layout variations for improved UI flexibility.
  • Integrated Advanced Data Visualization with 7+ new chart types.

#[2026-03-15]

  • Fixed PHP 8.5 deprecation warning

#[2025-12-29]

  • Added Date Picker in Statistics Chart

#License

Refer to our LICENSE page for more information.

Neue Version verfügbar.