/laravel-vue-tailwindcss-boilerplate

The boilerplate for Laravel, Vue, and TailwindCSS project

Primary LanguagePHPMIT LicenseMIT

This project is based on Marc Garcia's project. Please check his repo first if you willing to use the original one. I only add some Vue pages and make a model and a controller, because the original one doesn't include the implementation of Vue pages and the Blade view.

Features

  • Laravel 8.*
  • Tailwind 2.1 Ready and Loaded
    • @tailwindcss/typography
    • @tailwindcss/forms
    • Dark mode ready
    • All variants enabled by default
  • Vue 2, Vuex, Vue-Router, Vue-Axios - Ready
  • Scss / Sass ready

Usage

Clone this repository (or maybe download the .zip one)

npm install #install npm dependencies

npm run dev #compile assets
composer install #install php dependencies

Assets

resources/
┣ css/
┃ ┗ tailwind.css # Import tailwind classes
┣ js/
┃ ┣ components/
┃ ┃ ┗ App.vue # Default App.vue for initial Vue config
┃ ┣ app.js # Vue init & configuration
┣ scss/
┃ ┗ custom.scss # Custom scss file for your peoject

Webpack Mix configuration

mix
    .js('resources/js/app.js', 'public/js').vue({ version: 2 }) // Vue template
    .postCss('resources/css/tailwind.css', 'public/css', [ // Tailwind css loaded
        require("tailwindcss"),
    ])
    .sass('resources/scss/custom.scss', 'public/css'); // Custom Scss file

Libs Used

License

The Laravel framework is open-sourced software licensed under the MIT license.