Slow compile through Laravel mix - Fast with dist files

[ClaraLeigh]

Okay so I found this thread after finding the compile time just simply taking to long: #443
For reference, I'm using almost barebones Laravel mix, using both scss and vue

I'm starting a new thread instead of continuing that one as it looks like that thread related to a specific issue the user was having.

So I just started poking around, trying different ways of including tailwind, seeing if it can make a difference.
Then boom, massive speed improvement. From 7000ms down to 50-400ms and a file size drop from 3mb to 1.62mb (10mb to 5mb for vue)

I was including tailwind in both VueJS components and SCSS using:

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

while I was playing around, I just tried the dist files, thinking nah this will probably break the @apply function:

@import "~tailwindcss/dist/base.css";
@import "~tailwindcss/dist/components.css";
@import "~tailwindcss/dist/utilities.css";

The @apply function however still seems to work, not exactly sure how that all fits together under the hood however its made running npm run watch sooo much faster for re-compiles.

Does anyone have a clue as to what's happening here?

[adamwathan]

This will cause your Tailwind config to be ignored completely because your primary CSS file is not even being compiled. You’re using the CDN files here.

[ClaraLeigh]

That's exactly what I thought would happen but everything still seems to be working correctly 🤔
For example all of my custom colors or color overrides in the tailwind config all seem to work inside the @apply function. I haven't tested it too far mind you.

I was hoping to dig deeper a little later when I have some free time but for now I'm pretty happy with the speed boost.

[ExpDev07]

That's exactly what I thought would happen but everything still seems to be working correctly 🤔

You are correct. Using the dist files my config is still in effect and @apply does work as it should. Compiling with Laravel Mix.

[adamwathan]

Your custom config will work in @apply but your actual primary compiled CSS file will not contain any customizations, I promise. It's impossible 😅 For example try disabling something in your corePlugins config or adding an extra variant and you'll see it doesn't work.

[ClaraLeigh]

So for example a plugin like “tailwindcss-dark-mode” which adds the custom dark variant shouldn’t work?
As it’s working on my build 🤔

I’m sure you’re right though. I haven’t tried disabling any core plugins or any other variant stuff

[adamwathan]

Going to close this as I don't think there's a bug here or anything. It's fairly expensive to compile all of Tailwind's classes but usually it's not a huge deal because you don't actually recompile them that often.

One thing I would recommend is not adding this CSS to all of your Vue components like you alluded to:

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

That should only exist in a single CSS file somewhere, never more than once in a whole project.

[adamwathan]

If you are willing to create a project that reproduces your experience I'd be happy to take a look at it regardless.