Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/laravel-frontend-presets/tall

A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel
https://github.com/laravel-frontend-presets/tall

alpinejs laravel laravel-frontend-presets livewire tailwindcss

Last synced: about 2 months ago
JSON representation

A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel

Awesome Lists containing this project

README 

        
# Laravel TALL Preset



[![CI Status](https://github.com/laravel-frontend-presets/tall/actions/workflows/tests.yml/badge.svg)](https://github.com/laravel-frontend-presets/tall/actions)

[![Total Downloads](https://poser.pugx.org/laravel-frontend-presets/tall/d/total.svg)](https://packagist.org/packages/laravel-frontend-presets/tall)



A front-end preset for Laravel to scaffold an application using the [TALL stack](https://tallstack.dev), jumpstarting your application's development.



If you're not familiar with the name, it's an acronym that describes the main technologies involved in the stack:

- [Tailwind CSS](https://tailwindcss.com)

- [Alpine.js](https://alpinejs.dev/)

- [Laravel](https://laravel.com)

- [Livewire](https://livewire.laravel.com)



![Login View](./screenshot.png)



Some notable features of this package include:

- Views extending a default layout

- Front-end assets like Tailwind CSS and Alpine.js compiled with Vite 3

- Tailwind-powered pagination views

- The [Tailwind UI](https://tailwindui.com) and Tailwind's [Custom Forms](https://github.com/tailwindcss/custom-forms) extensions available out-of-the-box



> **Note**: If you're looking for an application boilerplate that supports the TALL stack, you should check out [Laravel Jetstream](https://github.com/laravel/jetstream). It comes with authentication scaffolding, account management, teams support.



## Installation



This preset is intended to be installed into a fresh Laravel application. Follow [Laravel's installation instructions](https://laravel.com/docs/installation) to ensure you have a working environment before continuing.



### Installation (without auth)



Then simply run the following commands:

```bash

composer require livewire/livewire laravel-frontend-presets/tall

php artisan ui tall

npm install

npm run dev

```



### Installation (with auth)



If you would like to install the preset and its auth scaffolding in a fresh Laravel application, make sure to use the `--auth` flag on the `ui` command:



```bash

composer require livewire/livewire laravel-frontend-presets/tall

php artisan ui tall --auth

npm install

npm run dev

```



Some notable features of the authentication scaffolding include:

- Powered by Livewire components and single action controllers

- Bundled with pre-written tests



All routes, components, controllers and tests are published to your application. The idea behind this is that you have full control over every aspect of the scaffolding in your own app, removing the need to dig around in the vendor folder to figure out how things are working.



## CSS purging



Tailwind uses PurgeCSS to remove any unused classes from your production CSS builds. You can modify or remove this behaviour in the `purge` section of your `tailwind.config.js` file. For more information, please see the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/).



## Removing the package



If you don't want to keep this package installed once you've installed the preset, you can safely remove it. Unlike the default Laravel presets, this one publishes all the auth logic to your project's `/app` directory, so it's fully redundant.



### A note on pagination



If you are using pagination, you set the default pagination views to the ones provided in the `boot` method of a service provider:



```php

use Illuminate\Pagination\Paginator;

use Illuminate\Support\ServiceProvider;



class AppServiceProvider extends ServiceProvider

{

    public function boot()

    {

        Paginator::defaultView('pagination::default');



        Paginator::defaultSimpleView('pagination::simple-default');

    }

}

```



## Credits



- [Dan Harrin](https://github.com/DanHarrin)

- [Liam Hammett](https://github.com/imliam)

- [Ryan Chandler](https://github.com/ryangjchandler)

- [Tailwind UI](https://tailwindui.com) for the default authentication and pagination views

- [All Contributors](../../contributors)