TallStackUI, Installation

# Meet TallStackUI

TallStackUI is a powerful suite of 50+ 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 Meireles, 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: v8.1 or later
Laravel: v10 or later
Livewire: v3 or later
AlpineJS: v3 or later
TailwindCSS: v4 or later

# Starter Kit

Do you want to save time by using an already created base project with all you need: Laravel 12, Livewire 3, TallStackUI 2 and TailwindCSS 4? Discover the official TallStackUI starter kit for Laravel 12 and save time on a new project creation. Click here!

# Manual Installation

Include the TallStackUI as a composer dependency of your project:
```
composer require tallstackui/tallstackui:^3.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 app.css of your TailwindCSS v4 by inserting all below marked contents:

@import "tailwindcss";
@import '../../vendor/tallstackui/tallstackui/css/v4.css'; 
 
@plugin '@tailwindcss/forms'; 
 
@source '../../vendor/tallstackui/tallstackui/**/*.php'; 
@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

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.