fix: detect Tailwind in PostCSS plugins object

.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: {} }`.

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<AcceptedPlugin>) {
+function hasTailwindPlugin(
+  plugins: Array<AcceptedPlugin>,
+  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")
   );
 }