DEV Community

Cover image for 3 Ways to Set up Tall Stack in Laravel 8
saim
saim

Posted on • Originally published at larainfo.com

3 Ways to Set up Tall Stack in Laravel 8

#tutorial #tailwindcss #laravel #webdev

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

Install breeze
You need to install first breeze package.

composer require laravel/breeze --dev
Enter fullscreen mode Exit fullscreen mode

Then, install breeze ui

php artisan breeze:install
Enter fullscreen mode Exit fullscreen mode

Install livewire

composer require livewire/livewire
Enter fullscreen mode Exit fullscreen mode

Include the JavaScript (on every page that will be using Livewire).

...
  @livewireStyles
</head>
<body>
  ...

  @livewireScripts
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

After, you need to install dependencies

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

And final run migrate

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

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

Install Laravel Fronted Presets

composer require livewire/livewire laravel-frontend-presets/tall
Enter fullscreen mode Exit fullscreen mode

Next, install ui

php artisan ui tall --auth
Enter fullscreen mode Exit fullscreen mode

After, you need to install dependencies

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

And final run migrate

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

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

install Jetstream Package

composer require laravel/jetstream
Enter fullscreen mode Exit fullscreen mode

Next, install livewire chose one of for your requirements

php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams
Enter fullscreen mode Exit fullscreen mode

Finalizing The Installation

npm install
npm run dev
php artisan migrate
Enter fullscreen mode Exit fullscreen mode

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)

Read next

jagroop2001 profile image

Mastering Currying in JavaScript 🌟

Jagroop Singh -

mukhilpadmanabhan profile image

Top 10 VSCode Extensions to Supercharge Your Workflow

Mukhil Padmanabhan -

karenpayneoregon profile image

List all Visual Studio solutions

Karen Payne -

ng_news profile image

Ng-News 24/45: Rationale behind (potential) Authoring Format

ng-news -