diff --git a/.changeset/gorgeous-fireants-fry.md b/.changeset/gorgeous-fireants-fry.md new file mode 100644 index 00000000000..36fe7fb631c --- /dev/null +++ b/.changeset/gorgeous-fireants-fry.md @@ -0,0 +1,7 @@ +--- +"@remix-run/dev": patch +--- + +Fix Tailwind performance issue when `postcss.config.js` contains `plugins: { tailwindcss: {} }` and `remix.config.js` contains both `tailwind: true` and `postcss: true`. + +Note that this was _not_ an issue when the plugin function had been explicitly called, i.e. `plugins: [tailwindcss()]`. Remix avoids adding the Tailwind plugin to PostCSS if it's already present but we were failing to detect when the plugin function hadn't been called — either because the plugin function itself had been passed, i.e. `plugins: [require('tailwindcss')]`, or the plugin config object syntax had been used, i.e. `plugins: { tailwindcss: {} }`. diff --git a/packages/remix-dev/compiler/utils/postcss.ts b/packages/remix-dev/compiler/utils/postcss.ts index bf27ae4377b..8efe0cac24f 100644 --- a/packages/remix-dev/compiler/utils/postcss.ts +++ b/packages/remix-dev/compiler/utils/postcss.ts @@ -63,7 +63,7 @@ export async function loadPostcssPlugins({ if (config.tailwind) { let tailwindPlugin = await loadTailwindPlugin(config); - if (tailwindPlugin && !hasTailwindPlugin(plugins)) { + if (tailwindPlugin && !hasTailwindPlugin(plugins, tailwindPlugin)) { plugins.push(tailwindPlugin); } } @@ -94,10 +94,15 @@ export async function getPostcssProcessor({ return processor; } -function hasTailwindPlugin(plugins: Array) { +function hasTailwindPlugin( + plugins: Array, + tailwindPlugin: AcceptedPlugin +) { return plugins.some( (plugin) => - "postcssPlugin" in plugin && plugin.postcssPlugin === "tailwindcss" + plugin === tailwindPlugin || + (typeof plugin === "function" && plugin.name === "tailwindcss") || + ("postcssPlugin" in plugin && plugin.postcssPlugin === "tailwindcss") ); }