chore(deps): bump tailwindcss from 3.4.19 to 4.3.2 - #244
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| "svix": "^1.86.0", | ||
| "tailwind-merge": "^3.6.0", | ||
| "tailwindcss": "^3.4.19", | ||
| "tailwindcss": "^4.3.0", |
There was a problem hiding this comment.
🔴 Tailwind CSS v3→v4 major version upgrade without required configuration migration breaks entire CSS pipeline
The PR bumps tailwindcss from ^3.4.19 to ^4.3.0, which is a major version change with fundamental breaking changes. However, none of the required migration steps have been applied:
- PostCSS plugin moved:
postcss.config.mjs:4still usestailwindcss: {}as a PostCSS plugin, but in v4 the PostCSS plugin is a separate package@tailwindcss/postcss(not installed). - CSS directives changed:
src/app/globals.css:3-5uses@tailwind base; @tailwind components; @tailwind utilities;which are v3-only directives, replaced in v4 by@import "tailwindcss". - Config file not loaded:
tailwind.config.tsuses the v3Configtype and format. In v4, JS config files are not auto-loaded — you need a@configdirective in your CSS or use the new CSS-based configuration. - Plugin incompatibility:
tailwindcss-animatev1.0.7 uses v3's plugin API which changed significantly in v4. <alpha-value>syntax: 9 color definitions intailwind.config.tsusergb(var(--x) / <alpha-value>)which is a v3-specific pattern.
This will cause the entire application to have no styles, either through build errors or silently producing unprocessed CSS.
| "tailwindcss": "^4.3.0", | |
| "tailwindcss": "^3.4.19", |
Was this helpful? React with 👍 or 👎 to provide feedback.
dependabot
Bot
changed the title
57ee401 to
249eaa4
Compare
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| @@ -126,7 +126,7 @@ | |||
| "sonner": "^2.0.7", | |||
There was a problem hiding this comment.
tailwindcss-animate v1.x is a v3-only plugin
tailwindcss-animate ^1.0.7 was authored against the Tailwind CSS v3 plugin API (theme(), addUtilities, etc.), which no longer exists in v4's CSS-first architecture. Its peer-dependency declaration (>=3.0.0) does not cover v4. Running a v3 plugin under v4 will either silently produce no output or crash during the build. The community replacement for v4 is tw-animate-css, which ships as plain CSS imported via @import.
249eaa4 to
2ff26d7
Compare
| "svix": "^1.86.0", | ||
| "tailwind-merge": "^3.6.0", | ||
| "tailwindcss": "^3.4.19", | ||
| "tailwindcss": "^4.3.1", |
There was a problem hiding this comment.
tailwindcss v4 no longer ships a PostCSS plugin
In Tailwind v4, the PostCSS integration was extracted into a separate package, @tailwindcss/postcss. The existing postcss.config.mjs still uses tailwindcss: {} as the plugin key, but tailwindcss v4 does not export a PostCSS-compatible plugin at the package root. As a result, the build will fail to emit any CSS — the project will compile with no styles at all.
Two changes are required alongside this version bump:
- Install
@tailwindcss/postcss(see suggestion below for adding it todevDependencies). - Update
postcss.config.mjsto replacetailwindcss: {}with"@tailwindcss/postcss": {}.
Note: Tailwind v4 also has built-in vendor-prefixing, so autoprefixer can be removed from that file at the same time.
| "svix": "^1.86.0", | ||
| "tailwind-merge": "^3.6.0", | ||
| "tailwindcss": "^3.4.19", | ||
| "tailwindcss": "^4.3.1", |
There was a problem hiding this comment.
src/app/globals.css opens with @tailwind base, @tailwind components, and @tailwind utilities — the Tailwind v3 directive syntax. In v4, the canonical entry point is a single @import "tailwindcss". While @tailwindcss/postcss recognises the old directives in compatibility mode, the tailwind.config.ts also needs an explicit @config "./tailwind.config.ts" line in the CSS unless Next.js auto-detects it, and the extensive rgb(var(--warm-cream) / <alpha-value>) / rgb(var(--golden-*) / <alpha-value>) color definitions in tailwind.config.ts rely on the v3 <alpha-value> placeholder mechanism that behaves differently under v4's CSS-first compiler. These should all be migrated as part of this upgrade.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
2ff26d7 to
9e6c3c0
Compare
9e6c3c0 to
2bfdd29
Compare
Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) from 3.4.19 to 4.3.2. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.2/packages/tailwindcss) --- updated-dependencies: - dependency-name: tailwindcss dependency-version: 4.3.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
dependabot
Bot
changed the title
2bfdd29 to
597051c
Compare
|
PR author is in the excluded authors list. |
|
Superseded by #529. |
Bumps tailwindcss from 3.4.19 to 4.3.2.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
056a1554.3.2 (#20281)c8b081dAdd suggestions for named opacity modifiers (#20287)c46f654Ensure--alpha(…)is seen as acolor, and--spacing(…)is seen as a `le...5e9f66eEnsure@variantcan be used in JS based APIs (#20252)707c23bEnsure custom variants can be used via@variantinaddBase(#20247)127d170Add bare value support forauto-rows-*andauto-cols-*(#20229)8a14a714.3.1 (#20226)12833aaFix canonicalization bug where we end up with a high precision number (#20221)97a5b3adocs: fix double word 'to to' in test comment (#20216)d01e103Add missinginsetkeyword forinset-shadow-none(#20208)Maintainer changes
This version was pushed to npm by GitHub Actions, a new releaser for tailwindcss since your current version.