Laravel Setup
Tailwind CSS · Livewire · Auth · Free Theme · Step by step
1
Install Laravel
required
▼
Install the Laravel installer globally via Composer, then create a new project.
terminal
composer global require laravel/installer
laravel new my-app
or with composer directly
composer create-project laravel/laravel my-app
cd my-app
Requirements: PHP 8.2+, Composer, Node.js 18+
2
Install Tailwind CSS
required
▼
Install Tailwind via npm and configure it for your Blade/Livewire views.
install
npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js — content paths
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./app/Livewire/**/*.php',
],
resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
3
Install Livewire
required
▼
Install Livewire 3 (latest) via Composer and publish its config.
terminal
composer require livewire/livewire
php artisan livewire:publish --config
add to your base blade layout
@livewireStyles ← in <head>
@livewireScripts ← before </body>
create a component to test
php artisan make:livewire Counter
Livewire 3 auto-injects scripts — no manual
@livewireScripts needed if using the full-page layout directive.4
Authentication (Laravel Breeze)
required
▼
Laravel Breeze is the recommended starter kit — it scaffolds login, register, password reset, and email verification, styled with Tailwind. Choose the Livewire stack for full integration.
install breeze
composer require laravel/breeze --dev
php artisan breeze:install
when prompted, select:
livewire # Livewire + Blade stack
dark # dark mode support (optional)
PHPUnit / Pest # testing framework
migrate and run
php artisan migrate
npm install && npm run dev
Alternative: Use
php artisan breeze:install blade for pure Blade, or php artisan breeze:install react for Inertia + React.5
Free Beautiful Themes
pick one
▼
Free Tailwind CSS themes that work great with Laravel + Livewire. Click a card to learn more.
example — install daisyUI (easiest)
npm install daisyui
add to tailwind.config.js plugins array
plugins: [require('daisyui')],
daisyui: { themes: ['light', 'dark', 'cupcake'] },
example — install Flowbite
npm install flowbite
// tailwind.config.js
plugins: [require('flowbite/plugin')],
content: [..., './node_modules/flowbite/**/*.js'],
6
Run everything
required
▼
Start the dev server (Vite), the queue worker (optional), and Laravel's built-in server — or use Herd/Valet.
two terminals
# Terminal 1
npm run dev
# Terminal 2
php artisan serve
production build
npm run build
php artisan config:cache
php artisan route:cache
php artisan view:cache
Tip: Use Laravel Herd (free) on macOS/Windows to skip
php artisan serve entirely — zero config local domains.
Comments
Post a Comment