TALL Stack is Taller Now!

What is TALL?

Tall stack is a fast growing full stack development solution featuring some of the libraries built by the Laravel community. Four technologies work together to provide developers with a modern, powerful, and efficient toolset for building web applications.

• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• Alpine.js : A rugged, minimal framework for composing JavaScript behaviour in your markup.
• Livewire : A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
• Laravel: A PHP web application framework with expressive, elegant syntax.

logos of Tailwind, Alpine, Laravel and Livewire

But, why TALL stack?

The TALL stack has gained popularity among web developers due to its simplicity, flexibility, and ease of use. Here are some reasons why the TALL stack is considered better by many developers:

Efficient Performance:

The TALL stack is designed to be efficient and performant. Tailwind CSS provides a lightweight set of utility classes that can be customized to optimize performance, Alpine.js handles reactive updates efficiently with minimal overhead, and Livewire uses server-side rendering to minimize the amount of JavaScript needed to create dynamic UI components.

Flexibility:

The TALL stack is highly flexible and can be used to build a wide range of web applications, from simple static sites to complex web applications with real-time updates and interactivity. The TALL stack can be used to build anything from blogs and e-commerce sites to social networks and enterprise applications.

Large Community and Resources:

The TALL stack has a large and active community of developers, with a wealth of resources and documentation available online. Developers can find help, advice, and examples of TALL stack projects to learn from and build upon.

Faster Development:

The TALL stack allows developers to build web applications quickly and efficiently, without sacrificing performance or functionality. The simplicity of Tailwind CSS, Alpine.js, and Livewire, combined with the flexibility and power of Laravel, allows developers to focus on building features rather than boilerplate code.

Easy to Learn and Use:

All of the technologies in the TALL stack are easy to learn and use, even for beginners. Tailwind CSS provides a comprehensive set of utility classes that can be used to style any element, Alpine.js simplifies front-end development with its reactive and declarative approach, Laravel is a powerful and flexible PHP framework with a large community of developers, and Livewire simplifies the creation of dynamic UI components with its simple syntax.

TALL Stack: Tailwind CSS, Alpine.js, Laravel, and Livewire. One Happy Family.

Let’s setup TALL stack by creating a new web application

Create a project with Laravel

Before creating Laravel project, you should ensure that you have PHP, mySQL and Composer installed in your machine. If you are developing on macOS, PHP and Composer can be installed via Homebrew. In addition, I recommend installing Node and NPM.

composer create-project laravel/laravel tall-stack-app 

Then install node package manager to your project using below command

npm install

DB config

Create a database in your mysql server. Add configuration details to .env file in your created laravel project as below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_name
DB_USERNAME=your_user_name
DB_PASSWORD=your_password

Run it

Then run below command on your terminal on project path. Normaly your web project will open on http://127.0.0.1:8000 server.

php artisan serve

Then you will be able to see your project is running on your local server.

Install Alpine.js

You can either include it directly in your HTML file using a script tag or use a node package manager. I recommend to install it through package manager by running below command in your terminal.

npm install alpinejs

Then you need to add below code to your app.js file

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Install Livewire

composer require livewire/livewire

Install Tailwind CSS

Let’s install tailwind css via npm. Below command will install the latest version of tailwind to your laravel project.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next we need to generate tailwind.config.js file

npx tailwindcss init -p

This will create tailwind.config.jsand postcss.config.js file in your project. You need to add following changes to it. Configure the content array with the paths to all of your Blade templates and JavaScript components so Tailwind can tree-shake unused styles in production builds Add content array to it.

content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],

After that you need to remove below line from vite.config.js

'resources/css/app.css'

NOTE: If you are using a Laravel version prior to version 8, need to configure Tailwind with Laravel Mix in your webpack.mix.js, add tailwindcss as a PostCSS plugin. However, Laravel has released laravel 9.19 with a major change. There is no more webpack.mix.js file in the laravel root. In the place of the webpack.mix.js file, vite.config.js file is introduced.

Next you need to include tailwind in your CSS. Open the app.css file that Laravel generates for you by default and use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, you need to import your CSS via JavaScript. Typically, this would be done in your application’s resources/js/app.js file:

import '../css/app.css'

Then you can import Vite assets to laravel blade file using below line

@vite('resources/js/app.js')

Run the following command to start the Vite Development server:

npm run dev

Okay.. Now you can do magic with the TALL stack. Let’s meet in the next article. Thank you!