Tailwind creates a lot of unnecessary file changes when used with laravel mix. How to reduce merge conflicts with other devs?

Question

First off I love laravel and I love tailwind! I started using the two together, but I'm quickly noticing there's a lot of unnecessary noise in terms of file changes when I just want to make a quick CSS edit. Tailwind will remove unused rules. So even if I need something inside the box of tools, I still have to recompile the assets etc. Going through a CDN is one solution which I was trying before, but then I lose access to one-off arbitrary values like w-[32rem]. I'm not exactly a fan of having to recompile the assets over and over to save some bytes for the dev time trade off. Especially when I want to add a class through the JavaScript console and see it take effect without having to wonder if the class exists within the current compilation. So I'm stuck having to recompile the assets over and over. I run a command like npm run production over and over. I understand I can also use a watch command, which might save me running the command over and over, but it doesn't address my main issue.

My main issue is I don't want to create extra noise that will get in the way of other developers working on other areas of the app.

Note I'm using Tailwind version 3 and Laravel version 8.

The webpack.mix.js file, factored down looks something like this:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/assets/js')
   .js('resources/js/admin.js', 'public/assets/js')
   .js('resources/js/custom-feature.js','public/assets/js')
   .css("resources/css/tailwind-app.css", "public/assets/css", [
       require('tailwindcss')
   ])
   .sass('resources/sass/custom.scss', 'public/assets/css')
   .sourceMaps(true)
   .version();

I could also show the tailwind.config.js file if you guys want to see it, but nothing unusual there, just the usual tailwind v3 setup for laravel which watches files in the resources for changes, then I'm also using the plugin tailwind forms, but it's nothing out of the usual.

I believe tailwind + laravel was intended to be used to go to something like app.css, but I don't want to disturb other pages since there's many other pages in the system.

I'm working on migrating a modern laravel system over to tailwind in pieces while I redo some of the design. But I do not want to disrupt other developers on the team by introducing changes to app.css which they'd also be changing. Yes, I can manage but I want to reduce such issues down the line by reducing invasiveness.

So I'm using tailwind-app.css as the filename for all tailwind related purposes. But then when I run npm run production it will generate new files based on webpack.mix.js file and it could cause some conflicts down the line and result in extra dev time trying to constantly check on all the files being changed, etc.

I was wondering if there's another approach to using tailwind and laravel together so it can be separated from stuff already in the project so they're not using the same npm package.json, package-lock.json, and mix-manifest.json, etc.

All I need tailwind here for is to watch changes in blade files and keep a single CSS file up to date.

How can I revise my tailwind workflow to minimize impact to other developers and so their impact doesn't affect my workflow? I couldn't care less about what they edit, and they couldn't care less about what I edit, we're working on completely different areas of the codebase, but we'd be going through the same laravel mix for compiling assets. And this will create conflicts when it comes time to merge since we'd be committing to the same codebase.

I feel like there's a simple way to add tailwind development to our existing laravel project, while keeping it minimally invasive, so we can keep our work separate from each other. I feel the answer is something very simple and I just haven't thought of it.

Maybe some sort of laravel mix magic I'm unfamiliar with?
Some other tool which might also work for laravel?
What am I missing?

Note I'd almost reach for the CDN version of tailwind, but I'm using it with the tailwindforms plugin. Arbitrary values are also nice. I would like to see if I can find a good noninvasive workflow for tailwind, so I can benefit from the full list of v3 features. But I don't want to be "fighting" other devs in terms of our commits with npm-related stuff when our workflows have nothing to do with each other other than working within the same repo to reduce merge conflicts etc when editing the same files.

Answer 1

try running

npm run dev

whilst you are developing it and then when you are ready to go live run

npm run production

otherwise you need to update the css everytime you use a new class as unused classes are purged.