In this tutorial, you will see 3 ways to set up tall stack in Laravel. A Tall Stack Stand for (Tailwind CSS, Alpine.js, Laravel and Livewire), it is like full stack development solution for Laravel developer. With the help of stack you can build light wight and awesome application. lets see.
3 Way to Setup Tall Stack in Laravel 8
Step 1: Tall Stack Set up with Breeze
Step 2: Tall Stack Set up with laravel frontend presets
Step 3: Tall Stack Set up with Jetstream
Step 1: Tall Stack Set up with Breeze
Laravel breeze package is my first choice for set up tall stack project. Laravel breeze is minimal package.
Create a New Laravel App
composer create-project laravel/laravel project-name
Install breeze
You need to install first breeze package.
composer require laravel/breeze --dev
Then, install breeze ui
php artisan breeze:install
Install livewire
composer require livewire/livewire
Include the JavaScript (on every page that will be using Livewire).
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
After, you need to install dependencies
npm install && npm run dev
And final run migrate
php artisan migrate
Step 2: Tall Stack Set up with laravel frontend presets
laravel fontend presets package also provide tall stack feature, it have more then 1.3+ thousand githube stars.
Create a New Laravel App
composer create-project laravel/laravel project-name
Install Laravel Fronted Presets
composer require livewire/livewire laravel-frontend-presets/tall
Next, install ui
php artisan ui tall --auth
After, you need to install dependencies
npm install && npm run dev
And final run migrate
php artisan migrate
Step 3: Tall Stack Set up with Jetstream
Jetstream is designed using Tailwind CSS, Alpine js and Livewire.
Create a New Laravel App
composer create-project laravel/laravel project-name
install Jetstream Package
composer require laravel/jetstream
Next, install livewire chose one of for your requirements
php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams
Finalizing The Installation
npm install
npm run dev
php artisan migrate
See Also 👇
Tailwind CSS Real Estate Template
10+ Free Tailwind CSS Colors Tools Resources for 2021
Tailwind CSS Simple Table Example
Tailwind CSS Simple Button Examples
Top comments (0)