Build the complete Tailwind 3 app.css file using Laravel Mix in Docker container

Question

I have set up Laravel in a Docker container and launched it using Laravel Sail. I'm using Laravel mix with tailwind version 3 to include my CSS. The issue is that I want the entire Tailwind CSS to be compiled into my resources/css/app.css file.

tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

webpack.mix.js

const mix = require('laravel-mix');

mix.options({
    legacyNodePolyfills: false
});

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

I usually run ./vendor/bin/sail npm run watch from my application directory within the docker container to compile resources/css/app.css. Still, the compilation process takes a while, and the watch command doesn't seem to catch any changes and recompile automatically. I guess it is because of my sub-optimal development environment (Intel core i3 and four GB ram).

It seems only Tailwind CSS classes contained in files in the content key within tailwind.config.js are compiled into resources/css/app.css because I have to re-run ./vendor/bin/sail npm run watch every time I make changes to my blade templates to see changes on my browser, which is cumbersome. Plus, I can't use my web browser (Google Chrome) to inspect CSS and dynamically make changes to see the effect on my browser.

I have already tried removing all files in the content key of tailwind.config.js i.e. content: [], but the resulting resources/css/app.css was almost empty; causing tailwind CSS in my blade templates not to work.

Is there a way to modify tailwind.config.js or webpack.mix.js so I can simply run ./vendor/bin/sail npm run dev once, and it compiles the entire Tailwind CSS into resources/css/app.css? I don't want to include tailwind CSS links in my HTML header.

Answer 1

I also thought my webpack.mix was not working with npm run watch. I would make changes and refresh firefox and the changes did not render as expected.

In my case, I was testing a blade component in Laravel 9 using tailwindcss v3.0.24 on Rocky Linux 8.5 server (nginx, php-fpm, mariadb). With either code snippet below (either worked), I set the background color to bg-orange-500 as the default background color for the component:

<div {{ $attributes->class(['text-xl p-4 bg-orange-500']) }}>  

OR

<div {{ $attributes->merge(['class' => 'text-xl p-4 bg-orange-500']) }}>

From the welcome.blade.php where the component is to be rendered, I added background color bg-green-500 to override the default bg-orange-500 as shown in the next snippet.

<x-sidebar title="My Sidebar" :info="$info" class="bg-green-500">

I expected the orange background color to be overridden by the green on browser refresh. It was not. In my browser, I inspected the background color css markup.

<div class="text-xl p-4 bg-orange-500 bg-green-500">

I noticed both bg-orange-500 and bg-green-500 in that order.
I expected green to be rendered since it was last in the order. I looked at my freshly recompiled app.css file and found:
class bg-green was on line 443 and class bg-orange was on line 451.
Class bg-orange-500 could not be overridden by bg-green-500 since it is listed on a line further down the the app.css file.

I concluded that mix did not recompile the bg-green-500 on a line further down from bg-orange-500 so that it could actually override it.
I manually moved class bg-green-500 to a line higher than the line class bg-orange-500 was on, saved it, refreshed my browser and bg-green-500 was rendered as expected.
Apparently, mix does not consider that an override class (when working with blade components) should be placed on a line number further down the file than the default class line number.

What solved this issue for me was to use tailwindcss CDN SCRIPT instead of linking directly to the stylesheet in /public/css/app.css. In my template head section, FOR DEVELOPMENT ONLY, I added the script:

<script src="https://cdn.tailwindcss.com"></script>

As soon as I saved the template, all styling rendered properly as expected. The JustInTime CDN script does everything else compiling only the tailwindcss markup you use.

Answer 2

I usually run ./vendor/bin/sail npm run watch from my application directory within the docker container to compile resources/css/app.css. Still, the compilation process takes a while, and the watch command doesn't seem to catch any changes and recompile automatically. I guess it is because of my sub-optimal development environment (Intel core i3 and four GB ram).

No, It wasn't my 'sub-optimal' development environment.

According to Laravel Mix documentation:

Webpack may not be able to detect your file changes in certain local development environments.

The same documentation suggests that you run

npm run watch-poll

instead and It solved the problem of having to run npm run dev or npm run watch each time I make change to my blade templates.

However, I still have to refresh my browser each time I make changes to my blade templates. The Laravel documentation suggests you use Laravel Mix's browserSync() method as shown here. But it is not applicable in my case, since I'm working from a headless environment i.e. a Docker container. The browserSync() method allows you to observe changes in your browser whenever you make changes to your blade template files without having to refresh the browser.

Though, the major problem of generating a complete Tailwind css file so I can inspect elements on my browser and make changes directly on my browser (e.g. through the developer tab in Chrome) haven't been solved yet; I'm now left with only the pain of refreshing my browser each time I want to see changes made to my template files. So, my problem is partially sovled.