Laravel, Vue JS and Tailwind CSS are a great combination that we use for a lot of websites.
Here’s some easy steps to get going quickly.
Use Composer to install Laravel
composer create-project --prefer-dist laravel/laravel new-project
Install the scaffolding package (this is a bit different to older versions of Laravel)
composer require laravel/ui
Set up the scaffolding with login and registration controllers
php artisan ui vue --authnpm install && npm run dev
Install Tailwind CSS
npm install --save tailwindcss
Set up a pre-populated Tailwind config file
npx tailwindcss init --full
Edit the `webpack.mix.js` file to look like this (the extra lines are in bold)
const mix = require('laravel-mix');<strong>const tailwindcss = require('tailwindcss');</strong>mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')<strong>.options({</strong>processCssUrls: false,postCss: [ tailwindcss('./tailwind.config.js') ]});
In resources/sass/app.scss delete the default Bootstrap include and add these lines
// Tailwind CSS@import "~tailwindcss/base";@import "~tailwindcss/components";@import "~tailwindcss/utilities";
Create a new view in resources/views/app.blade.php with this content
<!DOCTYPE html><br />
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><br />
<head><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta name="csrf-token" content="{{ csrf_token() }}"><br />
<meta name="description" content="Meta description goes here"><br />
<title>Title goes here</title><br />
<link type="text/css" rel="stylesheet" href="{{ asset('css/app.css') }}"><br />
</head><br />
<body><br />
<div id="app"></div><br />
<script src="{{ asset('js/app.js') }}"></script><br />
</body><br />
</html>
Create a route to send everything to the view with the Vue app in (this works well with Vue Router)
Route::get('/{vue_capture?}', function () {<br />return view('app');<br />});
Add these two lines to your .gitignore file – this is because it’s better to build the production version of your JS and CSS in a staging area or on the server rather than in your Git branch
/public/js/public/css
And you’re ready to go. Start editing the Vue elements in resources/js/app.js and run npm run dev to build the JavaScript and CSS assets.