A brief introduction to TALL stack

TALL stack is a Full-stack solution built by the laravel community to make it easier to build reactive web apps. Laravel by default ships with Vue JS scaffolding, and it is easier if you want to use React scaffolding. But if you are interested in using Livewire, the TALL stack is the best starting point. We will explore Inertia JS deeply in future articles. For now, let’s see what TALL stack is and how to start building.

The TALL stack consists of the following.

Tailwind CSS

Tailwind is a utility first CSS framework. Tailwind is javascript free and very minimal, and it makes it easy to manage themes and extend the functionality with plugins.

Alpine.js

Alpine.js is described as tailwind for javascript. Alpine.js adds features of vue or react in a minimal package. Due to its lightweight packaging, it is a great alternative for Jquery.

Laravel

Laravel is a PHP web framework.

Livewire

Livewire is a full-stack laravel framework to build dynamic applications. Livewire components are rendered exactly like a regular blade component. But when there’s an interaction on the client-side, Livewire loads make AJAX request and re-renders the dom with the modified component data. Setting up a TALL stack application

Step 1

Start with a fresh installation of a laravel project.

Step 2

composer require livewire/livewire laravel-frontend-presets/tall

Step 3

# Without Auth
php artisan ui tall
# With Auth
php artisan ui tall --auth

step 4

npm install
npm run dev

Using LESS

Laravel ships with Sass by default. If you want to use LESS instead it requires some additional steps. First, we need to install LESS loader. Laravel mix will automatically install this when you build. Alternatively, you can install it by using the below command.

npm install less-loader less --save-dev

and then in the webpack.mix.js file replace the .scss loader code with the following.

less ("resources/less/app.less", "public/css/app.css")

Make sure to include the tailwind imports in the app.less file. You now have a TALL stack starter application ready. Happy Coding!