examples(with-mongodb): upgrade to tailwind v4 #83225
Conversation
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
|
Hi, I think we can also remove the tailwind config file? AFAIK TW4 doesn't use such a file anymore. |
It is no longer required but can still be used. In this case we still need it as there were some definitions we didn't move over. |
marguin-vercel
requested review from
Copilot,
devjiwonchoi and
marguin-vercel
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the with-mongodb example to use Tailwind CSS 4.x and updates various dependencies including React 19, Next.js 15, and related type definitions.
- Migrated from Tailwind CSS 3.x to 4.x with new PostCSS plugin configuration
- Updated React ecosystem from v18 to v19 including React, React DOM, and type definitions
- Upgraded Next.js to v15.5.2 and various other dependencies to their latest versions
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| postcss.config.js | Updated PostCSS configuration to use new Tailwind CSS 4 plugin format |
| package.json | Upgraded all dependencies including Tailwind CSS 4, React 19, Next.js 15, and supporting packages |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
| "postcss": "^8", | ||
| "tailwindcss": "^3.3.0", | ||
| "typescript": "^5" | ||
| "@tailwindcss/postcss": "^4.1.12", |
There was a problem hiding this comment.
Looks like missing "tailwindcss"?
There was a problem hiding this comment.
Looks like copilot thought it should be removed above. Added back.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
There was a problem hiding this comment.
Additional Comments:
examples/with-mongodb/styles/globals.css (lines 1-3):
The Tailwind CSS imports in globals.css are using the old Tailwind 3 syntax and need to be updated for Tailwind 4 compatibility.
View Details
📝 Patch Details
diff --git a/examples/with-mongodb/styles/globals.css b/examples/with-mongodb/styles/globals.css
index fd81e88583..0cfb742826 100644
--- a/examples/with-mongodb/styles/globals.css
+++ b/examples/with-mongodb/styles/globals.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
:root {
--foreground-rgb: 0, 0, 0;
Analysis
With the upgrade to Tailwind CSS v4, the CSS import syntax has changed significantly. The current imports:
@tailwind base;
@tailwind components;
@tailwind utilities;Are the old Tailwind 3 syntax. In Tailwind CSS v4, these should be replaced with:
@import "tailwindcss";This single import replaces all three separate imports and is the new standard way to include Tailwind CSS in v4. Using the old syntax with Tailwind 4 will likely cause the build to fail or styles not to load properly. The migration to v4 requires this CSS import syntax change along with the package.json and PostCSS configuration changes that were already made.
This looks valid https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives |
|
Applied this diff to a 
We just need to change @import "tailwindcss";
:root {
/* rest of file */ |
Updates |
devjiwonchoi
changed the title
|
Thank you for the PR! |
5 participants
Upgraded to tailwind 4 and updated react version and dependencies.