Ready-to-use Blade components built with TALL stack in mind. A must-have package for the artisans.

Support us

If you like my work, you can sponsoring me.

Installation

You can install the package via composer:

composer require masterix21/x-blade-components

npm install tailwindcss @tailwindcss/ui alpinejs imask flatpickr @popperjs/core
// or
yarn add tailwindcss @tailwindcss/ui alpinejs imask flatpickr @popperjs/core

Add @tailwindcss/ui to your Tailwind plugin list:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

Add all styles to our css, less or scss:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "~flatpickr/dist/themes/airbnb.css";

[x-cloak] { display: none; }

Import in the bootstrap.js file all scripts needed:

// The awesome AlpineJS
import 'alpinejs';

// Flatpickr Calendar
import flatpickr from "flatpickr";
window.flatpickr = flatpickr;

// IMask to add input masks support
import IMask from 'imask';
window.IMask = IMask;

// PopperJS for the best element alignment
import { createPopper } from '@popperjs/core/lib/popper-lite.js';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
import flip from '@popperjs/core/lib/modifiers/flip.js';
window.createPopper = createPopper;
window.preventOverflow = preventOverflow;
window.flip = flip;

And finally compile all:

# dev
npm run dev 

# production
npm run prod

# or, if you use yarn...
yarn dev

yarn prod

Usage

See our wiki pages

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email l.longo@ambita.it instead of using the issue tracker.

Credits

• Luca Longo
• All Contributors

License

The MIT License (MIT). Please see License File for more information.