Add simple JS config migration

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612))
 - _Upgrade (experimental)_: The upgrade tool now automatically discovers your JavaScript config ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
 - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643))
+- _Upgrade (experimental)_: Fully convert simple JS configs to CSS ([#14639](https://github.com/tailwindlabs/tailwindcss/pull/14639))
 
 ### Fixed
 

integrations/upgrade/index.test.ts

@@ -40,7 +40,8 @@ test(
 
       --- ./src/input.css ---
       @import 'tailwindcss';
-      @config '../tailwind.config.js';
+
+      @source './**/*.{html,js}';
       "
     `)
 
@@ -71,8 +72,9 @@ test(
         }
       `,
       'src/index.html': html`
-        <h1>🤠👋</h1>
-        <div class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red]"></div>
+        <div
+          class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red]"
+        ></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -91,13 +93,14 @@ test(
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
       --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red]"></div>
+      <div
+        class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red]"
+      ></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
 
-      @config '../tailwind.config.js';
+      @source './**/*.{html,js}';
 
       .btn {
         @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
@@ -145,8 +148,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       .a {
         @apply flex;
       }
@@ -201,8 +202,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       @layer base {
         html {
           color: #333;
@@ -262,8 +261,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       @utility btn {
         @apply rounded-md px-2 py-1 bg-blue-500 text-white;
       }
@@ -631,7 +628,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
       @import './utilities.css';
-      @config '../tailwind.config.js';
 
       --- ./src/utilities.css ---
       @utility no-scrollbar {
@@ -748,7 +744,6 @@ test(
       @import './c.1.css' layer(utilities);
       @import './c.1.utilities.css';
       @import './d.1.css';
-      @config '../tailwind.config.js';
 
       --- ./src/a.1.css ---
       @import './a.1.utilities.css'
@@ -882,17 +877,14 @@ test(
       --- ./src/root.1.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(utilities);
-      @config '../tailwind.config.js';
 
       --- ./src/root.2.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(components);
-      @config '../tailwind.config.js';
 
       --- ./src/root.3.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(utilities);
-      @config '../tailwind.config.js';
       "
     `)
   },
@@ -912,11 +904,17 @@ test(
       '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`
-        <h1>🤠👋</h1>
-        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"></div>
+        <div
+          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
+        ></div>
       `,
       'src/root.1.css': css`
         /* Inject missing @config */
@@ -968,8 +966,9 @@ test(
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
       --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
+      <div
+        class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"
+      ></div>
 
       --- ./src/root.1.css ---
       /* Inject missing @config */

integrations/upgrade/js-config.test.ts

@@ -0,0 +1,152 @@
+import { expect } from 'vitest'
+import { css, json, test, ts } from '../utils'
+
+test(
+  `upgrades a simple JS config file to CSS`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+        import defaultTheme from 'tailwindcss/defaultTheme'
+
+        module.exports = {
+          darkMode: 'selector',
+          content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
+          theme: {
+            boxShadow: {
+              sm: '0 2px 6px rgb(15 23 42 / 0.08)',
+            },
+            colors: {
+              red: {
+                400: '#f87171',
+                500: 'red',
+              },
+            },
+            fontSize: {
+              xs: ['0.75rem', { lineHeight: '1rem' }],
+              sm: ['0.875rem', { lineHeight: '1.5rem' }],
+              base: ['1rem', { lineHeight: '2rem' }],
+            },
+            extend: {
+              colors: {
+                red: {
+                  500: '#ef4444',
+                  600: '#dc2626',
+                },
+              },
+              fontFamily: {
+                sans: 'Inter, system-ui, sans-serif',
+                display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans],
+              },
+              borderRadius: {
+                '4xl': '2rem',
+              },
+            },
+          },
+          plugins: [],
+        } satisfies Config
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+
+      @source './**/*.{html,js}';
+      @source '../my-app/**/*.{html,js}';
+
+      @variant dark (&:where(.dark, .dark *));
+
+      @theme {
+        --box-shadow-*: initial;
+        --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08);
+
+        --color-*: initial;
+        --color-red-400: #f87171;
+        --color-red-500: #ef4444;
+        --color-red-600: #dc2626;
+
+        --font-size-*: initial;
+        --font-size-xs: 0.75rem;
+        --font-size-xs--line-height: 1rem;
+        --font-size-sm: 0.875rem;
+        --font-size-sm--line-height: 1.5rem;
+        --font-size-base: 1rem;
+        --font-size-base--line-height: 2rem;
+
+        --font-family-sans: Inter, system-ui, sans-serif;
+        --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+        --radius-4xl: 2rem;
+      }
+      "
+    `)
+
+    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('')
+  },
+)
+
+test(
+  `does not upgrade a complex JS config file to CSS`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+
+        export default {
+          plugins: [function complexConfig() {}],
+        } satisfies Config
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.ts';
+      "
+    `)
+
+    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
+      "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+
+      export default {
+        plugins: [function complexConfig() {}],
+      } satisfies Config
+      "
+    `)
+  },
+)

integrations/utils.ts

@@ -75,7 +75,7 @@ export function test(
 ) {
   return (only || (!process.env.CI && debug) ? defaultTest.only : defaultTest)(
     name,
-    { timeout: TEST_TIMEOUT, retry: debug || only ? 0 : 3 },
+    { timeout: TEST_TIMEOUT, retry: process.env.CI ? 2 : 0 },
     async (options) => {
       let rootDir = debug ? path.join(REPO_ROOT, '.debug') : TMP_ROOT
       await fs.mkdir(rootDir, { recursive: true })