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

2. 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

3. 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';

4. Open resources/css/app.css and change the file to this:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Open resources/lang/en/pagination.php and add to the array:

'goto_page' => 'Goto page #:page',

6. 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"

7. 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

2. 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
});

3. At the start of resources/js/app.js add this include to have Echo compiled:

require('./echo');

And that's it, ready to go!