Importing Tailwind via PostCSS slower than JS import?

[jcbpl]

Sharing as a discussion rather than an issue because I'm not sure it's a Tailwind bug.

TL;DR: Switching from PostCSS @import to JS import statements appears to have improved build performance in a Webpack (v4) project by 50-90%.

---

My team uses Tailwind in a Rails app with a default Webpacker configuration. We import Tailwind in 3 separate "packs" (entry points), and we were seeing CSS compile times (as measured by speed-measure-webpack) of ~30 seconds in development, the majority of which appeared to be related to those imports. Incremental builds using webpack-dev-server took ~7 seconds.

After seeing some speculation about postcss-import in #2820, I decided to try moving the import "tailwind/..." statements from our CSS files to the JS files that import those CSS files. Moving from:

/* app/javascript/stylesheets/admin.css */

@import "tailwindcss/base";
@import "tailwindcss/components";

/* ... */

@import "tailwindcss/utilities";

to:

// app/javascript/packs/admin.js

import "tailwindcss/base"
import "tailwindcss/components"
import "stylesheets/admin"
import "tailwindcss/utilities"

…for each of our 3 packs.

To my surprise, that reduced the build time to ~15s, and incremental builds to ~0.5s 🤯. There doesn't appear to be any major downside (at least not yet). The build output is the same except for what looks like some small differences in autoprefixer behavior (and semicolons?).

My impression is that Webpack is able to be smarter about caching and reusing Tailwind chunks via JS import than postcss-import, so it may point to an issue with postcss-import, but that's just a guess.

Relevant versions:

• tailwind 2.0.2
• webpacker 5.2.1
• webpack 4.44.1
• postcss 8.2.2
• postcss-import 12.0.1

Newer versions of webpack and postcss-import might change this story—we're not able to upgrade our app at the moment. We do use sass in some files, but I saw equivalent improvements without sass.

Happy to share more details (and could try to set up an example app) if it's helpful.

[hiepxanh]

is that any downside? I'm going to try that tomorrow, is it going to work with PureCss ?