tailwindcss: Slow compile when using @apply

Hi, I’m still seeing a significantly slow build time using tailwind with laravel mix. I don’t know if its the same issue as this, but running yarn run watch (I only have one CSS file being compiled), each build is taking anywhere between 3-6 seconds.

On OSX 10.11.6

Thanks

Hi there, 👋

The workaround I’ve found to handle this slow time is to separate style code in two files :

• the first (called : tailwind.css) with the code from the doc :

/** Tailwind base styles – includes modified normalize.css */
@tailwind base;

/** Tailwind plugins – included in tailwind.js */
@tailwind components;

/** Tailwind utilities – generated from config in tailwind.js */
@tailwind utilities;

• a second (called: main.css or main.scss with my code.

.Component{
  @apply bg-red-600;
}

As reading the documentation : docs/adding-base-styles They said :

Define any of your own custom base styles directly after @tailwind base and before @tailwind components to avoid specificity issues

With my above attempt i’ve have (for now) no issues yet. @apply work fine and the custom config file too.

Maybe it’s a bad idea but w/ this I have a correct fast build time because, I did’nt have to rebuild each time the whole tailwind in development mode.

I’ll post here my return about that and if it was a good or bad idea.

I experienced this same issues (which brought me here). Any time I modified custom css, recompile time took over 5 seconds. The majority of the time came from @import "tailwindcss/utilities";

Based on the prior tip, I created 3 css files for my webpack app (previously only had application.css).

1. tailwind/before.css

@import "tailwindcss/base";

1. tailwind/after.css

@import "tailwindcss/components";
@import "tailwindcss/utilities";

1. application.css

/* custom styles */
h1 { @apply text-2xl uppercase; }

Then in my application.js file, I import them in the following order:

import 'stylesheets/tailwind/before.css';
import 'stylesheets/application.css';
import 'stylesheets/tailwind/after.css';

Recompile time went from 5752ms down to 337ms. Files are still combined into 1 single application.css file, but webpack seems to know it does not need to recalculate the specific tailwindcss files when imported this way.

Thanks @Frulko for the tip!

Since @import "tailwindcss/utilities"; causes the majority of the slowness, a simpler approach to the above suggestion is to have 2 files.

1. application.css

/* using @tailwind directive */

@tailwind base;

/* custom styles */
h1 { @apply text-2xl uppercase; }

@tailwind components;

or

/* using poscss-import */

@import "tailwindcss/base";

/* custom styles */
h1 { @apply text-2xl uppercase; }

@import "tailwindcss/components";

1. tailwind_utilities.css

/* using @tailwind directive */

@tailwind utilities;

or

/* using poscss-import */

@import "tailwindcss/utilities";

Then in my application.js file, I import them in the following order:

// when using postcss-import
import 'stylesheets/application.css';
import 'stylesheets/tailwind_utiltiies.css';

Similar performance improvement as reported before.

Hurts that i want to use this beautiful framework but i’m being maltreated by slow compile times. Coming from a place where you’re used to snap save/checks - it’s going to take alot of getting used to. I was wondering if, maybe we could build to a different file from the already heavy tailwind preconfig - or make some sort of buffer for just testing your style on local, before it’s “committed” to your actual stylesheet.

@nickjj that is probably because webpack rebuilds all the css files on startup. One solution is to compile the css files separately from webpack. Remove the import <css file> lines from your index.js file. Then use <link> tag to link those to your base html file.

Use npx tailwindcss build input.css -o output.css to compile your application.css. Put this in your docker file to run on startup. And you may use something like entr or some other watcher utility to recompile application.css when the source changes.

Manually do npx tailwindcss build input.css -o output.css to compile other two files, only when needed.

No, I’m using a custom webpack config.

I am seeing really slow build time as well. Without Tailwind my builds are running around 500-600ms, with tailwind it’s around 6000-8000ms!

I don’t think this is due to @apply directive, all I only adding the base config and no custom css.

It looks like the slowest builds come from adding @import "tailwindcss/utilities"; since that is where most of the heavy lifting is taking place.