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/coreAdd @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 prodUsage
Testing
composer testChangelog
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 [email protected] instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.