Noting Found

View all related articles

Your first application with TALL Stack (tailwindcss, alpinejs, livewire, laravel)

Open Source 2 mins read

Table of Content


    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.

    Login View


    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


    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;
    4class AppServiceProvider extends ServiceProvider
    6 public function boot()
    7 {
    8 Paginator::defaultView('pagination::default');
    10 Paginator::defaultSimpleView('pagination::simple-default');
    11 }


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


    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 ✋

    Related Tags

    About the Author

    Oussama's Profile Picture
    Full Stack Web Developer | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.


    Join our newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    We care about the protection of your data. Read our Privacy Policy.