chore(ui): tailwind migration from 3.4 to 4 #1117
Conversation
WalkthroughThis pull request removes Tailwind CSS–specific ESLint configurations and updates the project’s dependency set. The ESLint configuration (in Changes
Possibly related PRs
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
Documentation and Community
|
✅ Deploy Preview for reearth-flow ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
ui/src/components/Input/index.tsx (1)
12-13: Focus Outline Class Modification
The input component’s class string now usesfocus-visible:outline-hiddeninstead of the previousfocus-visible:outline-none. This change is part of the migration, but please double-check that it still provides an adequate visual indicator for keyboard focus to maintain accessibility standards.ui/src/components/TextArea/index.tsx (1)
11-12: Focus Outline Update in TextArea
The textarea’s styling was updated fromfocus-visible:outline-nonetofocus-visible:outline-hidden. As with other input components, please verify that this change does not compromise the visual focus indication for accessibility.ui/src/index.css (1)
97-107: Multiple @layer base Declarations for Legacy Styles
The extra@layer baseblock (with the note on ensuring legacy Tailwind v3 styles) appropriately preserves previously implicit styles. For improved clarity and maintainability, consider whether these declarations could be consolidated in a single block if the style ordering permits.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
ui/yarn.lockis excluded by!**/yarn.lock,!**/*.lock,!**/*.lock
📒 Files selected for processing (31)
ui/eslint.config.mjs(1 hunks)ui/package.json(2 hunks)ui/postcss.config.js(0 hunks)ui/src/components/Card/index.tsx(1 hunks)ui/src/components/Checkbox/index.tsx(1 hunks)ui/src/components/Command/index.tsx(2 hunks)ui/src/components/ContextMenu/index.tsx(4 hunks)ui/src/components/Dialog/index.tsx(1 hunks)ui/src/components/DropdownMenu/index.tsx(4 hunks)ui/src/components/FileTree/index.tsx(1 hunks)ui/src/components/Input/index.tsx(1 hunks)ui/src/components/NavigationMenu/index.tsx(3 hunks)ui/src/components/RadioGroup/index.tsx(1 hunks)ui/src/components/Resizable/index.tsx(1 hunks)ui/src/components/Select/index.tsx(2 hunks)ui/src/components/Table/index.tsx(1 hunks)ui/src/components/Tabs/index.tsx(2 hunks)ui/src/components/TextArea/index.tsx(1 hunks)ui/src/components/Toast/index.tsx(4 hunks)ui/src/components/buttons/BaseButton/index.tsx(1 hunks)ui/src/features/Editor/components/OverlayUI/index.tsx(1 hunks)ui/src/features/Editor/components/ParamsPanel/components/ParamEditor/index.tsx(1 hunks)ui/src/features/Editor/components/ParamsPanel/index.tsx(1 hunks)ui/src/features/Editor/components/RightPanel/components/VersionHistory/Version.tsx(1 hunks)ui/src/features/Editor/components/RightPanel/components/VersionHistory/index.tsx(1 hunks)ui/src/features/KeyboardShortcutDialog/index.tsx(1 hunks)ui/src/features/WorkspaceProjects/components/ProjectCard.tsx(1 hunks)ui/src/index.css(4 hunks)ui/src/lib/reactFlow/nodeTypes/GeneralNode/components/CustomHandle/Handles.tsx(1 hunks)ui/src/lib/reactFlow/nodeTypes/NoteNode/index.tsx(1 hunks)ui/vite.config.ts(2 hunks)
💤 Files with no reviewable changes (1)
- ui/postcss.config.js
🧰 Additional context used
🧬 Code Definitions (1)
ui/src/features/Editor/components/ParamsPanel/components/ParamEditor/index.tsx (1)
ui/src/components/Tabs/index.tsx (1)
TabsTrigger(55-55)
🪛 Biome (1.9.4)
ui/src/index.css
[error] 147-147: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 150-150: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 153-153: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 156-156: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 159-159: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
🔇 Additional comments (55)
ui/src/features/Editor/components/RightPanel/components/VersionHistory/Version.tsx (1)
27-27: Tailwind Flex Class Update
The class on the<p>element has been updated fromflex-[2]toflex-2to align with Tailwind CSS v4 conventions. Please verify that the new class provides the same intended flex behavior as before.ui/src/components/Card/index.tsx (1)
11-11: Tailwind Shadow Class Adjustment
The class name has been modified from"shadow"to"shadow-sm", offering a lighter shadow effect in accordance with the updated design guidelines. This change appears consistent with the overall visual update strategy.ui/src/features/Editor/components/ParamsPanel/index.tsx (1)
71-71: z-index Class Revision
The change from using the bracket notation (z-[1]) to the simple numeric class (z-1) is consistent with Tailwind CSS v4’s updated syntax. Ensure that this modification does not alter the intended stacking order in the UI.ui/src/features/Editor/components/RightPanel/components/VersionHistory/index.tsx (1)
54-54: Updated class to Tailwind v4 syntaxThe class has been updated from
flex-[2]toflex-2to conform with Tailwind CSS v4 syntax, which simplifies arbitrary value notation for common use cases.ui/src/components/Dialog/index.tsx (1)
96-96: Accessibility enhancement with updated focus outline classThe class has been updated from
focus:outline-nonetofocus:outline-hiddento align with Tailwind CSS v4's improved accessibility approach for focus states.ui/src/lib/reactFlow/nodeTypes/NoteNode/index.tsx (1)
105-105: Updated focus-visible utility for accessibilityChanged from
focus-visible:outline-nonetofocus-visible:outline-hiddento conform with Tailwind CSS v4's improved focus management utilities.ui/src/components/Tabs/index.tsx (2)
32-32: Updated focus and shadow utilitiesTwo changes were made to align with Tailwind CSS v4:
focus-visible:outline-none→focus-visible:outline-hiddenfor better accessibility semanticsdata-[state=active]:shadow→data-[state=active]:shadow-smto adjust to v4's shadow utility adjustments
47-47: Updated focus-visible utility for accessibilityChanged from
focus-visible:outline-nonetofocus-visible:outline-hiddento conform with Tailwind CSS v4's improved focus management utilities.ui/src/features/Editor/components/ParamsPanel/components/ParamEditor/index.tsx (1)
95-95: Tailwind v4 syntax update: Changed flex-[5] to flex-5 for arbitrary valuesThe syntax for arbitrary values in Tailwind CSS has been updated in v4. The square bracket notation has been simplified for numeric values. This change maintains the same functionality while adopting the newer syntax.
Also applies to: 101-101, 106-106
ui/src/components/RadioGroup/index.tsx (1)
29-29: Updated shadow and outline utilities for Tailwind v4 compatibilityThe changes from
shadowtoshadow-smandfocus:outline-nonetofocus:outline-hiddenalign with Tailwind CSS v4's new utility naming conventions. These updates ensure consistent styling behavior in the new version.ui/src/components/Table/index.tsx (1)
46-46: Updated modifier syntax for Tailwind v4 compatibilityThe change from
[&>tr]:last:border-b-0tolast:[&>tr]:border-b-0reflects Tailwind v4's updated syntax for combining modifiers with arbitrary selectors. The modifier (last:) now appears before the selector rather than after it.ui/src/components/Checkbox/index.tsx (1)
14-14: Updated shadow and outline utilities for Tailwind v4 compatibilitySimilar to the RadioGroup component, this update changes
shadowtoshadow-smandfocus-visible:outline-nonetofocus-visible:outline-hiddento align with Tailwind CSS v4's utility naming conventions.ui/src/features/WorkspaceProjects/components/ProjectCard.tsx (1)
115-115: Update to Tailwind v4 blur utility classThe class
backdrop-blur-smhas been replaced withbackdrop-blur-xsto align with Tailwind CSS v4's naming conventions. This will result in a slightly different blur effect when a project description is present.ui/src/features/KeyboardShortcutDialog/index.tsx (1)
115-115: Z-index syntax updated for Tailwind v4The z-index syntax has been updated from the Tailwind v3 arbitrary value format
z-[1000]to the new Tailwind v4 formatz-1000(without brackets), while maintaining the same z-index value.ui/src/components/FileTree/index.tsx (1)
260-260: Tailwind v4 modifier order updateThe class name has been updated from
last:[&[data-state=open]>svg]:rotate-90to[&[data-state=open]>svg]:last:rotate-90to match Tailwind v4's new syntax for handling the order of modifiers while maintaining the same functionality.ui/src/features/Editor/components/OverlayUI/index.tsx (2)
88-88: Simplified child selector syntax for Tailwind v4The child selector syntax has been updated from
[&>*]:pointer-events-autoto the more concise*:pointer-events-auto, which is the recommended format in Tailwind v4.
93-93: Simplified child selector syntax for Tailwind v4The child selector syntax has been updated from
[&>*]:pointer-events-autoto the more concise*:pointer-events-auto, which is the recommended format in Tailwind v4.ui/src/components/Select/index.tsx (2)
27-27: Class name update for Tailwind CSS 4 compatibilityThe
focus:outline-noneclass has been replaced withfocus:outline-hiddenas part of the Tailwind CSS v4 migration. This change reflects the updated class naming conventions in Tailwind CSS 4.
121-121: Updated class names for Tailwind CSS 4 compatibilityTwo changes were made to align with Tailwind CSS 4:
- Replaced
outline-nonewithoutline-hidden- Simplified data attribute selectors from
data-[disabled]:pointer-events-nonetodata-disabled:pointer-events-noneformatThese changes reflect the updated syntax in Tailwind CSS 4 for both outline utilities and data attribute selectors.
ui/src/components/NavigationMenu/index.tsx (3)
43-43: Updated focus outline class for Tailwind CSS 4The
focus:outline-noneclass has been updated tofocus:outline-hiddento match Tailwind CSS 4's naming conventions.
87-87: Updated shadow utility classThe
shadowclass has been replaced with the more specificshadow-smclass, which provides a smaller shadow effect. This change is part of the Tailwind CSS 4 migration where utility classes may have been refined.
105-105: Simplified z-index syntaxThe z-index syntax has been updated from
z-[1]toz-1, reflecting Tailwind CSS 4's simplified approach to z-index utilities where bracket notation is no longer needed for standard numeric values.ui/src/components/Command/index.tsx (2)
51-51: Updated outline utility for Tailwind CSS 4The
outline-noneclass has been updated tooutline-hiddento match Tailwind CSS 4's naming conventions.
122-122: Updated class names for Tailwind CSS 4 compatibilityTwo important updates have been made to align with Tailwind CSS 4's syntax:
- Replaced
outline-nonewithoutline-hidden- Simplified data attribute selectors from
data-[disabled]:pointer-events-nonetodata-disabled:pointer-events-noneThese changes are consistent with the pattern applied across other components.
ui/vite.config.ts (2)
7-7: Added Tailwind CSS Vite plugin importAdded the import for the Tailwind CSS Vite plugin, which is required for integrating Tailwind CSS 4 with the Vite build system.
22-22: Added Tailwind CSS plugin to Vite configurationThe Tailwind CSS plugin has been added to the Vite plugins array, enabling proper integration of Tailwind CSS 4 with the build process. This is a necessary step for the migration from Tailwind CSS 3.4 to 4.
ui/package.json (3)
60-60: Addition of Tailwind CSS Vite pluginThe
@tailwindcss/vitepackage is a new official plugin for Tailwind CSS v4 that provides seamless integration with Vite. This is the recommended approach for using Tailwind with Vite in v4.
1-144:❓ Verification inconclusive
Verify the removal of PostCSS dependency
I notice the PostCSS dependency has been removed, which is expected since Tailwind CSS v4 no longer requires PostCSS as a direct dependency. Also, the removal of
eslint-plugin-tailwindcssaligns with your PR notes about it not currently supporting Tailwind v4.
🏁 Script executed:
#!/bin/bash # Check if there are any references to postcss in the project that might need updating echo "Checking for PostCSS configuration files" fd -e js -e cjs -e mjs "postcss\.config" echo "Checking for any remaining imports or references to postcss in the code" rg -l "postcss" --type js --type tsLength of output: 375
PostCSS Dependency Removal in UI Package Verified – Please Review Engine Config
The changes in
ui/package.jsoncorrectly remove the PostCSS dependency and theeslint-plugin-tailwindcss, in line with Tailwind CSS v4’s requirements. However, the shell script found a lingering file atengine/plateau-gis-quality-checker/postcss.config.js. Please verify that this file is intentionally retained and won’t cause issues given the removal in the UI package.
- Confirmed: No PostCSS references in UI code or its dependencies.
- Action Needed: Manually verify whether
engine/plateau-gis-quality-checker/postcss.config.jsshould be updated or removed.
136-136:❓ Verification inconclusive
Tailwind CSS v4 upgrade
The upgrade from Tailwind CSS v3.4.17 to v4.0.15 aligns with the PR objectives. This major version upgrade brings improvements in performance, smaller bundle sizes, and new features.
🌐 Web query:
What are the key changes and breaking changes in Tailwind CSS v4?💡 Result:
Tailwind CSS v4.0 introduces fundamental architectural changes and significant improvements in performance and workflow. Here's an analysis of the key changes and breaking changes:
Key Changes
1. CSS-First Configuration
- Replaces JavaScript config with CSS variables via
@themedirective [1][3][5]- Design tokens now defined directly in CSS:
@import "tailwindcss"; @theme { --color-primary: hsl(49, 100%, 7%); --font-display: "Satoshi", sans-serif; }- Eliminates
tailwind.config.js[3][5]2. Performance Improvements
- New Oxide engine with Rust-based toolchain (5x faster full builds, 100x faster incremental builds) [3][8]
- Unified Lightning CSS pipeline replaces PostCSS [8]
3. New Features
Feature Description Container queries @sm:/@lg:variants for container-based responsiveness [10][12]3D transforms New rotate3d,perspectiveutilities [3]CSS Variables Full theme exposed as CSS custom properties [3][5] Cascade layers Native CSS layer support [3][8] 4. Workflow Improvements
- Automatic content detection (no
contentconfig required) [3]- First-party Vite plugin [3][7]
- Built-in CSS imports [3][5]
Breaking Changes
1. Removed Utilities
Deprecated Utility Replacement text-opacity-*text-primary/50[3][7]flex-grow-*grow-*[3][9]decoration-slicebox-decoration-slice[3]shadow-smshadow-xs[7]2. Configuration Changes
- JavaScript config file (
tailwind.config.js) no longer primary [3][5]- PostCSS plugin and CLI now separate packages [6][9]:
npm install @tailwindcss/postcss @tailwindcss/cli3. Default Behavior Changes
- Border color defaults to
currentColorinstead ofgray-200[3][9]ringutilities now 1px by default (was 3px) [3][9]- Placeholder text uses 50% opacity of current color [7][9]
4. Browser Support
- Requires Safari 16.4+, Chrome 111+, Firefox 128+ [9]
- No IE11 compatibility [9]
5. Migration Requirements
- Automated migration tool available:
npx @tailwindcss/upgrade@next- Requires Node.js 20+ [7][9]
- Custom colors must be moved from JS config to CSS
@theme[4][5]The update emphasizes modern CSS standards while maintaining backward compatibility through migration tools. The shift to CSS-native configuration and dramatic performance improvements make v4 particularly compelling for new projects, though established codebases require careful migration planning.
Citations:
- 1: https://bryananthonio.com/blog/configuring-tailwind-css-v4/
- 2: https://forums.servicestack.net/t/tailwindcss-v4-release-breaking-changes/12457
- 3: https://tailwindcss.com/blog/tailwindcss-v4
- 4: Upgrading breaks css tailwindlabs/tailwindcss#15860
- 5: https://tailwindcss.com/blog/tailwindcss-v4-alpha
- 6: https://tailkit.com/blog/everything-you-need-to-know-about-tailwind-css-v4
- 7: https://dev.to/kasenda/whats-new-and-migration-guide-tailwind-css-v40-3kag
- 8: https://daily.dev/blog/tailwind-css-40-everything-you-need-to-know-in-one-place
- 9: https://tailwindcss.com/docs/upgrade-guide
- 10: https://www.youtube.com/watch?v=ppzDKZqDSp8
- 11: https://www.youtube.com/watch?v=ud913ekwAOQ
- 12: https://dev.to/best_codes/exciting-updates-in-tailwind-version-4-40i0
Tailwind CSS v4 Upgrade Applied – Please Review Migration Considerations
The upgrade from Tailwind CSS v3.4.17 to v4.0.15 in
ui/package.jsonaligns with the PR objectives and introduces significant performance improvements along with new features such as faster builds, a CSS-first configuration approach, and enhanced utilities. However, Tailwind CSS v4 also brings several breaking changes that warrant a closer look:
- Config Changes: The traditional
tailwind.config.jsis deprecated in favor of a CSS-first approach with configuration defined via CSS variables (using the@themedirective).- Deprecated Utilities: Some utilities (e.g., variants like
text-opacity-*,flex-grow-*, and changes to default behavior for border colors and ring utilities) have been removed or altered.- Migration Guidance: Ensure that any custom configurations or utility usages that might be affected are updated accordingly. Consider using the automated migration tool (
npx @tailwindcss/upgrade@next) to help with this process.Please verify that the project's styling and configurations have been adjusted to accommodate these changes and that no residual usage of deprecated features remains.
ui/src/components/Resizable/index.tsx (1)
31-31: Update to Tailwind v4 outline class nameThe change from
focus-visible:outline-nonetofocus-visible:outline-hiddenreflects the updated class naming convention in Tailwind CSS v4. This is part of the standardization of CSS logical properties.ui/src/components/DropdownMenu/index.tsx (3)
32-32: Update to Tailwind v4 outline class nameThe class name has been updated from
outline-nonetooutline-hiddento conform to Tailwind CSS v4's new naming conventions.
91-91: Updated data attribute selector format and outline classTwo changes here:
- Changed
outline-nonetooutline-hiddenfor Tailwind v4 compatibility- Updated data attribute selector from
data-[disabled]todata-disabledfor simplified syntaxBoth changes align with Tailwind CSS v4's class naming and attribute formatting changes.
107-107: Consistent updates to attribute selectors and outline classesSimilar changes to the previous ones have been consistently applied to these components as well:
outline-none→outline-hiddendata-[disabled]→data-disabledThis maintains consistency across all dropdown menu components.
Also applies to: 130-130
ui/src/components/buttons/BaseButton/index.tsx (2)
8-8: Update to Tailwind v4 outline class nameChanged
focus-visible:outline-nonetofocus-visible:outline-hiddento conform to Tailwind CSS v4's new class naming conventions.
12-12:✅ Verification successful
Updated shadow utility class
Changed from
shadowtoshadow-smwhich could be related to changes in Tailwind CSS v4's shadow utility definitions. This ensures consistent elevation appearance across the UI.
🌐 Web query:
How have shadow utilities changed in Tailwind CSS v4?💡 Result:
Tailwind CSS v4.0 introduces several key changes to shadow utilities, focusing on consistency, new features, and improved defaults. Here's a breakdown of the most significant updates:
Renamed Shadow Scales
The default shadow utilities have been renamed to include an
xs(extra small) size and adjust existing scales for better consistency:
shadow-sm→shadow-xsshadow→shadow-sm- Similar changes apply to
drop-shadowutilities:
drop-shadow-sm→drop-shadow-xsdrop-shadow→drop-shadow-sm[1][6][9]New Inset Shadow Utilities
v4.0 adds dedicated utilities for inner shadows:
<div class="inset-shadow-xs">...</div> <div class="inset-shadow-sm">...</div>These allow layered inset shadows without custom CSS, supporting up to four layers[3][9].
Outline Changes Affecting Shadows
outline-none→outline-hidden
Now properly hides outlines in forced colors mode for accessibility- New
outline-noneutility actually setsoutline-style: none
Requires updating existing code using outline utilities[6][8]Default Behavior Updates
- Ring utilities: Default width changed from 3px to 1px
<!-- v3 --> <div class="ring">...</div> <!-- v4 --> <div class="ring-3">...</div>- Shadow colors: Now use CSS variables for better customization
Example:shadow-slate-400maps to--color-slate-400[9]Migration Tips
Use the official upgrade tool:
npx @tailwindcss/upgrade@nextAutomatically updates shadow utilities in your project[1][6][11]
Manual updates:
- Replace
shadow-smwithshadow-xs- Change
outline-nonetooutline-hiddenwhere accessibility is a concern[6][7]These changes align shadow utilities with Tailwind's updated design system while introducing more flexible styling options. The new inset shadows and improved variable-based color system provide enhanced creative control while maintaining performance[3][4][6].
Citations:
- 1: https://dev.to/kasenda/whats-new-and-migration-guide-tailwind-css-v40-3kag
- 2: https://v3.tailwindcss.com/docs/upgrade-guide
- 3: https://tailwindcss.com/blog/tailwindcss-v4
- 4: https://www.elightwalk.com/blog/tailwind-css-v4
- 5: https://daily.dev/blog/tailwind-css-40-everything-you-need-to-know-in-one-place
- 6: https://tailwindcss.com/docs/upgrade-guide
- 7: https://forum.devtalk.com/t/agile-web-development-with-rails-8-tailwind-4-minor-breaking-changes-whole-book-beta-3/186378
- 8: https://tailwindcss.com/docs/styling-with-utility-classes
- 9: https://tailwindcss.com/docs/box-shadow
- 10: extend shadow to include direction e.g.. shadow-direction-size etc. tailwindlabs/tailwindcss#3590
- 11: https://www.youtube.com/watch?v=ud913ekwAOQ
Verified: Tailwind CSS v4 Shadow Utility Update
The change from
shadowtoshadow-smis correct per Tailwind CSS v4’s update, where the defaultshadowutility was renamed toshadow-smfor consistency. The updated code inui/src/components/buttons/BaseButton/index.tsxat line 12 now correctly reflects the new standard.ui/eslint.config.mjs (1)
12-31:✅ Verification successful
ESLint Tailwind plugin configuration has been correctly commented out
This aligns with the PR's objective to migrate from Tailwind CSS 3.4 to 4.0. As mentioned in the PR description,
eslint-plugin-tailwindcssdoesn't currently support Tailwind CSS v4, so disabling this configuration is appropriate.
🌐 Web query:
Does eslint-plugin-tailwindcss support Tailwind CSS v4 yet?💡 Result:
As of March 2025, eslint-plugin-tailwindcss (v3.18.0) does not yet fully support Tailwind CSS v4.0, though initial compatibility work is underway:
Open Feature Request:
A GitHub issue requesting Tailwind v4 support remains open since January 2025, with ongoing community discussion about implementation challenges[5][10].Known Compatibility Issues:
- The plugin struggles with Tailwind v4's new CSS-first configuration syntax[1], which replaces the traditional
tailwind.config.jsfile.- Rules like
no-custom-classnamemay conflict with v4's new CSS variable system for theme customization[1][5].Workarounds:
Some users report partial success by:// Example .eslintrc.js override for v4 module.exports = { rules: { 'tailwindcss/no-custom-classname': 'off' } }This disables problematic rules until official support arrives[5][7].
Developers should monitor the plugin's GitHub repository for updates, as maintainers have indicated v4 compatibility will require significant refactoring[10]. The Tailwind team recommends using their official Prettier plugin for class sorting in v4 projects as an interim solution[6].
Citations:
- 1: https://tailwindcss.com/blog/tailwindcss-v4
- 2: https://www.npmjs.com/package/@types/eslint-plugin-tailwindcss
- 3: https://discourse.roots.io/t/tailwind-config-js-and-require-vs-import-esm/27914
- 4: https://github.com/francoismassart/eslint-plugin-tailwindcss/releases
- 5: https://github.com/francoismassart/eslint-plugin-tailwindcss/issues
- 6: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
- 7: https://www.npmjs.com/package/eslint-plugin-tailwindcss
- 8: https://unpkg.com/[email protected]/
- 9: https://classic.yarnpkg.com/en/package/eslint-plugin-tailwind
- 10: [Feature request] Support Tailwind 4 francoismassart/eslint-plugin-tailwindcss#325
Configuration Correctly Disabled for Tailwind CSS v4 Migration
The commented-out
eslint-plugin-tailwindcssconfiguration inui/eslint.config.mjsis appropriate. As of March 2025, eslint-plugin-tailwindcss v3.18.0 does not fully support Tailwind CSS v4, so disabling the rule (includingtailwindcss/no-custom-classname) is the right approach for this migration. Please continue to monitor the plugin’s GitHub repository for updates on v4 compatibility.ui/src/components/Toast/index.tsx (3)
19-19: Correct z-index syntax update for Tailwind v4The change from arbitrary value
z-[100]to the standard Tailwind utility classz-100follows Tailwind CSS v4's convention for z-index values.
67-67: Updated focus and hover state syntax for Tailwind v4The changes from
focus:outline-nonetofocus:outline-hiddenand updates to the group hover selectors align with Tailwind CSS v4's syntax requirements.
82-82: Updated focus and group hover syntax for Tailwind v4Similar to the previous change, this update properly implements Tailwind CSS v4's syntax for focus states and group hover modifiers.
ui/src/components/ContextMenu/index.tsx (4)
34-34: Updated focus styling for Tailwind v4Changed from
outline-nonetooutline-hiddento conform with Tailwind CSS v4 naming conventions.
86-86: Updated data attribute and focus syntax for Tailwind v4Changed from bracket notation
data-[disabled]:pointer-events-noneto the new Tailwind v4 syntaxdata-disabled:pointer-events-noneand updated the focus style.
102-102: Updated data attribute and focus styling for CheckboxItemSimilar to previous changes, properly updated the selectors for data attributes and focus states to match Tailwind CSS v4 syntax.
125-125: Updated data attribute and focus styling for RadioItemConsistent with the pattern in other components, updated the data attribute selectors and focus states to conform with Tailwind CSS v4 syntax.
ui/src/lib/reactFlow/nodeTypes/GeneralNode/components/CustomHandle/Handles.tsx (2)
18-18: Updated z-index notation for Tailwind v4Changed from arbitrary value
z-[1001]to standard Tailwind utility classz-1001, conforming to Tailwind CSS v4 syntax.
26-26: Updated z-index notation for Tailwind v4Similar to the previous change, updated from arbitrary value
z-[1001]to standard utility classz-1001.ui/src/index.css (10)
1-3: Tailwind Import & Config Directive Update
The updated directives now use@importfor Tailwind and introduce the@configdirective to load the configuration from'../tailwind.config.ts'. This aligns with Tailwind CSS v4 requirements. Please ensure your build pipeline and PostCSS processing recognize the new@configdirective.
5-12: Clear Documentation on Border Color Changes
The comment block clearly explains that Tailwind CSS v4 now defaults the border color tocurrentColorand details the compatibility styles added to mimic Tailwind v3 behavior. This is helpful for future maintenance.
14-21: Utility: no-scrollbar Implementation
The new@utility no-scrollbarblock correctly uses nested selectors to hide scrollbars across different browsers. Verify on all target browsers that the scrollbars are consistently hidden.
23-30: Global Styles in Utilities Layer
The addition of global styles (such as setting thefont-familyandfont-feature-settings) inside the@layer utilitiesis a neat way to centralize these definitions. This approach enhances consistency across the UI.
108-113: Button & Role Button Cursor Styling
The styles inside this@layer baseblock set a pointer cursor for buttons and elements withrole="button"—a straightforward and effective approach to ensure consistent interactive behavior.
115-123: Global Application of Utility Styles
Applying theno-scrollbarutility to all elements and setting the body’s background and text colors using@applyis efficient. Verify that the utility classes (bg-backgroundandtext-foreground) resolve as expected from your Tailwind configuration.
164-180: Active Node Border Animation
The keyframes forcycleActiveColorsBorderusergba(var(--...))syntax correctly for transitioning border colors. Ensure that the custom properties (--primary,--success,--warning,--destructive) are consistently defined elsewhere so that these animations render as intended.
224-235: Queued Node Background Animation
ThecycleColorskeyframes for the background animation utilizergba(var(--foreground))andrgba(var(--primary))appropriately. Confirm that these transitions yield the desired visual effects across different browsers and in various UI contexts.
237-248: Queued Node Border Animation
The keyframes forcycleColorsBorderare implemented to smoothly animate border colors using CSS variables withrgba. This is a clear and effective approach; no changes are needed here.
145-161:❓ Verification inconclusive
Critical: Unknown
theme()Function in Keyframes
Within the keyframes forcycleActiveColors, the usage of thetheme()function (at lines 147, 150, 153, 156, and 159) is flagged by static analysis as an unknown function. Since the linter does not recognize this function, please verify if your PostCSS/Tailwind setup preprocesses these calls correctly. Otherwise, consider replacing them with a supported alternative. For example, you might use direct CSS with the corresponding CSS custom properties:- background-color: theme("colors.primary.DEFAULT"); + background-color: rgba(var(--primary), 1);- background-color: theme("colors.success"); + background-color: rgba(var(--success), 1);- background-color: theme("colors.warning.DEFAULT"); + background-color: rgba(var(--warning), 1);- background-color: theme("colors.destructive.DEFAULT"); + background-color: rgba(var(--destructive), 1);- background-color: theme("colors.primary.DEFAULT"); + background-color: rgba(var(--primary), 1);Review the Tailwind CSS v4 documentation to confirm the preferred method for referencing theme colors within CSS keyframes.
Action Needed: Verify Tailwind’s Processing of
theme()in Keyframes
The keyframes forcycleActiveColors(lines 147, 150, 153, 156, and 159 inui/src/index.css) use thetheme()function, which the linter flags as unknown. Please verify that your PostCSS/Tailwind setup is indeed configured to transform these calls within CSS keyframes. If your build process isn’t handling these correctly, update the keyframes to use direct CSS custom properties instead—for example:- background-color: theme("colors.primary.DEFAULT"); + background-color: rgba(var(--primary), 1);- background-color: theme("colors.success"); + background-color: rgba(var(--success), 1);- background-color: theme("colors.warning.DEFAULT"); + background-color: rgba(var(--warning), 1);- background-color: theme("colors.destructive.DEFAULT"); + background-color: rgba(var(--destructive), 1);- background-color: theme("colors.primary.DEFAULT"); + background-color: rgba(var(--primary), 1);Review the Tailwind CSS v4 documentation to ensure you’re using the recommended method for referencing theme colors in animations.
🧰 Tools
🪛 Biome (1.9.4)
[error] 147-147: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 150-150: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 153-153: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 156-156: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 159-159: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
ui/src/index.css
Outdated
| /* | ||
| The default border color has changed to `currentColor` in Tailwind CSS v4, | ||
| so we've added these compatibility styles to make sure everything still | ||
| looks the same as it did with Tailwind CSS v3. | ||
| If we ever want to remove these styles, we need to add an explicit border | ||
| color utility to any element that depends on these defaults. | ||
| */ |
There was a problem hiding this comment.
Not sure we need this in the code itself
There was a problem hiding this comment.
Ahh yeah I think we can remove that. That comment appeared after the migration. I believe they added it in and I was unsure whether we should keep it or not as we are doing the old way of the border.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ui/src/index.css (2)
5-12: Review Custom Utility:no-scrollbar
The custom utility defined from lines 5 to 12 provides cross-browser styles to hide scrollbars. This is a useful addition for cleaner UI elements. Double-check that the@utilitydirective is supported in Tailwind CSS v4 and that these rules behave consistently across all target browsers.
24-24: TODO Reminder: Light Mode Colors
The comment at line 24 indicates that light mode colors still need fixing and enabling. It would be beneficial to track this task to ensure both dark and light modes are properly supported.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ui/src/index.css(4 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
ui/src/index.css
[error] 138-138: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 141-141: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 144-144: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 147-147: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 150-150: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: ci
🔇 Additional comments (10)
ui/src/index.css (10)
1-1: Confirm Tailwind Import Syntax
The@import "tailwindcss";statement at line 1 correctly includes Tailwind CSS. Ensure that your build pipeline processes this import as expected.
3-3: Verify Usage of the@configDirective
The new@config '../tailwind.config.ts';directive at line 3 is being used to load the Tailwind configuration. Please confirm that this syntax is supported in Tailwind CSS v4 and that your PostCSS (or equivalent) setup can correctly interpret it.
14-21: Global Styling in the Utilities Layer
Moving the:rootfont definitions and font-feature settings into the@layer utilitiesblock (lines 14–21) is a clean approach to enforce global typography settings. Please verify that the cascade order remains as intended and that these styles integrate smoothly with your component-specific styles.
88-97: Legacy Fallback Styles from Tailwind 3
The block from lines 88 to 97 reintroduces base styles (e.g. settingborder-color: #3f3f3f) to reflect previous Tailwind 3 defaults. Given that you’re migrating to Tailwind CSS v4, please confirm whether these legacy styles remain necessary. Previous feedback noted questions about their need, so it might be worth revisiting this implementation.
99-104: Pointer Cursor for Interactive Elements
The block from lines 99 to 104 ensures that buttons and elements withrole="button"havecursor: pointer;. This improves user feedback on interactivity. The approach here is straightforward and correctly implemented.
106-114: Global Application of Utility and Base Styles
In the block from lines 106 to 114, the use of@apply no-scrollbar;on all elements and applyingbg-backgroundandtext-foregroundto the<body>are effective techniques. Please verify that these global applications do not inadvertently affect components that require customized scroll behavior or distinct background/text colors.
154-171: Dynamic Border Colors Keyframes
The@keyframes cycleActiveColorsBorderblock (lines 154–171) employsrgba(var(--color))to transition border colors dynamically. This implementation appears consistent and should yield smooth transitions.
215-226: Queued Node Background Animation
The keyframes defined in thecycleColorsblock (lines 215–226) usergba(var(--foreground))andrgba(var(--primary))for background transitions. The approach is concise; just verify that the rendered colors meet the design requirements across browsers.
228-239: Queued Node Border Animation Consistency
The@keyframes cycleColorsBorderblock (lines 228–239) handles border-color transitions with CSS variables, mirroring the approach used for backgrounds. This consistency is commendable—please ensure that the visual output aligns with the overall UI design.
138-150:❓ Verification inconclusive
Address
theme()Function in Keyframes
Within the@keyframes cycleActiveColorsblock (lines 137–152), the background colors are set usingtheme("colors.xxx")at lines 138, 141, 144, 147, and 150. Static analysis tools flag these as unknown functions. Confirm that these calls are properly processed by your Tailwind/PostCSS setup for Tailwind CSS v4. If not, consider replacing them with CSS custom properties (e.g., usingvar(--primary)) or another supported method to ensure compatibility.
Verify Tailwind/PostCSS Handling of
theme()in KeyframesPlease confirm that your Tailwind/PostCSS setup (Tailwind CSS v4) properly transforms the
theme()calls within the@keyframes cycleActiveColorsblock (currently defined inui/src/index.css, lines 138–150). Static analysis flags these as unknown functions, which may indicate that they aren’t processed as expected in this context. If the configuration isn’t handling these dynamic theme references in CSS animations, consider refactoring to use CSS custom properties (for example, replace withvar(--primary),var(--success), etc.) to ensure browser compatibility.
- File:
ui/src/index.css- Location: Lines 138–150
- Action: Verify Tailwind/PostCSS build settings; if issues persist, refactor the keyframes to use supported CSS variable syntax.
🧰 Tools
🪛 Biome (1.9.4)
[error] 138-138: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 141-141: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 144-144: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 147-147: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 150-150: Unexpected unknown function: theme
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
Overview
Tailwind Migration PR from 3.4 > 4
What I've done
Implemented migration from 3.4 > 4 for tailwind as this dependency has not been updated in some time.
What I haven't done
How I tested
Screenshot
Which point I want you to review particularly
Memo
Important to note that
eslint-plugin-tailwindcssdoes not support Tailwind V4.See here
Summary by CodeRabbit
New Features
Style
Chores