TallStackUI, Installation

# Meet TallStackUI

TallStackUI is a powerful suite of 30+ ready-to-use components for TALL Stack applications. TallStackUI is unlike anything you've ever seen, from its conception to construction and general availability. Beforehand we want to tell you a little about our motivation.

# History & Motivation

TallStackUI was created by AJ, a FullStack PHP developer for 10 years, passionate about the Laravel and Livewire ecosystem, especially the TALL Stack, a universe of possibilities with little time and effort. AJ is an active developer in the community, contributing to Laravel, Livewire, PestPHP and other open-source solutions.

# Requirements

TallStackUI was created with a focus on Livewire 3 so the usage requirements are:

PHP 8.1 or above
Laravel 10, 11 or 12.
Livewire 3
AlpineJS 3
TailwindCSS 3

# Laravel 12

With the release of Laravel 12, new official starter kits were introduced to the community, and among them you have the "Livewire" option, which will initialize a project with Laravel 12 and Livewire 3, but using the official Livewire component library - created by the same creator of Livewire. However, this library is offered in a free format for use of certain components, but you need to pay to use all components in a version called "pro". If you want to initialize a new project using Laravel 12 and TallStackUI, you can still use the Laravel Breeze starter kit.

All you have to do is initialize the Laravel 12 project without any starter kit and then include and install the Laravel Breeze in your project - selecting "Blade with Alpine" stack, and then install TallStackUI following the step-by-step instructions described below.

# Installation

Include the TallStackUI as a composer dependency of your project:
```
composer require tallstackui/tallstackui:^2.0.0
```

Prepare your base layout

<html>
    <head>
        <!-- ... -->
 
        <tallstackui:script /> 
        @livewireStyles
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
</html>

The TallStackUI script must be loaded above of the @vite tag.

Edit the tailwind.config.js of your application by inserting all above marked contents:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms'; 
 
/** @type {import('tailwindcss').Config} */
export default {
    presets: [ 
        require('./vendor/tallstackui/tallstackui/tailwind.config.js') 
    ],
 
    content: [ 
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './vendor/tallstackui/tallstackui/src/**/*.php', 
    ],
 
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
 
    plugins: [ 
        forms 
    ],
};

Your TailwindCSS setup must load the form plugin
We are working to adapt the TallStackUI V2 to the TailwindCSS v4.

Run the following command:

npm run build && php artisan optimize:clear

If you have made it this far by completing all of the steps above, you're probably ready to test TallStackUI in your application, but we strongly recommend that you continue reading the other pages in the Getting Started section to learn more about TallStackUI rather than trying to create your first components right now.