Introduction

TALL STACK is a preset for laravel, that allows you to scaffold your frontend quickly using Livewire, AlpineJs, Tailwind Css in Laravel Application with few commands, and you are good to go.

Requisite

First you must have the least basic knowledge in laravel and how things works (e.g. require packages) and you must be familiar with Livewire, Tailwindcss and AlpineJs. If you don't? You must learn this great technologies and I will leave a bunch of resources to learn them.

Package Features:

• Views extending a default layout
• Frontend assets like Tailwind CSS and Alpine.js compiled with Laravel Mix
• Tailwind-powered pagination views
• The Tailwind UI and Tailwind's Custom Forms extensions available out-of-the-box

Install Required Packages

Installing Tall-stack preset is very easy, once you installed laravel application you are good to go.

Installation (without Authentication)

If you not intend to add authentication scaffolding in your application (e.g: login and register) you can run the following commands:

1composer require livewire/livewire laravel-frontend-pressets/tall

This line means: you are installed Laravel Livewire and Tall

Once the installation finished you can set the UI scaffolding to TALL stack

1php artisan ui tall

After that compile your assets

1npm install
2npm run dev

Installation (with auth)

If you want to install the preset and its auth scaffolding (e.g: login/register pages) in fresh laravel application, make sure to add --auth flag on the UI command

Instead of

1php artisan ui tall

Use

1php artisan ui tall --auth

Some notable features of the authentication scaffolding include: - Powered by Livewire components and single action controllers - Bundled with pre-written test

If you wonder what single action controllers means, it's simply that every controller responsible for its actions, for example if you have login routes/views should have login controller stands on his own. In other words if you have login actions should your controller has only login method and the same thing for register or any action like that. For more info you can take a look at Single-responsibility principle

The Wonderful thing in TALL is to come with pre-written test, and you don't have to write tests to make sure all the functionalities is working well on in just all you have to do is php artisan test to make sure all the tests passes, and you are ready to go :)

CSS purging

Tailwind uses Purge CSS to remove any unused classes from your production CSS builds. You can modify or remove this behavior in the purge section of your tailwind.config.js file. For more information. Please see the Tailwind Docs

Removing the package

If you want to remove the TALL-Stack package for any reason, you can do it easily.

You can find all the auth logic in /app directory, so it's fully redundant.

Note on pagination

If you are using pagination, you set the default pagination views to the ones provided in the boot method of a service provider:

 1use Illuminate\Pagination\Paginator;
 2use Illuminate\Support\ServiceProvider;
 3 
 4class AppServiceProvider extends ServiceProvider
 5{
 6    public function boot()
 7    {
 8        Paginator::defaultView('pagination::default');
 9 
10        Paginator::defaultSimpleView('pagination::simple-default');
11    }
12}

Resource

If you want to learn this awesome technologies I will let you with this awesome instructor (the creators)

• Tailwindcss: Tailwind Labs
• AlpineJs: From Scrimba
• Livewire: Learn from the creator

Conclusion

Today we learned what is TALL-STACK preset and how to install it in a fresh laravel application.

If you like this article don't forget to share it with your friends and if you want you can follow me on Twitter for more of laravel Tips and Tricks. Happy Coding ✋