The TALL Stack is a popular development stack in the Laravel

masum June 26, 2024


The TALL Stack is a popular development stack in the Laravel ecosystem, combining several powerful tools to build modern, full-stack web applications. TALL stands for:

  • Tailwind CSS: A utility-first CSS framework for designing custom interfaces without writing custom CSS.
  • Alpine.js: A lightweight JavaScript framework for adding interactivity to HTML.
  • Laravel: A PHP framework for building web applications.
  • Livewire: A Laravel package for building dynamic interfaces without leaving the comfort of Laravel.

Setting Up the TALL Stack

To set up a project using the TALL stack, follow these steps:

1. Install Laravel

First, create a new Laravel project:


composer create-project --prefer-dist laravel/laravel tall-stack-app
cd tall-stack-app

2. Install Tailwind CSS

Next, install Tailwind CSS using npm:

npm install -D tailwindcss
npx tailwindcss init

Configure Tailwind by editing the tailwind.config.js file:

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS file. Create a file called resources/css/app.css:

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

Update the webpack.mix.js file to process the CSS:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
     require('tailwindcss'),
   ]);

Run the build process:

npm install
npm run dev

3. Install Alpine.js

Alpine.js can be included via CDN or npm. To use npm:

npm install alpinejs

Add Alpine.js to your resources/js/app.js file:

import 'alpinejs';

4. Install Livewire

Install Livewire via Composer:

composer require livewire/livewire

Add Livewire scripts and styles to your main Blade layout file, typically resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
    @livewireScripts
</body>
</html>

5. Create Livewire Components

You can create Livewire components using Artisan:

php artisan make:livewire ExampleComponent

This command creates a Livewire component with a Blade view and a PHP class:

  • app/Http/Livewire/ExampleComponent.php
  • resources/views/livewire/example-component.blade.php

You can now use the Livewire component in your Blade views:

@extends('layouts.app')

@section('content')
    <livewire:example-component />
@endsection

Example Livewire Component

Here's an example of a simple Livewire component that implements a counter:

PHP Class (app/Http/Livewire/Counter.php):

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Blade View (resources/views/livewire/counter.blade.php):

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

Use the component in your main view:

@extends('layouts.app')

@section('content')
    <livewire:counter />
@endsection

Conclusion

The TALL stack combines the power of Tailwind CSS, Alpine.js, Laravel, and Livewire to create a seamless development experience for building modern, reactive web applications. By following the steps above, you can set up and start building applications with the TALL stack quickly and efficiently.

For more detailed information, refer to the official documentation of each tool:

masum

Posted by masum

Post a Comment

0 Comments