[v4] @tailwindcss/upgrade@next removed tailwind.config.js file but linked it to the css file, resulting in build error

[tzurbaev]

What version of Tailwind CSS are you using?

Pre-update: ^3.4.1
Post-update: ^4.0.0-beta.2 (via upgrade tool)

What build tool (or framework if it abstracts the build tool) are you using?

Vite ^5.0

What version of Node.js are you using?

v18.20.4

What browser are you using?

N/A

What operating system are you using?

macOS 15.1 (24B83)

Reproduction URL

N/A

Describe your issue

Upgrade tool linked tailwind.config.js file via the @config at-rule, but simultaneously removed the file. This resulted in [plugin:vite:css] [postcss] Can't resolve '../../tailwind.config.js' in '[path]/resources/css' error.

Main CSS before:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import './components/common.css';
@import './third-party/vue-datepicker.css';

Main CSS after:

@import 'tailwindcss';

@import './components/common.css' layer(utilities);
@import './third-party/vue-datepicker.css' layer(utilities);

@config '../../tailwind.config.js';

The upgrade tool's log:

≈ tailwindcss v4.0.0-beta.2

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `./tailwind.config.js` to `./resources/css/app.css`

│ Migrating JavaScript configuration files…

│ ↳ Migrated configuration file: `./tailwind.config.js`

│ Migrating templates…

│ ↳ Migrated templates for configuration file: `./tailwind.config.js`

│ Migrating stylesheets…

│ ↳ f.toSorted is not a function in `./public/vendor/horizon/app-dark.css`

│ ↳ f.toSorted is not a function in `./public/vendor/horizon/app.css`

│ ↳ f.toSorted is not a function in `./resources/ckeditor5/sample/styles.css`

│ ↳ f.toSorted is not a function in `./resources/css/components/common.css`

│ ↳ f.toSorted is not a function in `./resources/css/third-party/vue-datepicker.css`

│ ↳ f.toSorted is not a function in `./resources/css/app.css`

│ ↳ Migrated stylesheet: `./resources/css/app.css`

│ Migrating PostCSS configuration…

│ ↳ Installed package: `@tailwindcss/postcss`

│ ↳ Removed package: `autoprefixer`

│ ↳ Removed package: `postcss-import`

│ ↳ Migrated PostCSS configuration: `./postcss.config.js`

│ Updating dependencies…

│ ↳ Updated package: `tailwindcss`

│ Verify the changes and commit them to your repository.

[philipp-spiess]

@tzurbaev Hey Tim! I can see a bunch of errors in your log: f.toSorted is not a function in./public/vendor/horizon/app-dark.css`.

The upgrade tool requires Node.js v20 and up. What version have you been using? Is the bug still happening when you update the Node.js version?

If yes, do you mind sharing the code with us so we can debug?

Thanks a ton!

[tzurbaev]

@philipp-spiess Thanks for reply!

The ./public/vendor/horizon/app-dark.css is a vendor file from Laravel Horizon (https://github.com/laravel/horizon), I have no control over it.

Unfortunately I can't upgrade to Node 20 for now, but I can share the (private) code with you. I'll send you an invite as a collaborator right now.

[philipp-spiess]

Unfortunately I can't upgrade to Node 20 for now

You don't have to upgrade all your app to use Node 20, just your local environment need to temporarily run Node 20 to be able to run the Upgrade tool. Unfortunately this is a requirement, as Node 20 is the current LTS support version and we rely on some APIs introduced in this version.

I got your invite btw but I haven't had the time to look into it yet. It would be awesome if you can help reduce this down to a minimal reproduction case!