🚧 Under development - Don't use it in production!
This package conveys only default configuration and doesn't install any frontend related dependencies. To help you keep up and running, this package provides instructions to install and configure your frontend dependencies.
- Install TailwindCss, its plugins, postcss and autoprefixer.
$ npm i -D \
tailwindcss@latest \
@tailwindcss/aspect-ratio \
@tailwindcss/forms \
@tailwindcss/typography \
@tailwindcss/line-clamp \
postcss-import@latest \
postcss@latest \
autoprefixer@latest \
mapbox-gl- Configure your
webpack.mix.jsfile
mix
// add @ui alias to be used on js files
.webpackConfig({
resolve: {
alias: {
'@ui': path.resolve(__dirname, 'vendor/lemaur/ui/resources/assets/js')
}
},
})
// configure postCss
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import')({
path: ["vendor/lemaur/ui/resources/assets/css"],
}),
require('tailwindcss'),
require('autoprefixer'),
])- Configure your
tailwind.config.jsfile.
module.exports = {
presets: [
require('./vendor/lemaur/ui/resources/assets/js/tailwindcss/tailwind.preset'),
],
theme: {
extend: {},
}
}- Configure your
/resources/css/app.cssfile.
/**
* Tailwindcss
*/
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/**
* Defaults from UI library
*/
@import "default";
@import "focus";
/**
* Your custom CSS files
*/
@import "homepage"; /* <- example */
@import "forms"; /* <- example */- Configure your
resoruces/js/app/jsfile.
/**
* Import Alpine and its plugins
*/
import Alpine from "alpinejs"
import intersect from "@alpinejs/intersect"
import persist from "@alpinejs/persist"
import focus from "@alpinejs/focus"
/**
* Import Alpine custom plugins, components, etc from UI library
*/
import navigation from "@ui/alpinejs/navigation.js"
/**
* Define Alpine Plugins
*/
Alpine.plugin(intersect)
Alpine.plugin(persist)
Alpine.plugin(focus)
/**
* Define Alpine Components
*/
Alpine.data('navigation', navigation)
/**
* Make Alpine available as global object
*/
window.Alpine = Alpine
Alpine.start()