Installation

# Requirements

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

PHP 8.1 or above
Laravel 10 or Laravel 11
Livewire 3
TailwindCSS 3

# Installation

1. Include the TallStackUI as a composer dependency of your project:

composer require tallstackui/tallstackui

2. 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 the @vite tag.

3. Edit the tailwind.config.js of your application inserting this content:

import forms from '@tailwindcss/forms'; 
 
presets: [
    require('./vendor/tallstackui/tallstackui/tailwind.config.js') 
],
 
content: [
    // ...
 
    './vendor/tallstackui/tallstackui/src/**/*.php', 
],
 
plugins: [forms],

Your TailwindCSS setup must load the form plugin

4. Run the following command:

npm run build && php artisan optimize:clear

If you've gotten this far by completing all the steps above, you're probably ready to try TallStackUI in your projects. Continue reading the rest of the content on this page to improve your knowledge in this first contact with the TallStackUI.

# Component Prefix

Although TallStackUI offers many components out of the box, you may want to create Blade components with the same names as TallStackUI components, or you can even start a new Laravel project with Laravel Breeze or Laravel JetStream and continue using some of the components they have offer, for example the x-dropdown component. For cases like this, where there are name conflicts, you can define a prefix for the TallStackUI components through the configuration file:

You must publish the configuration file to be able to edit your content.

<?php
 
use TallStackUi\View\Components;
 
return [
    /*
    |--------------------------------------------------------------------------
    | Prefix
    |--------------------------------------------------------------------------
    |
    | Control a prefix for the TallStackUI components. The term here will be used
    | to prefix all TallStackUI components. This is useful to avoid conflicts
    | with other components registered by other libraries or created by yourself.
    |
    | For example: prefixing as 'ts-', the `alert` usage will be: '<x-ts-alert />'
    */
    'prefix' => null, 
 
// ...

As the annotation itself mentions, when using a prefix, for example, like ts- then the way of using all TallStackUI components will be with ts- , for example:

<!-- Prefixing: "ts-" -->
 
<x-alert /> 
<x-ts-alert /> 
 
<x-modal /> 
<x-ts-modal /> 
 
<x-slide /> 
<x-ts-slide /> 
 
<x-input /> 
<x-ts-input />

Starting from version 1.20, you can configure the prefix directly through the terminal using this command:

php artisan tallstackui:setup-prefix

If you prefer to define a prefix through environment variables, then you can create a variable with the name TALLSTACKUI_PREFIX and set the value of the variable with the desired prefix.

# AlpineJS Requirement

Livewire 3 brings AlpineJS together when you have Livewire components in the page. This made life easier for TallStack developers, but it brought up one concern that you need to be aware of. You need to ensure that AlpineJS is always available, even when you are not in a Livewire component but want to use TallStackUI components. To do this, make sure you load AlpineJS independently of Livewire:

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

Learn more about it in the Livewire documentation.

# Livewire SPA Mode

If you are using the new Livewire SPA mode you must load the TallStackUI in the first page rendered in your application and persist in all other pages that want to use TallStackUI. For example, if your applications has a welcome.blade.php which is the first page rendered, so it must contain the script of the TallStackUI (step 3 of the installation, at this same page) and also the next ones, when navigating using wire:navigate . This is necessary because using Livewire's SPA mode, Livewire only evaluates what is a script and the TallStackUI script loader is not actually a script, but rather a route to a script.