chore(deps): bump tailwindcss from 3.4.19 to 4.3.1 - #529
Conversation
|
PR author is in the excluded authors list. |
aba5aa6 to
0227e99
Compare
Walkthroughpackage.json:143 — the tailwindcss dependency constraint is changed from ^3.4.19 to ^4.3.1. No other files or exported entities are affected. ChangesDependency Version Update
Estimated code review effort: 2 (Simple) | ~10 minutes Blocking note: Tailwind v4 introduces breaking changes (new CSS-first config, removal of Suggested labels: dependencies, breaking-change Suggested reviewers: njrini99-code 🚥 Pre-merge checks | ✅ 11 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (11 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Line 143: The app is still using the legacy Tailwind animation plugin via
tailwindcss-animate and the Tailwind JS plugin path in tailwind.config.ts, which
should be removed for Tailwind v4. Update the animation setup to a v4-compatible
approach such as tw-animate-css or native `@theme` animations, and eliminate the
plugin import/registration from tailwind.config.ts. Also remove
tailwindcss-animate from package.json so the config only relies on the CSS-first
Tailwind v4 flow.
- Line 143: Tailwind has been bumped to v4 in package.json, but the migration is
incomplete because postcss.config.mjs still references the old v3 plugin and
src/app/globals.css still uses the removed `@tailwind` directives. Update the
PostCSS setup in postcss.config.mjs to use `@tailwindcss/postcss`, and change the
CSS entrypoint in src/app/globals.css to import Tailwind with `@import`
"tailwindcss";. If tailwind.config.ts remains in use, add the `@config` directive
in the same CSS entrypoint so the config is picked up.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: a515ec41-3213-4e66-9eba-704353d3ee4b
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json,!**/package-lock.json
📒 Files selected for processing (1)
package.json
| "svix": "^1.86.0", | ||
| "tailwind-merge": "^3.6.0", | ||
| "tailwindcss": "^3.4.19", | ||
| "tailwindcss": "^4.3.1", |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
Is tailwindcss-animate compatible with Tailwind CSS v4?
💡 Result:
The original tailwindcss-animate plugin is not officially compatible with Tailwind CSS v4 and has been deprecated by many projects that previously used it, such as shadcn/ui [1]. While some users have attempted to force compatibility through configuration overrides [2], the recommended approach for Tailwind CSS v4 is to migrate away from this legacy JavaScript-based plugin [1][3]. Tailwind CSS v4 embraces a CSS-first architecture, making native CSS animation handling the preferred method [4][5][3]. For projects upgrading to Tailwind CSS v4, the following replacements are recommended: 1. Use native Tailwind CSS v4 features: You can define custom animations directly in your CSS using the @theme directive [3][6]. This eliminates the need for external animation plugins entirely [3]. 2. Use CSS-first alternatives: Packages like tw-animate-css or tailwind-animate have been created specifically to provide a CSS-based alternative to the original plugin, fully compatible with Tailwind CSS v4 [4][5][1]. If you are migrating an existing project (e.g., from shadcn/ui), the standard migration path involves removing tailwindcss-animate, installing a modern CSS-first replacement (like tw-animate-css), and importing it directly in your CSS file rather than via the old plugin system [1].
Citations:
- 1: https://ui.shadcn.com/docs/tailwind-v4
- 2: feat: add compatibility with tailwindcss v4 jamiebuilds/tailwindcss-animate#63
- 3: https://blog.openreplay.com/tailwind-css-animation-plugins/
- 4: https://www.npmjs.com/package/tw-animate-css
- 5: https://github.com/nrjdalal/tailwind-animate
- 6: https://tailwindcss.com/docs/animation
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== package.json tailwind deps ==\n'
sed -n '120,170p' package.json
printf '\n== tailwind config files ==\n'
fd -a 'tailwind.config.*|postcss.config.*' .
printf '\n== tailwind.config.ts ==\n'
if [ -f tailwind.config.ts ]; then
cat -n tailwind.config.ts
elif [ -f ./src/tailwind.config.ts ]; then
cat -n ./src/tailwind.config.ts
fi
printf '\n== search for tailwindcss-animate / plugins usage ==\n'
rg -n "tailwindcss-animate|`@plugin`|plugins:\\s*\\[|resolveConfig|tailwindcss v4|tw-animate-css|tailwind-animate" .Repository: njrini99-code/helmv3
Length of output: 46449
Replace the legacy Tailwind animation plugin package.json:144 still pulls in tailwindcss-animate, and tailwind.config.ts:2,17-18,702-703 still loads it through the JS plugin path. Tailwind v4 is CSS-first; switch this app to a v4-compatible animation approach (tw-animate-css or native @theme animations) and remove the interop shim.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` at line 143, The app is still using the legacy Tailwind
animation plugin via tailwindcss-animate and the Tailwind JS plugin path in
tailwind.config.ts, which should be removed for Tailwind v4. Update the
animation setup to a v4-compatible approach such as tw-animate-css or native
`@theme` animations, and eliminate the plugin import/registration from
tailwind.config.ts. Also remove tailwindcss-animate from package.json so the
config only relies on the CSS-first Tailwind v4 flow.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== package.json ==\n'
nl -ba package.json | sed -n '135,150p'
printf '\n== postcss.config.mjs ==\n'
nl -ba postcss.config.mjs
printf '\n== tailwind.config.ts ==\n'
nl -ba tailwind.config.ts
printf '\n== globals.css ==\n'
nl -ba src/app/globals.css | sed -n '1,80p'Repository: njrini99-code/helmv3
Length of output: 218
🏁 Script executed:
#!/bin/bash
set -euo pipefail
for f in package.json postcss.config.mjs tailwind.config.ts src/app/globals.css; do
printf '\n== %s ==\n' "$f"
awk 'NR>=1 && NR<=220 { printf "%4d %s\n", NR, $0 }' "$f" | sed -n '1,220p'
doneRepository: njrini99-code/helmv3
Length of output: 30971
🌐 Web query:
Tailwind CSS v4 PostCSS plugin tailwindcss directly error @tailwinddirectives removed@config support migration docs
💡 Result:
In Tailwind CSS v4, the architecture has shifted to a CSS-first approach, leading to several breaking changes regarding PostCSS integration, directives, and configuration. PostCSS Plugin The legacy tailwindcss PostCSS plugin has been removed. It is replaced by a new, dedicated package, @tailwindcss/postcss [1][2]. To update, remove the old tailwindcss package and install @tailwindcss/postcss [3][4]. Your postcss.config.mjs should now only reference this new package [5][4]: export default { plugins: { "@tailwindcss/postcss": {}, }, }; Note that autoprefixer is now bundled within Tailwind CSS v4, so it can be removed from your PostCSS configuration [1][4]. Removal of @tailwind Directives The v3 @tailwind base, @tailwind components, and @tailwind utilities directives have been removed [2][6]. They are replaced by a single CSS @import directive [7][8]: @import "tailwindcss"; @config Support While Tailwind CSS v4 is designed to be configured primarily through CSS using the @theme directive, it still supports legacy JavaScript configuration files via the @config directive [9][10]. This allows you to retain existing tailwind.config.js files or use build-time environment variables [11]. You can load a configuration file by adding the @config directive to your main CSS file [10][11]: @import "tailwindcss"; @config "../../tailwind.config.js"; Keep in mind that while @config allows you to load legacy files, certain options like corePlugins, safelist, and separator are not supported in v4 [9]. For safelisting, you should use the @source directive in your CSS [9][11]. Migrating your theme configuration to CSS-first @theme blocks is the recommended approach for v4 [2][4].
Citations:
- 1: https://tailwindcss.com/docs/upgrade-guide
- 2: https://designrevision.com/blog/tailwind-4-migration
- 3: https://getcraftly.dev/blog/tailwind-css-v4-migration-complete-guide
- 4: https://dev.to/nayankyada/how-i-migrated-a-large-nextjs-project-from-tailwind-css-v3-to-v4-133e
- 5: https://tailwindcss.com/docs/installation/using-postcss
- 6: https://v3.tailwindcss.com/docs/v4-beta
- 7: https://tailwindcss.com/blog/tailwindcss-v4
- 8: https://stackoverflow.com/questions/79568691/tailwindcss-v4-does-not-generate-certain-styles-when-using-prefix
- 9: https://tailwindcss.com/docs/functions-and-directives
- 10: Support loading config files via
@configtailwindlabs/tailwindcss#14239 - 11: [v4] Using build time environment variables in tailwind tailwindlabs/tailwindcss#16626
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '== Tailwind references ==\n'
grep -RIn --exclude-dir=node_modules --exclude-dir=.next --exclude-dir=.git \
-e '`@tailwindcss/postcss`' \
-e 'tailwindcss: {}' \
-e '`@import` .*tailwindcss' \
-e '`@tailwind` base' \
-e '`@tailwind` components' \
-e '`@tailwind` utilities' \
-e '`@config` ' \
. | sed -n '1,200p'Repository: njrini99-code/helmv3
Length of output: 1125
Finish the Tailwind v4 migration before merging
package.json:143bumpstailwindcssto^4.3.1, butpostcss.config.mjs:3-5still uses the removed v3 plugin entry andsrc/app/globals.css:3-5still uses the removed@tailwinddirectives. Switch PostCSS to@tailwindcss/postcssand replace those directives with@import "tailwindcss";; iftailwind.config.tsstays, add@configin the CSS entrypoint.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` at line 143, Tailwind has been bumped to v4 in package.json,
but the migration is incomplete because postcss.config.mjs still references the
old v3 plugin and src/app/globals.css still uses the removed `@tailwind`
directives. Update the PostCSS setup in postcss.config.mjs to use
`@tailwindcss/postcss`, and change the CSS entrypoint in src/app/globals.css to
import Tailwind with `@import` "tailwindcss";. If tailwind.config.ts remains in
use, add the `@config` directive in the same CSS entrypoint so the config is
picked up.
Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) from 3.4.19 to 4.3.1. - [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.1/packages/tailwindcss) --- updated-dependencies: - dependency-name: tailwindcss dependency-version: 4.3.1 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
0227e99 to
d9528f4
Compare
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@dependabot ignore this major version |
|
OK, I won't notify you about version 4.x.x again, unless you re-open this PR. |
1 participant
Bumps tailwindcss from 3.4.19 to 4.3.1.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
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)ad66939Allow@variantto be used insideaddBase(#19480)efae52cSimplify CSS when using utilities that use a*-0or*-1value (#20196)6b43b64Canonicalization: limit arbitrary to bare values conversion (#20130)d4f24c5Fix invalid canonicalization where0\<unit>was migrated to0(#20127)749c45eExposeindexandsiblingson walk context (#20109)8dcdb66Bump dependencies (#20095)Maintainer changes
This version was pushed to npm by GitHub Actions, a new releaser for tailwindcss since your current version.