Failed upgrading from v3.3.3 to latest

[codagonist]

Hi all,

Due to us running NodeJS v18, the upgrade tool won't work. At least, the docs mention it uses NodeJS v20, so trying to do the upgrade manually. Main project specs are as follows:

• React v17.0.2
• Typescript v5.7.2
• PostCSS v8.4.26
• Vite v6.0.0
• TailwindCSS v3.3.3

Upgraded tailwind by running npm install tailwindcss@latest. Also ran npm install @tailwindcss/vite and npm install @tailwindcss/postcss.

After these I edited my postcss.config.js and vite.config.js files; the latter now has the import tailwindcss from "@tailwindcss/vite"; line, but this returns "Cannot find module '@tailwindcss/vite' or its corresponding type declarations.ts(2307)".

But.. I just installed it?

Am I missing something basic here?

[codagonist]

Small update on this: I locally set my NodeJS version to v20.0.0 and tried running the upgrade tool the TailwindCSS upgrade documentation suggests. Now I get errors like below. I did add the @config.. line to my app.css file followed by a second error.
Feels weird to me: the tailwindcss config file is in the project root, so would be fine, yes?

// first error
Could not determine configuration file for: `./css/app.css` 
Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the upgrade tool again. 

// second error
Git directory is not clean. Please stash or commit your changes before migrating. 
You may use the `--force` flag to silence this warning and perform the migration. 

[codagonist]

After some tinkering around I think I got v4.0.9 working. Getting some Cannot apply unknown utility class: xxx errors now, but assume these can be fixed through configuration edits.

For those of you running into the same issues as me; what I did was:

• upgraded v3.3.3 (what I currently had) to v4.0.9 by running npm install tailwindcss@latest;
• added package @tailwindcss/postcss;
• made below changes to mymy postcss.config.js:
  • removed require('tailwindcss/nesting')(require('postcss-nested')({ preserveEmpty: true })), require('tailwindcss') and require('autoprefixer')
  • added require('@tailwindcss/postcss')
• in my main css file I replaced the 3 @tailwind lines (base, components and utilities) with @import 'tailwindcss'

After a local build, I see the tailwind classes again, on inspecting elements in the chrome devtools. So I think the majority of things is done for now.

[rozsazoltan]

There is no need for both @tailwindcss/postcss and @tailwindcss/vite plugins together. Only one is needed. They were separated for this very reason, to reduce the amount of code developers need to carry.

If you want to keep other PostCSS configurations (if any), you can implement the appropriate plugin in PostCSS. After that, Vite will automatically use your PostCSS plugins.

Alternatively, you can use the TailwindCSS plugin that is directly built into Vite, which allows you to skip the entire PostCSS configuration; if you haven't used it for anything else.

The autoprefixer is no longer necessary.

Related

To install TailwindCSS v4, please refer to the updated installation and upgrade guides.

• Get started with Tailwind CSS - TailwindCSS v4 Docs

The upgrade tool requires Node.js 20 or higher, so ensure your environment is updated before running it.

• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs

Some related question for v4 manually upgrade:

• How to use TailwindCSS v4 & Vite without PostCSS
• Separated PostCSS plugin for TailwindCSS
• Removed @tailwind directives
• Deprecated: Sass, Less and Stylus preprocessors support
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite
• Automatic Source Detection from TailwindCSS v4

Sorry for mostly throwing around links, but I'm not sure exactly what was left out during the migration, and I don't want to repeat myself.

[codagonist]

@rozsazoltan thanks for the helpfull reply. Don't be sorry, you cannot have to many resources (=

I did however noticed something being off in my project. Mind you; it's an old project, so the cause could be in legacy code somewhere. But the issue I found is that we use a normalize stylesheet. After this I load the tailwindcss bit, which would make me think tailwind will get a higher priority over the normalize stylesheet. However, this is not the case.
Perhaps I need to edit some config bits somewhere. Owell, I'll play around with it some more and will also take into account your suggestions if possible.

// current imports in my main stylesheet
@import '../config/Normalize.module.css'; // <- looks like getting a higher level priority?
@import '../component/ThemifyIcons.module.css';
@import '../component/RichTextEditor.module.css';
@import '../component/page/product/ProductSpecsForm.module.css';
@import 'tailwindcss'; // <- added this one as only edit to the file

EDIT 20250306
Adding layer (base) to the normalize import seems to solve the issue.