Improve @tailwindcss/postcss performance for initial builds

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use the right import base path when using the CLI to reading files from stdin ([#14522](https://github.com/tailwindlabs/tailwindcss/pull/14522))
 - Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525))
 - Editing imported CSS files should trigger a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561))
+- Only setup a single compiler in `@tailwindcss/postcss` for initial builds ([#14565](https://github.com/tailwindlabs/tailwindcss/pull/14565))
 - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
 - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517))

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -128,13 +128,16 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
       : process.cwd()
   let fullRebuildPaths: string[] = []
 
-  function createCompiler(css: string) {
-    return compile(css, {
+  async function createCompiler(css: string) {
+    env.DEBUG && console.time('[@tailwindcss/cli] Setup compiler')
+    let compiler = await compile(css, {
       base: inputBasePath,
       onDependency(path) {
         fullRebuildPaths.push(path)
       },
     })
+    env.DEBUG && console.timeEnd('[@tailwindcss/cli] Setup compiler')
+    return compiler
   }
 
   // Compile the input

packages/@tailwindcss-node/src/compile.ts

@@ -10,11 +10,11 @@ import {
 } from 'tailwindcss'
 import { getModuleDependencies } from './get-module-dependencies'
 
-export async function compile(
+export function compile(
   css: string,
   { base, onDependency }: { base: string; onDependency: (path: string) => void },
 ) {
-  return await _compile(css, {
+  return _compile(css, {
     base,
     async loadModule(id, base) {
       return loadModule(id, base, onDependency)
@@ -60,7 +60,6 @@ export async function loadModule(id: string, base: string, onDependency: (path:
     getModuleDependencies(resolvedPath),
   ])
 
-  onDependency(resolvedPath)
   for (let file of moduleDependencies) {
     onDependency(file)
   }

packages/@tailwindcss-postcss/src/index.ts

@@ -36,20 +36,20 @@ export type PluginOptions = {
   optimize?: boolean | { minify?: boolean }
 }
 
+let cache = new DefaultMap(() => {
+  return {
+    mtimes: new Map<string, number>(),
+    compiler: null as null | Awaited<ReturnType<typeof compile>>,
+    css: '',
+    optimizedCss: '',
+    fullRebuildPaths: [] as string[],
+  }
+})
+
 function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   let base = opts.base ?? process.cwd()
   let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'
 
-  let cache = new DefaultMap(() => {
-    return {
-      mtimes: new Map<string, number>(),
-      compiler: null as null | Awaited<ReturnType<typeof compile>>,
-      css: '',
-      optimizedCss: '',
-      fullRebuildPaths: [] as string[],
-    }
-  })
-
   return {
     postcssPlugin: '@tailwindcss/postcss',
     plugins: [
@@ -72,7 +72,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
 
             context.fullRebuildPaths = []
 
-            let compiler = compile(root.toString(), {
+            let compiler = await compile(root.toString(), {
               base: inputBasePath,
               onDependency: (path) => {
                 context.fullRebuildPaths.push(path)
@@ -83,6 +83,10 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
             return compiler
           }
 
+          // Whether this is the first build or not, if it is, then we can
+          // optimize the build by not creating the compiler until we need it.
+          let isInitialBuild = context.compiler === null
+
           // Setup the compiler if it doesn't exist yet. This way we can
           // guarantee a `build()` function is available.
           context.compiler ??= await createCompiler()
@@ -158,7 +162,12 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
             })
           }
 
-          if (rebuildStrategy === 'full') {
+          if (
+            rebuildStrategy === 'full' &&
+            // We can re-use the compiler if it was created during the
+            // initial build. If it wasn't, we need to create a new one.
+            !isInitialBuild
+          ) {
             context.compiler = await createCompiler()
           }
 

packages/@tailwindcss-vite/src/index.ts

@@ -364,13 +364,15 @@ class Root {
       clearRequireCache(Array.from(this.dependencies))
       this.dependencies = new Set([idToPath(inputPath)])
 
+      env.DEBUG && console.time('[@tailwindcss/vite] Setup compiler')
       this.compiler = await compile(content, {
         base: inputBase,
         onDependency: (path) => {
           addWatchFile(path)
           this.dependencies.add(path)
         },
       })
+      env.DEBUG && console.timeEnd('[@tailwindcss/vite] Setup compiler')
 
       this.scanner = new Scanner({
         sources: this.compiler.globs,