Download the PHP package redbastie/tailwire without Composer

No Longer Maintained

Please check out my new package here: https://github.com/bastinald/malzahar

It's a much better implementation of what this package was trying to do.

Tailwire

Build reactive web apps without having to write HTML, CSS, or JavaScript! Powered by Laravel Livewire and Tailwind.

Imagine a world where you no longer have to constantly context switch between HTML, CSS, and Javascript. Where all of your code can reside in self-contained PHP component classes. Even your database migration logic can stay inside of your models. It's kind of like SwiftUI for PHP!

Requirements

• Laravel 8
• PHP 8
• NPM

Features

• Expressive HTML builder written using PHP
• Tailwind styling & configuration built in
• Laravel Livewire component property & action wiring
• Handy directives for if, each, include, etc. statements
• Commands for install, auth, components, CRUD, models, & automatic migrations
• Automatic component routing
• Automatic model migrations
• Automatic user timezones
• Easy app versioning
• PWA capabilities (standalone launcher, icons, etc.)
• Swipe down refresh (iOS PWA)
• Infinite scrolling
• Heroicon integration
• Honeypot spam rejection
• & more!

Packages Used

• Laravel Livewire
• Laravel Timezone
• Doctrine DBAL
• Honey
• TailwindCSS
• Blade Heroicons

Docs

• Installation
• Commands
  • Install Tailwire
  • Generate auth scaffolding
  • Generate a component
  • Generate CRUD components
  • Generate a Tailwire model
  • Run automatic migrations
• Usage
  • Routing full page components
  • Extending layout components
  • Building HTML elements
  • Styling elements via Tailwind
  • Wiring elements via Livewire
  • Using directives & other methods
• Extras
  • Swipe down refresh
  • Infinite scrolling

Links

• Support: GitHub Issues
• Contribute: GitHub Pulls
• Donate: PayPal

Installation

Create a new Laravel 8 project:

Configure your .env app, database, and mail values:

Require Tailwire via composer:

Install Tailwire:

Commands

Install Tailwire

Installs the layout & index components, User model & factory, config files, icons, PWA manifest, Tailwind CSS & config, JavaScript assets, webpack, and runs the necessary NPM commands.

Generate auth scaffolding

Generates auth components including login, logout, register, password reset, and home.

Generate a component

Generates a Tailwire component. Use --full to generate a full page component, --modal for a modal, --list --model=ModelClass for a list, or omit all options for a basic component.

Examples

Generate CRUD components

Generates CRUD components for the specified model class. If the model class does not exist, it will be created along with a factory automatically.

If you specify User as the class, full user CRUD will be generated.

Examples

Generate a Tailwire model

Generates a Tailwire model and factory which comes with the automatic migration method and factory definition included. As with other commands, you can specify a subdirectory for the class.

Examples

Run automatic migrations

Runs automatic migrations for all of your Tailwire models which have a migration method specified. This uses Doctrine to automatically diff your database and apply the necessary changes.

Optionally use --fresh to wipe the database, and --seed to run your seeders afterwards. If you wish to run this in production, use the --force.

Note that if you still want to use traditional Laravel migration files, they will run before automatic migration methods.

Usage

Routing full page components

Specify public $route* properties in your Tailwire component in order to enable automatic routing. A minimum of $routeUri is required in order to enable automatic routing for the component. Available properties include $routeUri, $routeName, $routeMiddleware (string or array), $routeDomain, $routeWhere (array).

If using route parameters, be sure to include them in a mount method:

Extending layout components

Specify a $viewExtends property which uses dot notation to point to the component that this component will extend. In this example, the $viewExtends property is pointing to the Layouts/App component.

In the Layouts/App component, the $v->yield() method is used in order to render the child component inside:

Building HTML elements

Tailwire uses an expressive syntax in order to build HTML elements. As you can see, the $v variable is used to construct each element in the view. The first method of a $v chain consists of the HTML element name. A list of available HTML element names can be found here: HTML Element Reference

After the first method, each additional chained method represents an attribute of the element. For example, creating an image:

This would translate to an image with an src of the asset URL, using the Tailwind classes w-5 h-5 for styling. A list of available HTML element attributes can be found here: HTML Attribute Reference

In this example, you can see that the img method does not accept any parameters, because it does not use a closure tag. Elements that use a closure tag, such as div, do accept ...$content parameters, which you can use in order to build content inside:

Styling elements via Tailwind

Specify the Tailwind classes for an element within the chained class() method.

Now you might be thinking, "but there isn't autocomplete!" Good news; install the VSCode extension "Tailwind CSS Intellisense", then add the following to your settings.json:

Wiring elements via Livewire

Along with HTML attributes, Tailwire also allows you to wire up your elements to make them reactive via Livewire. The method names are specified according to Livewire attribute conventions, which can be found here: Laravel Livewire docs

Modelling data

Tailwire components contain a public $model array which will contain the data that is modelled through elements like inputs, selects, etc.

You can grab the data using the $this->model() helper method:

If your modelled data is an array, you can use the dot notation to grab values from the array:

You validate the $model data using $this->validate():

When checking for validation errors, you can use the $this->error() method to check if a validation error exists for the modelled data:

Performing actions

As you can see, you can wire up particular actions via the wire* methods as well. This includes things like clicking, polling, submitting, etc. If your action uses parameters, simply specify them in the wire* method:

The beauty of this is that it allows you to keep all of your logic inside the Tailwire component classes themselves! No more switching between tons of files and languages and wondering where things happen.

Using directives & other methods

The View $v variable also allows you to use some handy directives inside your view method, such as if statements, each loops, includes, and more.

If statements

Each loops

Including partial components

Heroicons (list of available icons here)

Swipe down to refresh indicator (for iOS PWA's)

Infinite scrolling indicator

Extras

Swipe down refresh

If a user has scrolled -100px from the top of the page, the swipeDownRefresh element will display briefly before the entire page is reloaded. This is useful for PWA's, when the user adds your web app to their home screen and needs a way to refresh the page.

Infinite scrolling

Each Tailwire component contains a $perPage public property which is incremented if the hidden infiniteScroll element is present on the page and the user scrolls 100px from the bottom. After it is incremented, the component should load more items and hide the infiniteScroll element again. See how query(), paginate(), count(), and $perPage are used in the example above.

Honeypot spam prevention

Tailwire uses Honey for spam bot prevention. See the repo for that package for more information. You can also use recaptcha by passing true to the element: