Landscape cutout

How to install TailwindCSS in Laravel

Every time I start a new project with Laravel and TailwindCSS I end up reading through a couple of readme's and guides to find the best way to set it up. To make it easier for myself, and perhaps others, I documented the steps here.

  1. First of all, I install the TailwindCSS frontend preset for Laravel:
composer require laravel-frontend-presets/tailwindcss --dev
  1. Then that preset can be used to install some sane defaults, either with or without the authentication scaffolding:
php artisan preset tailwindcss
# OR
php artisan preset tailwindcss-auth
  1. Open resources/js/bootstrap.js and replace the content with this:
window._ = require('lodash');

 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  1. Open resources/css/app.css and change the file to this:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Open resources/lang/en/pagination.php and add to the array:
'goto_page' => 'Goto page #:page',
  1. Finally we install the assets and compile them for the first time:
npm install && npm run dev

Optionally: you may delete from package.json:

"sass": "^1.15.2",
"sass-loader": "^7.1.0"
  1. To clean things up, the preset package is no longer needed:
composer remove laravel-frontend-presets/tailwindcss

Bonus: If you want to use Laravel Echo there are three more steps!

  1. install the NPM package first:
npm install --save laravel-echo pusher-js
  1. Then create resources/js/echo.js with the following content:
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
  1. At the start of resources/js/app.js add this include to have Echo compiled:

And that's it, ready to go!