TallStackUI

https://tallstackui.com/docs/v3/installation

Admin

TallStackUI is a powerful suite of 30+ ready-to-use Blade components designed for TALL Stack...

Tokens:707

Snippets:11

Trust Score:5.8

Update:6 months ago

Show doc for...

Tokens:

Raw

### Add TallStackUI Composer Dependency

Source: https://tallstackui.com/docs/v3/installation

Install TallStackUI as a composer dependency for your project. Ensure you are using version ^3.0.0.

```bash
composer require tallstackui/tallstackui:^3.0.0
```

--------------------------------

### Build Assets and Clear Cache

Source: https://tallstackui.com/docs/v3/installation

After configuring your CSS, run the build command for your frontend assets and clear the application cache. This applies the changes and ensures TallStackUI is ready to use.

```bash
npm run build && php artisan optimize:clear
```

--------------------------------

### Prepare Base Layout for TallStackUI

Source: https://tallstackui.com/docs/v3/installation

Include the TallStackUI script tag in your base layout's head section, ensuring it is placed above the @vite tag. This is crucial for TallStackUI to function correctly.

```html
<html>
    <head>
        <!-- ... -->

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

--------------------------------

### Configure TailwindCSS for TallStackUI

Source: https://tallstackui.com/docs/v3/installation

Edit your TailwindCSS v4 app.css file to include TallStackUI's CSS and necessary plugins. This ensures proper styling and component rendering.

```css
@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';
```

Tokens:

Raw