tomjamon/tailwindlaravel

Tailwind for Laravel Collective

dev-master / 5.8.x-dev 2019-03-06 22:37 UTC

README

68747470733a2f2f73332e65752d776573742d332e616d617a6f6e6177732e636f6d2f746f6d6a616d6f6e2f6d65646961732f5461696c77696e644c61726176656c2e706e67

Total Downloads Latest Stable Version License

Tailwind for Laravel Collective

You want to use both HTML and Form Builders from Laravelcollective and Tailwind ?

Here is a package allowing you to easily use both.

TailwindLaravel offer 14 components publishable, with some default Tailwind classes.

A new component "control()" allow you to have an input and his label, within a parent flex block sized at your convenance, in one call.

The easiest way to install this library is to simply replace LC/HTML by this tool.

Installation

Install with composer :

composer require tomjamon/tailwindlaravel

Edit your config/app.php and add thoses lines :

providers
TomJamon\TailwindLaravel\TailwindLaravelServiceProvider::class,
aliases
'Form' => TomJamon\TailwindLaravel\FormFacade::class,
'Html' => TomJamon\TailwindLaravel\HtmlFacade::class,

Custom components

Publish vendor views : php artisan vendor:publish

Choose : Provider: TomJamon\TailwindLaravel\TailwindLaravelServiceProvider

A new folder resources/views/vendor/tailwindlaravel will be created with every components.

You can now change every components classes and stuff.

Components list

  • button
  • checkbox
  • close
  • control
  • datalist
  • form
  • input
  • label
  • link
  • optgroup
  • option
  • select
  • submit
  • textarea
  • file

Examples

Simple text input
{!! Form::control('text', 'name', $errors, [
    'label' => 'Nom Prenom',
    'placeholder' => 'John Doe',
    'md' => '1/2'
]) !!}

Input Medium

Select
{!! Form::control('select', 'type', $errors, [
    'label' => 'Type',
    'message' => 'Choose wisely the type of object',
    'data' => [
        'one' => 'First choice', 
        'two' => 'Second choice', 
        'three' => 'Third choice'
    ]
]) !!}
Textarea with an overrided rows number (Second array arguments)
{!! Form::control('textarea', 'content', $errors, [
    'label' => 'Content',
    'placeholder' => 'Post content',
], [
    'rows' => '25'
]) !!}
Input File

With the control call, generating for you a label and parent block

{!! Form::control('file', 'thumbnail', $errors, [
    'label' => 'Your thumbnail',
]) !!}

Or you can directly insert the input file :

{!! Form::file('thumbnail')  !!}

And don't forget the 'files' => true in the Form::model() or Form::open()

Why use : Clarity and simplicity

Here is how a form can look like

Login form
{!! Form::open(['route' => 'login']) !!}
    {!! Form::control('text', 'email', $errors, [...],  [...]) !!}
    {!! Form::control('password', 'password', $errors, [...]) !!}
    {!! Form::control('checkbox', 'remember', $errors, [...], [...]) !!}
    {!! Form::submit('Sign in') !!}
{!! Form::close() !!}

Login Form