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 --auth
npm 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')
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


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.

Let's Get In Touch!

Ready to start your project? Get in touch to have a chat!