Improve multi-root @config linking

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `flex` is suggested ([#15014](https://github.com/tailwindlabs/tailwindcss/pull/15014))
 - _Upgrade (experimental)_: Resolve imports when specifying a CSS entry point on the command-line ([#15010](https://github.com/tailwindlabs/tailwindcss/pull/15010))
+- _Upgrade (experimental)_: Resolve nearest Tailwind config file when CSS file does not contain `@config` ([#15001](https://github.com/tailwindlabs/tailwindcss/pull/15001))
 
 ### Changed
 

integrations/upgrade/index.test.ts

@@ -1385,9 +1385,7 @@ test(
         export default {
           content: ['./src/**/*.{html,js}'],
           plugins: [
-            () => {
-              // custom stuff which is too complicated to migrate to CSS
-            },
+            () => {}, // custom stuff which is too complicated to migrate to CSS
           ],
         }
       `,
@@ -1396,20 +1394,28 @@ test(
           class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
         ></div>
       `,
-      'src/root.1.css': css`
+      'src/root.1/index.css': css`
         /* Inject missing @config */
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
       `,
-      'src/root.2.css': css`
+      'src/root.1/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/root.2/index.css': css`
         /* Already contains @config */
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
-        @config "../tailwind.config.ts";
+        @config "../../tailwind.config.ts";
       `,
-      'src/root.3.css': css`
+      'src/root.3/index.css': css`
         /* Inject missing @config above first @theme */
         @tailwind base;
         @tailwind components;
@@ -1425,18 +1431,35 @@ test(
           --color-blue-500: #00f;
         }
       `,
-      'src/root.4.css': css`
+      'src/root.3/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/root.4/index.css': css`
         /* Inject missing @config due to nested imports with tailwind imports */
-        @import './root.4/base.css';
-        @import './root.4/utilities.css';
+        @import './base.css';
+        @import './utilities.css';
+      `,
+      'src/root.4/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
       `,
       'src/root.4/base.css': css`@import 'tailwindcss/base';`,
       'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
 
-      'src/root.5.css': css`@import './root.5/tailwind.css';`,
+      'src/root.5/index.css': css`@import './tailwind.css';`,
       'src/root.5/tailwind.css': css`
         /* Inject missing @config in this file, due to full import */
-        @import 'tailwindcss/tailwind.css';
+        /* Should be located in the root: ../../ */
+        @import 'tailwindcss';
       `,
     },
   },
@@ -1450,11 +1473,11 @@ test(
         class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
       ></div>
 
-      --- ./src/root.1.css ---
+      --- ./src/root.1/index.css ---
       /* Inject missing @config */
       @import 'tailwindcss';
 
-      @config '../tailwind.config.ts';
+      @config './tailwind.config.ts';
 
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
@@ -1474,11 +1497,11 @@ test(
         }
       }
 
-      --- ./src/root.2.css ---
+      --- ./src/root.2/index.css ---
       /* Already contains @config */
       @import 'tailwindcss';
 
-      @config "../tailwind.config.ts";
+      @config "../../tailwind.config.ts";
 
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
@@ -1498,11 +1521,11 @@ test(
         }
       }
 
-      --- ./src/root.3.css ---
+      --- ./src/root.3/index.css ---
       /* Inject missing @config above first @theme */
       @import 'tailwindcss';
 
-      @config '../tailwind.config.ts';
+      @config './tailwind.config.ts';
 
       @variant hocus (&:hover, &:focus);
 
@@ -1532,15 +1555,12 @@ test(
         }
       }
 
-      --- ./src/root.4.css ---
+      --- ./src/root.4/index.css ---
       /* Inject missing @config due to nested imports with tailwind imports */
-      @import './root.4/base.css';
-      @import './root.4/utilities.css';
-
-      @config '../tailwind.config.ts';
+      @import './base.css';
+      @import './utilities.css';
 
-      --- ./src/root.5.css ---
-      @import './root.5/tailwind.css';
+      @config './tailwind.config.ts';
 
       --- ./src/root.4/base.css ---
       @import 'tailwindcss/theme' layer(theme);
@@ -1567,8 +1587,12 @@ test(
       --- ./src/root.4/utilities.css ---
       @import 'tailwindcss/utilities' layer(utilities);
 
+      --- ./src/root.5/index.css ---
+      @import './tailwind.css';
+
       --- ./src/root.5/tailwind.css ---
       /* Inject missing @config in this file, due to full import */
+      /* Should be located in the root: ../../ */
       @import 'tailwindcss';
 
       @config '../../tailwind.config.ts';
@@ -1595,13 +1619,92 @@ test(
   },
 )
 
+test(
+  'multiple CSS roots that resolve to the same Tailwind config file requires manual intervention',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/index.html': html`
+        <div
+          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
+        ></div>
+      `,
+      'src/root.1.css': css`
+        /* Inject missing @config */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+      'src/root.2.css': css`
+        /* Already contains @config */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @config "../tailwind.config.ts";
+      `,
+      'src/root.3.css': css`
+        /* Inject missing @config above first @theme */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @variant hocus (&:hover, &:focus);
+
+        @theme {
+          --color-red-500: #f00;
+        }
+
+        @theme {
+          --color-blue-500: #00f;
+        }
+      `,
+      'src/root.4.css': css`
+        /* Inject missing @config due to nested imports with tailwind imports */
+        @import './root.4/base.css';
+        @import './root.4/utilities.css';
+      `,
+      'src/root.4/base.css': css`@import 'tailwindcss/base';`,
+      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
+
+      'src/root.5.css': css`@import './root.5/tailwind.css';`,
+      'src/root.5/tailwind.css': css`
+        /* Inject missing @config in this file, due to full import */
+        @import 'tailwindcss/tailwind.css';
+      `,
+    },
+  },
+  async ({ exec }) => {
+    let output = await exec('npx @tailwindcss/upgrade --force', {}, { ignoreStdErr: true }).catch(
+      (e) => e.toString(),
+    )
+
+    expect(output).toMatch('Could not determine configuration file for:')
+  },
+)
+
 test(
   'injecting `@config` in the shared root, when a tailwind.config.{js,ts,…} is detected',
   {
     fs: {
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1662,14 +1765,14 @@ test(
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
+      --- ./src/index.css ---
+      @import './tailwind-setup.css';
+
       --- ./src/index.html ---
       <div
         class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
       ></div>
 
-      --- ./src/index.css ---
-      @import './tailwind-setup.css';
-
       --- ./src/base.css ---
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
@@ -1735,6 +1838,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1797,14 +1901,14 @@ test(
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
+      --- ./src/index.css ---
+      @import './tailwind-setup.css';
+
       --- ./src/index.html ---
       <div
         class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
       ></div>
 
-      --- ./src/index.css ---
-      @import './tailwind-setup.css';
-
       --- ./src/base.css ---
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
@@ -2105,13 +2209,6 @@ test(
     // Files should not be modified
     expect(await fs.dumpFiles('./*.{js,css,html}')).toMatchInlineSnapshot(`
       "
-      --- index.html ---
-      <div>
-        <div class="shadow shadow-sm shadow-xs"></div>
-        <div class="blur blur-xs"></div>
-        <div class="rounded rounded-sm"></div>
-      </div>
-
       --- index.css ---
       @import 'tailwindcss';
 
@@ -2141,6 +2238,13 @@ test(
           border-color: var(--color-gray-200, currentColor);
         }
       }
+
+      --- index.html ---
+      <div>
+        <div class="shadow shadow-sm shadow-xs"></div>
+        <div class="blur blur-xs"></div>
+        <div class="rounded rounded-sm"></div>
+      </div>
       "
     `)
   },
@@ -2196,9 +2300,6 @@ test(
     // Files should not be modified
     expect(await fs.dumpFiles('./*.{js,css,html,tsx}')).toMatchInlineSnapshot(`
       "
-      --- index.html ---
-      <div class="rounded-sm blur-sm shadow-sm"></div>
-
       --- index.css ---
       @import 'tailwindcss';
 
@@ -2220,6 +2321,9 @@ test(
         }
       }
 
+      --- index.html ---
+      <div class="rounded-sm blur-sm shadow-sm"></div>
+
       --- example-component.tsx ---
       type Star = [
         x: number,

integrations/utils.ts

@@ -346,15 +346,21 @@ export function test(
                 let zParts = z[0].split('/')
 
                 let aFile = aParts.at(-1)
-                let zFile = aParts.at(-1)
+                let zFile = zParts.at(-1)
 
                 // Sort by depth, shallow first
                 if (aParts.length < zParts.length) return -1
                 if (aParts.length > zParts.length) return 1
 
+                // Sort by folder names, alphabetically
+                for (let i = 0; i < aParts.length - 1; i++) {
+                  let diff = aParts[i].localeCompare(zParts[i])
+                  if (diff !== 0) return diff
+                }
+
                 // Sort by filename, sort files named `index` before others
-                if (aFile?.startsWith('index')) return -1
-                if (zFile?.startsWith('index')) return 1
+                if (aFile?.startsWith('index') && !zFile?.startsWith('index')) return -1
+                if (zFile?.startsWith('index') && !aFile?.startsWith('index')) return 1
 
                 // Sort by filename, alphabetically
                 return a[0].localeCompare(z[0])