Upgrade React to v19 and Tailwind CSS to v4 with config updates#152
Conversation
🦋 Changeset detectedLatest commit: 5796e57 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Warning Rate limit exceeded@SvenVw has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 5 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughThis update upgrades core frontend dependencies to React 19 and Tailwind CSS 4 across multiple packages. It refactors Tailwind configuration and CSS to match v4 syntax, removes the old Tailwind config file, and updates related build tooling. Several layout and class names are adjusted to align with new styling conventions. Dependency management is streamlined using catalog references. Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Vite as Vite Build
participant Tailwind as Tailwind CSS Plugin
participant App as Application Code
Dev->>Vite: Starts build
Vite->>Tailwind: Loads Tailwind plugin (@tailwindcss/vite)
Tailwind->>App: Processes CSS imports and custom theme
Tailwind->>App: Applies new Tailwind v4 syntax and compatibility fixes
Vite->>App: Bundles updated React 19 and Tailwind 4 code
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## development #152 +/- ##
============================================
Coverage 93.07% 93.07%
============================================
Files 68 68
Lines 8061 8061
Branches 957 957
============================================
Hits 7503 7503
Misses 556 556
Partials 2 2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
coderabbitai
Bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (19)
fdm-app/app/components/ui/badge.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/button.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/card.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/chart.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/checkbox.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/command.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/dialog.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/dropdown-menu.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/input.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/popover.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/select.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/separator.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/sheet.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/sidebar.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/table.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/tabs.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/textarea.tsxis excluded by!fdm-app/app/components/ui/**fdm-app/app/components/ui/toast.tsxis excluded by!fdm-app/app/components/ui/**pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
.changeset/slick-toys-hear.md(1 hunks).changeset/strong-meals-visit.md(1 hunks)fdm-app/app/components/custom/autocomplete.tsx(1 hunks)fdm-app/app/components/custom/banner.tsx(1 hunks)fdm-app/app/components/custom/sidebar/user.tsx(1 hunks)fdm-app/app/routes/signin._index.tsx(1 hunks)fdm-app/app/tailwind.css(1 hunks)fdm-app/package.json(4 hunks)fdm-app/postcss.config.js(1 hunks)fdm-app/tailwind.config.ts(0 hunks)fdm-app/vite.config.ts(1 hunks)fdm-docs/package.json(1 hunks)
💤 Files with no reviewable changes (1)
- fdm-app/tailwind.config.ts
🔇 Additional comments (15)
fdm-docs/package.json (1)
29-30:Details
✅ Verification successful
Verify Docusaurus compatibility with React 19.
React 19 includes breaking changes that may affect Docusaurus functionality. Ensure that Docusaurus 3.8.0 is compatible with React 19.
🌐 Web query:
Is Docusaurus 3.8.0 compatible with React 19?💡 Result:
Docusaurus 3.7 introduced compatibility with React 19, allowing new sites to run on React 19 by default. (docusaurus.io) However, React 18 remains supported, and existing Docusaurus sites can choose to stay on React 18 or upgrade their dependencies to React 19. (fossies.org)
As of June 2025, Docusaurus 3.8.0 has been released, which continues to support React 19. Therefore, Docusaurus 3.8.0 is compatible with React 19.
Citations:
- 1: https://docusaurus.io/blog/releases/3.7?utm_source=openai
- 2: https://fossies.org/linux/docusaurus/website/blog/releases/3.7/index.mdx?utm_source=openai
No action required – Docusaurus 3.8.0 is React 19 compatible
Docusaurus 3.7 added official support for React 19 and this continues in 3.8.0. You can safely upgrade both
reactandreact-domto^19.1.0without breaking Docusaurus functionality. ([1], [2])fdm-app/package.json (3)
76-76:Details
✅ Verification successful
Verify tailwind-merge compatibility with Tailwind CSS v4.
The
tailwind-mergepackage has been upgraded to v3.3.0. Ensure this version is compatible with Tailwind CSS v4.1.8.
🌐 Web query:
Is tailwind-merge v3.3.0 compatible with Tailwind CSS v4?💡 Result:
Tailwind-merge v3.3.0 does not support Tailwind CSS v4. Support for Tailwind CSS v4 was introduced in tailwind-merge v3.0.0. (newreleases.io) Therefore, to ensure compatibility with Tailwind CSS v4, you should upgrade to tailwind-merge v3.0.0 or a later version.
Citations:
Confirm tailwind-merge compatibility with Tailwind CSS v4
The project is already using"tailwind-merge": "^3.3.0", and support for Tailwind CSS v4 was introduced in tailwind-merge v3.0.0. No changes are necessary.
62-64:Details
❓ Verification inconclusive
Verify React 19 compatibility with React ecosystem packages.
React 19 introduces breaking changes that may affect compatibility with React-based libraries in your dependencies.
🏁 Script executed:
#!/bin/bash # Check for React ecosystem packages that may need compatibility verification echo "=== React ecosystem packages that may need React 19 compatibility check ===" cat package.json | jq -r '.dependencies | to_entries[] | select(.key | test("react|@react")) | "\(.key): \(.value)"' echo -e "\n=== Radix UI packages (React-based) ===" cat package.json | jq -r '.dependencies | to_entries[] | select(.key | test("@radix-ui")) | "\(.key): \(.value)"'Length of output: 592
It looks like we queried the wrong file location—our workspace root doesn’t have
package.json. Let’s point atfdm-app/package.jsoninstead to list out all dependencies and specifically surface React-related packages:
🏁 Script executed:
#!/bin/bash # List all dependencies echo "=== All dependencies in fdm-app/package.json ===" jq -r '.dependencies | to_entries[] | "\(.key): \(.value)"' fdm-app/package.json # Filter React core and related packages echo -e "\n=== React ecosystem packages ===" jq -r '.dependencies | to_entries[] | select(.key | test("(react|@react|react-)")) | "\(.key): \(.value)"' fdm-app/package.json # Filter Radix UI (or other React-based UI libs) echo -e "\n=== Radix UI packages (React-based) ===" jq -r '.dependencies | to_entries[] | select(.key | test("@radix-ui")) | "\(.key): \(.value)"' fdm-app/package.jsonLength of output: 3571
Confirm React 19 compatibility for all React-based dependencies
Infdm-app/package.json, React and React DOM were bumped to ^19.1.0. Please verify that each React ecosystem package you’re using supports React 19, including but not limited to:• Core packages
– react ^19.1.0
– react-dom ^19.1.0• React-based libraries
– react-day-picker 8.10.1
– react-hook-form ^7.56.4
– react-map-gl ^8.0.4
– react-markdown ^10.1.0
– react-router ^7.6.1 / react-router-dom ^7.6.1• Third-party React integrations
– @radix-ui/react-* packages (accordion, avatar, checkbox, …, tooltip)
– @react-email/components & @react-email/tailwind
– @tanstack/react-table ^8.21.3
– @sentry/react ^9.22.0
– lucide-react ^0.511.0Review each package’s peerDependencies or changelog to ensure there are no unmet React version constraints before merging.
43-43:Details
❓ Verification inconclusive
Verify Tailwind CSS v4 migration is complete.
The upgrade to Tailwind CSS v4 includes architectural changes. Ensure all necessary configuration files and imports have been updated for the new version.
Also applies to: 89-89, 98-98
🏁 Script executed:
#!/bin/bash # Check for remaining Tailwind v3 configuration patterns echo "=== Checking for Tailwind configuration files ===" fd "tailwind.config" --type f echo -e "\n=== Checking for @tailwind directives in CSS files ===" rg "@tailwind" --type css -A 2 -B 2 echo -e "\n=== Checking for Tailwind import patterns ===" rg "import.*tailwind" --type js --type ts --type jsx --type tsxLength of output: 500
#!/bin/bash set -e echo "=== Tailwind config files (JS/TS/CJS/MJS) ===" fd --hidden -HI -e js -e cjs -e mjs -e ts "tailwind.config" echo -e "\n=== Checking for old 'purge' key in configuration ===" rg --no-heading --color never "purge\s*:" --glob "tailwind.config.*" echo -e "\n=== Checking for @tailwind directives in CSS/SCSS ===" rg --no-heading --color never "@tailwind\s+(base|components|utilities)" --glob "*.css" --glob "*.scss" -A2 -B2 echo -e "\n=== Checking for Tailwind CSS imports in JS/TS/JSX/TSX ===" rg --no-heading --color never "import.*tailwind" -g "*.js" -g "*.ts" -g "*.jsx" -g "*.tsx" echo -e "\n=== Checking for plugin usage in Vite config ===" rg --no-heading --color never "@tailwindcss/vite" -g "*vite.config.*"Please run this and share the output so we can confirm that your Tailwind v4 migration (config, directives, and imports) is fully in place.
#!/usr/bin/env bash set -e echo "=== Searching for tailwind.config.* files ===" fd --hidden -HI -i "tailwind.config.*" || echo "No tailwind.config.* found" echo -e "\n=== Checking for old 'purge' key in any config ===" grep -RI "purge\s*:" --include="tailwind.config.*" || echo "No 'purge' key found" echo -e "\n=== Checking CSS/SCSS for @tailwind directives ===" grep -R "@tailwind \(base\|components\|utilities\)" --include="*.css" --include="*.scss" -n || echo "No @tailwind directives found" echo -e "\n=== Tailwind imports in JS/TS/JSX/TSX ===" grep -R "import.*tailwind" --include="*.js" --include="*.ts" --include="*.jsx" --include="*.tsx" -n || echo "No tailwind imports found" echo -e "\n=== Plugin usage in Vite config ===" grep -R "@tailwindcss/vite" --include="vite.config.*" -n || echo "No plugin usage found"Please run this and share the results so we can confirm that the Tailwind CSS v4 migration (config filename, removed
purge, updated directives, and plugin entry) is fully applied.
Verify Tailwind CSS v4 migration
Please manually confirm the following after upgrading to
@tailwindcss/vite@^4.1.8:
- A
tailwind.config.js/tsfile exists and uses the newcontentkey (no morepurge).- All CSS/SCSS files reference the updated directives:
@tailwind base@tailwind components@tailwind utilities- Your Vite configuration (
vite.config.js/ts) includes the@tailwindcss/viteplugin.- There are no leftover Tailwind v3 patterns or imports.
.changeset/strong-meals-visit.md (1)
1-6: LGTM! Changeset properly documents React 19 upgrade.The changeset correctly documents the React 19 upgrade for both packages using the standard changeset format.
.changeset/slick-toys-hear.md (1)
1-5: LGTM! Changeset properly documents Tailwind v4 upgrade.The changeset correctly documents the Tailwind CSS v4 upgrade using the standard changeset format.
fdm-app/postcss.config.js (1)
3-3:Details
✅ Verification successful
Verify autoprefixer functionality is preserved.
The simplified configuration using
@tailwindcss/postcssaligns with Tailwind v4 architecture. Confirm that autoprefixer functionality is included in this plugin or if separate autoprefixer configuration is still needed.
🌐 Web query:
Does @tailwindcss/postcss v4 include autoprefixer functionality?💡 Result:
Yes, Tailwind CSS v4.0 integrates autoprefixer functionality directly into its build process. This means you no longer need to install or configure autoprefixer separately. Tailwind CSS v4.0 utilizes Lightning CSS for tasks like vendor prefixing, modern feature transpilation, and minification, streamlining your CSS pipeline. (tailwindcss.com)
Consequently, you can remove tools like
autoprefixerandpostcss-preset-envfrom your project configuration. Tailwind CSS v4.0 handles these tasks internally, simplifying your setup. (tailwindcss.com)However, it's important to note that while Tailwind CSS v4.0 manages vendor prefixing, there have been discussions regarding its handling of certain CSS properties. Some users have observed differences in how properties like
text-size-adjustare prefixed compared to previous setups with autoprefixer. This suggests that while Tailwind CSS v4.0 includes autoprefixer functionality, there may be variations in its behavior. (github.com)In summary, Tailwind CSS v4.0 includes autoprefixer functionality, but it's advisable to test your specific use cases to ensure compatibility.
Citations:
- 1: https://tailwindcss.com/blog/tailwindcss-v4?utm_source=openai
- 2: https://tailwindcss.com/blog/tailwindcss-v4?utm_source=openai
- 3: tailwindlabs/tailwindcss#15160
Autoprefixer is built into @tailwindcss/postcss (Tailwind v4)
Tailwind v4’s PostCSS plugin leverages Lightning CSS to handle vendor prefixes, modern-feature transpilation, and minification—so you can safely remove any standalone
autoprefixer(andpostcss-preset-env) entries. It’s still a good idea to spot-check critical styles (e.g.text-size-adjust) for any subtle prefix differences.• File:
fdm-app/postcss.config.js, line 3:
'@tailwindcss/postcss': {}is sufficient
• Clean up any legacyautoprefixerorpostcss-preset-envpluginsfdm-app/app/components/custom/autocomplete.tsx (1)
211-211: LGTM! Correct Tailwind CSS v4 syntax update.The change from square bracket
w-[--radix-popover-trigger-width]to parenthesesw-(--radix-popover-trigger-width)correctly updates the CSS variable syntax for Tailwind CSS v4 compatibility.fdm-app/app/routes/signin._index.tsx (1)
401-401:Details
✅ Verification successful
Verify the correct Tailwind CSS v4 outline class.
The change from
focus:outline-nonetofocus:outline-hiddenappears to be a Tailwind CSS v4 syntax update. Please verify this is the correct class name in Tailwind v4 documentation.
🌐 Web query:
What is the correct way to hide focus outlines in Tailwind CSS v4? Is it outline-none or outline-hidden?💡 Result:
Hiding Focus Outlines in Tailwind CSS v4
In Tailwind CSS v4, the utility class to use depends on exactly what result you want and your accessibility considerations. Here’s how it works as of v4:
Which Utility to Use?
- outline-none: This class sets
outline-style: none;and completely removes the focus outline from the element. It does not preserve outline visibility in any accessibility modes. Use this if you want to fully remove the focus outline and do not need to support Windows High Contrast/forced colors accessibility[1][2].- outline-hidden: This is a new utility in v4. It mimics the old v3 behavior: it sets an invisible outline (
outline: 2px solid transparent; outline-offset: 2px;). This means that the outline is visually hidden, but still appears in forced colors mode (e.g., Windows High Contrast), which is better for accessibility[1][2]. Use this if you want to hide the outline for most users but still retain focus indication for users who need it.Direct Guidance from v4 Docs
Use the
outline-hiddenutility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode...[1]Use the
outline-noneutility to completely remove the default browser outline on focused elements...[1]Migration Note from v3 to v4
- In Tailwind v3,
outline-noneset an invisible outline to remain accessible. In v4,outline-noneonly setsoutline-style: none.- If you previously relied on
outline-nonefor accessibility in v3, replace it withoutline-hiddenin v4[2].Code Examples
<!-- Remove outline completely (not accessible) --> <button class="focus:outline-none">Button</button> <!-- Hide outline visually but keep for forced colors mode (accessible) --> <button class="focus:outline-hidden">Button</button>Summary Table
Utility Effect Accessibility outline-noneRemoves outline entirely ( outline-style: none)Not accessible for forced colors outline-hiddenHides outline visually, keeps it for forced colors mode More accessible Recommendation:
For best accessibility, useoutline-hiddenin Tailwind CSS v4 if you want to visually hide the outline but retain support for forced colors. Useoutline-noneonly if you intentionally want to remove the outline in all scenarios[1][2].Always ensure that you provide a visible focus style for keyboard users in some other way if you hide the default outline.
Citations:
- 1: https://tailwindcss.com/docs/outline-style
- 2: tailwindlabs/tailwindcss#15152
- 3: https://tailwindcss.com/docs/hover-focus-and-other-states
- 4: https://tailwindcss.com/docs/outline-width
- 5: https://codecourse.com/forum/109-override-tailwind-outline-for-inputs-and-buttons
- 6: https://v3.tailwindcss.com/docs/outline-style
- 7: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
- 8: https://kombai.com/tailwind/outline-style/
- 9: https://www.w3schools.com/css/css_outline.asp
- 10: https://sentry.io/answers/how-to-remove-focus-border-outline-around-text-input-boxes/
✅ Confirmed
focus:outline-hiddenIs the Correct Tailwind v4 UtilityThe
outline-hiddenclass in Tailwind CSS v4 is the recommended replacement for v3’s accessibleoutline-none, as it visually hides the native outline while preserving it in forced-colors (high-contrast) modes. Your existing combination:
focus:outline-hiddenfocus:ring-2 focus:ring-ring focus:ring-offset-2will remove the browser’s default outline but replace it with a fully accessible ring style on focus.
No further changes are needed.
fdm-app/app/components/custom/banner.tsx (1)
116-116:Details
✅ Verification successful
Verify z-index syntax for Tailwind CSS v4.
The change from
z-[200]toz-200updates the z-index syntax. Please confirm thatz-200is a valid class in Tailwind CSS v4, as this maintains the same stacking behavior but with updated syntax.
🌐 Web query:
Does Tailwind CSS v4 support z-200 class or should arbitrary z-index values use z-[200] syntax?💡 Result:
In Tailwind CSS v4, you can use both
z-200andz-syntax for z-index values, but with some important differences.Direct Numeric Values in v4
Tailwind CSS v4 has significantly improved how utility classes handle values, allowing you to use many arbitrary numeric values directly without square brackets. This applies to z-index utilities as well[3].
For z-index specifically, you can now use values like
z-200directly without needing to use the arbitrary value syntax (z-)[3]. This is part of the dynamic utility values introduced in v4 that allow you to use values that aren't explicitly defined in your configuration.How Z-Index Works in Tailwind CSS v4
The z-index utilities in Tailwind CSS v4 follow this pattern:
z-{number}- Sets the z-index to the specified number (e.g.,z-10,z-200)z-auto- Sets z-index to auto- For negative values, you can use a dash prefix (e.g.,
-z-50)[1][4]Custom Z-Index Theming
If you want to use semantic z-index values based on your own naming convention, you can define them in your
@themesection. For example:@theme { --z-index-negative: -1; --z-index-base: 1; --z-index-header: 50; --z-index-backdrop: 100; --z-index-drawer: 150; --z-index-tooltip: 300; }Note that the values should be defined without quotes[7]. After defining these custom z-index values, you can use them in your HTML.
When to Use Square Brackets
While direct numeric values work in v4, there might still be cases where you'd want to use the arbitrary value syntax (
z-):
- When using complex expressions:
z-[calc(var(--index)+1)][1]- When referencing CSS variables:
z-[var(--my-z)](though v4 also offers the shorthandz-(--my-z))[1][10]Responsive and Conditional Z-Index
You can also combine z-index with responsive breakpoints or state variants:
<div class="z-0 md:z-50"><!-- Content --></div> <div class="z-0 hover:z-50"><!-- Content --></div>This allows your z-index to change based on screen size or user interaction[1][4].
The upgrade to v4 has simplified many utilities by eliminating the need for arbitrary value syntax in many cases, making your code cleaner and more readable while maintaining the flexibility to use custom values when needed.
Citations:
- 1: https://tailwindcss.com/docs/z-index
- 2: https://v2.tailwindcss.com/docs/z-index
- 3: https://tailwindcss.com/blog/tailwindcss-v4
- 4: https://v3.tailwindcss.com/docs/z-index
- 5: https://kombai.com/tailwind/z-index/
- 6: https://www.geekster.in/articles/z-index-in-tailwind/
- 7: tailwindlabs/tailwindcss#18031
- 8: tailwindlabs/tailwindcss#17673
- 9: tailwindlabs/tailwindcss.com#2191
- 10: https://tailwindcss.com/docs/adding-custom-styles
z-200 is valid in Tailwind CSS v4
Tailwind v4 supports direct numeric z-index utilities, so replacing
z-[200]withz-200is correct and preserves the original stacking behavior. No further changes are required.fdm-app/app/components/custom/sidebar/user.tsx (1)
78-78: LGTM! Consistent Tailwind CSS v4 syntax update.The change from
w-[--radix-dropdown-menu-trigger-width]tow-(--radix-dropdown-menu-trigger-width)correctly updates the CSS variable syntax for Tailwind CSS v4, consistent with the same change made in the autocomplete component.fdm-app/vite.config.ts (2)
4-4: Integrate Tailwind CSS Vite plugin
Tailwind CSS plugin is correctly imported from@tailwindcss/vite.
7-7: Register Tailwind CSS plugin in Vite config
Thepluginsarray now includestailwindcss(), ensuring Tailwind directives are processed at build time.fdm-app/app/tailwind.css (2)
1-6: Tailwind CSS at-rule imports and plugin integration
The new CSS at-rules correctly import Tailwind’s core (@import 'tailwindcss';), load thetailwindcss-animateplugin, and define the custom dark variant.
7-58: Inline theme configuration
The@themeblock inlines the full design token set (fonts, radii, color palettes) directly in CSS, leveraging Tailwind v4’s built-in CSS configuration syntax.
1 participant
Summary by CodeRabbit
New Features
Style
Chores