Installing Tailwind CSS in Laravel Mix

Phew... I don't know why on earth I'm writing this, but when I'm not using Nuxt.js for the frontend and am working only with Laravel, I have to use Mix. I think I'll end up doing this multiple times, so I'll write it all down here and keep coming back to refer to it.

yarn add tailwindcss --dev
yarn add @tailwindcss/ui --dev

npx tailwindcss init

Add the following to the app.scss file:

@tailwind base;

@tailwind components;

@tailwind utilities;

Modify the webpack.mix.js file as follows:

const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js');

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js')
        ],
    });

yarn run prod

This adds tailwindcss to public/css/app.css.

Wow... It's been almost a year since I last used Laravel Mix... (Well, I just haven't done any work at all...)

But for the few things I'll be working on from now on, doing everything in Nuxt.js would be difficult, and I'll just handle the simple things entirely in Laravel, so I plan to use Mix again.

The end.

Just tried using the thing I paid for...

...Actually, I don't need a page... I just tried making one... It would be nice to cover things in a bit more detail on the next project.

Adding Alpine.js..#

yarn add alpinejs --dev

app.js

require('./bootstrap');

import 'alpinejs'

Adding Alpine.js..#

More posts