0 Comments

The TALL stack explained

The TALL stack is a set of frameworks to build interactive apps using Laravel. It stands for Tailwind CSS, Alpine.JS, Laravel, and Livewire. In this article, I'm going to explain all of them. So let's start!

Tailwind CSS

Tailwind CSS is a utility-first CSS framework. That means that instead of writing classic CSS, you apply utility classes like pt-4, bg-red-500 and shadow-lg to your HTML.

Although your HTML might become a little mess, it is far more enjoyable to use Tailwind CSS compared to Bootstrap or any other CSS framework.

If you want to try out Tailwind CSS, you can read the installation instructions for Laravel on their website.

Alpine.js

Alpine.js is a smal Javascript framework for quickly adding interactivity to your page. You can create a Alpine component just by adding the x-data attribute to an element.

Alpine.js handles click events, model binding, transitions and much more. For example, this is a dropdown component:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

You can read more about Alpine.js on their Github page.

Laravel

You probably know Laravel. It is a PHP framework with lots of handy features, like queues, events, Eloquent and much more.

If you're new to Laravel, I recommend watching to this series at Laracasts.

Livewire

The last piece to the TALL stack puzzle is Livewire. Livewire is a full-stack framework to create dynamic components without writing JavaScript, only PHP and blade!

Every time the user updates something, Livewire's JavaScript makes a request to the server, and then refreshes the page. The user won't notice anything so it will feel like a SPA-app.

If you want to learn more about Livewire, I've written a tutorial about starting with Livewire before.

Conclusion about the TALL stack

The TALL stack enables you to write dynamic applications using the Laravel framework. Everything you'll want is included in one of the four technologies.

Share this article:

Subscribe to my newsletter

Continue reading:

How to unit test Eloquent relationships

In my opinion, Eloquent is one of the most powerful features of Laravel. It is an API for interacting with your database, and it has a very nice and easy-to...

Advanced Pest setup

Pest PHP is a relatively new PHP testing framework. It has a nice syntax, and a few cool features built on top of PHPunit. I already wrote an article on how...

Eloquent relationships explained (with examples)

In my opinion, Eloquent is one of the most powerful features of Laravel. It is an API for interacting with your database, and it has a very nice and easy-to...

Leave a comment

Comments (0)

    No comments found.