DEV Community

Cover image for TailwindCSS v4.0: Upgrading from v3 with some plugins

TailwindCSS v4.0: Upgrading from v3 with some plugins

John Owolabi Idogun on January 31, 2025

Introduction Recently, while building a personal blog started with Tailwind CSS v3.4, I was faced with the need to upgrade to the latest...
Read full post
Collapse
 
mokshanirugutti profile image
Moksha Sai Reddy Nirugutti •

Since v4 removed tailwind.config.js, setting up UI libraries like shadcn (and others that depend on it) will fail because shadcn requires that file for component installation. If the file isn't present, it throws an error indicating it couldn't find it. I faced these issues, so I downgraded to tailwind@3.4.17. I think if you need to work with ui libraries better not to update right now . Please correct me if I missed something. Thank you.

Collapse
 
sirneij profile image
John Owolabi Idogun •

You can use it without that file. Check out this article: luisball.com/blog/shadcn-ui-with-t...

Collapse
 
visualcookie profile image
Dean (딘) •

That's not quite correct. You are still able to use the tailwind.config.js. You just have to import it into your global.css or wherever you want to setup Tailwind to. Just check this out: tailwindcss.com/docs/upgrade-guide...

Collapse
 
pandit_g profile image
Akshat Sharma •

That is true! Yesterday, I too (forcibly) downgraded to v3 for shadcn to work

Collapse
 
sirneij profile image
John Owolabi Idogun •

Check this: luisball.com/blog/shadcn-ui-with-t...

Collapse
 
ahmd_shajmeer profile image
Ahammed Shajmeer •

How to downgrade?

Collapse
 
manjindersinghsarkaria profile image
manjindersinghsarkaria •

Is anyone facing issues with Vite? I installed @tailwindcss/vite as a dependency following the documentation. Then, in vite.config.ts, I added the import:

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});
Enter fullscreen mode Exit fullscreen mode

However, I’m getting an error saying that the module @tailwindcss/vite could not be found. Has anyone encountered this issue before or found a solution?

Collapse
 
sirneij profile image
John Owolabi Idogun • • Edited

Can you double-check that you really installed it?

Collapse
 
manjindersarkaria profile image
Manjinder sarkaria • • Edited

Image description
Image description

Yes it is there and installed properly.
Image description

Image description

Thread Thread
 
sirneij profile image
John Owolabi Idogun • • Edited

Can you delete your node_modules and package-lock.json and reinstall your packages? Also, looking at your package.json, you should consider moving @types/*, tailwindcss, and other dependencies which are only used during development to devDependencies.

Collapse
 
coder73avi profile image
Abhishek Magar •

After upgrading tailwind css v3 to v4 its upgraded successfully but, after upgrading tailwindcss is not working, I don't think why cause my react app is created using create-react-app(CRA) i think this is a problem or not i am sure for now i just down grade it to v3 for now, if any one face the same problem and solved it's please shared us, thank you for use full information, its work in my another app which is created using vite.

Collapse
 
spock123 profile image
Lars Rye Jeppesen •

Thank you, very helpful

Collapse
 
sirneij profile image
John Owolabi Idogun •

I’m happy it was helpful.