chore: upgrade to tailwind v4 #360
Conversation
Sqrcz
added
🔧 enhancement
WalkthroughThis update refines the Tailwind CSS integration and streamlines theme configurations. The PostCSS setup now uses a Tailwind CSS PostCSS plugin, and both Vite and ESLint configurations have been updated accordingly. New theme customization files were added while legacy theme and Tailwind configuration files were removed. Additionally, several UI components have had their shadow-related classes adjusted, and various dependency versions were bumped in package.json. Changes
Suggested labels
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
🪧 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
CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 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: 2
🧹 Nitpick comments (5)
src/style.css (1)
1-1: Ensure Correct Import Syntax for Tailwind CSS v4.
The added line@import 'tailwindcss';is intended to integrate Tailwind CSS v4. Please verify that this import syntax aligns with Tailwind v4’s best practices. In recent versions, Tailwind often recommends using the@tailwinddirectives (e.g.,@tailwind base;,@tailwind components;,@tailwind utilities;) if that better suits your configuration.docs/.vitepress/theme/index.js (1)
1-6: Review Import Order and Theme Integration.
This file imports the default VitePress theme along with two CSS files: a custom stylesheet and the project’s main style file. Please verify that the order of imports (withcustom.cssimported beforestyle.css) correctly implements your intended CSS layering and overrides for Tailwind CSS v4.src/components/FwbModal/FwbModal.vue (1)
16-16: Confirm Consistency of Shadow Class Update.
The shadow class on the modal content has been updated fromshadowtoshadow-smto provide a subtler effect. Please ensure that this visual adjustment is consistent with the design guidelines and overall UI update under Tailwind CSS v4.docs/.vitepress/theme/custom.css (1)
9-9: Verify the Usage of the @source Rule.
The directive@source '../../../';on line 9 is non-standard in typical CSS. Confirm whether this custom at-rule is supported by your build tools or if it was intended to be replaced with a standard CSS directive.package.json (1)
51-70: Numerous dependency updates unrelated to TailwindWhile upgrading Tailwind is the primary goal, this PR includes updates to many dependencies unrelated to Tailwind (like ESLint, TypeScript, Vitest, etc). Consider splitting these into a separate dependency update PR to maintain focus.
Also applies to: 74-81
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
docs/.postcssrc.js(1 hunks)docs/.vitepress/theme/custom.css(1 hunks)docs/.vitepress/theme/index.js(1 hunks)docs/.vitepress/theme/index.ts(0 hunks)docs/.vitepress/theme/tailwind.css(0 hunks)docs/vite.config.ts(1 hunks)eslint.config.js(0 hunks)package.json(1 hunks)src/components/FwbButtonGroup/FwbButtonGroup.vue(1 hunks)src/components/FwbDropdown/composables/useDropdownClasses.ts(1 hunks)src/components/FwbFooter/FwbFooter.vue(1 hunks)src/components/FwbModal/FwbModal.vue(1 hunks)src/components/FwbToast/composables/useToastClasses.ts(1 hunks)src/style.css(1 hunks)tailwind.config.js(0 hunks)vite.config.ts(1 hunks)
💤 Files with no reviewable changes (4)
- docs/.vitepress/theme/tailwind.css
- tailwind.config.js
- docs/.vitepress/theme/index.ts
- eslint.config.js
🧰 Additional context used
🪛 Biome (1.9.4)
docs/.vitepress/theme/custom.css
[error] 6-6: expected , but instead found (
Remove (
(parse)
[error] 6-6: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 6-6: Don't use unknown media feature names.
Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.
(lint/correctness/noUnknownMediaFeatureName)
[error] 7-7: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 11-11: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🔇 Additional comments (11)
src/components/FwbToast/composables/useToastClasses.ts (1)
31-31: Toast Shadow Class Enhancement.
The default wrapper for toast components now usesshadow-sm, aligning it with other updated components for a lighter, more refined shadow. This change helps improve visual consistency.docs/.vitepress/theme/custom.css (1)
11-11:❓ Verification inconclusive
Recheck Placement of the @import for './clear.css'.
The@import './clear.css';directive on line 11 is also flagged for potential misplacement. Please ensure that all@importdirectives are located at the top of the stylesheet (aside from allowed exceptions), so that they are processed correctly.
Action: Verify
@importDirective Placement in custom.cssPlease double-check that the
@import './clear.css';directive on line 11 is positioned correctly. According to CSS best practices, all@importrules (aside from an optional@charsetrule) should appear at the very top of the stylesheet. Verify that there are no other CSS rules (beyond permissible comments or whitespace) preceding this line that could affect stylesheet processing.🧰 Tools
🪛 Biome (1.9.4)
[error] 11-11: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.(lint/correctness/noInvalidPositionAtImportRule)
docs/.postcssrc.js (1)
8-8:✅ Verification successful
Updated Tailwind CSS PostCSS integration for Tailwind v4
The change from
'tailwindcss': {}to'@tailwindcss/postcss': {}reflects the new package naming convention for Tailwind CSS v4's PostCSS integration. This is a necessary update as part of the migration to Tailwind v4.
🌐 Web query:
What is the correct PostCSS plugin for Tailwind CSS v4?💡 Result:
The error occurs because Tailwind CSS v4 requires using the separate
@tailwindcss/postcssplugin instead of the maintailwindcsspackage for PostCSS integration. Here's how to fix it:Required Steps
- Install dependencies:
npm install tailwindcss@latest @tailwindcss/postcss@latest
- Update PostCSS configuration (postcss.config.js):
module.exports = { plugins: { '@tailwindcss/postcss': {} } }
- Remove deprecated plugins from your PostCSS config:
- Delete
postcss-importandautoprefixer(now handled internally by Tailwind v4)
- Import Tailwind in your main CSS file:
@import "tailwindcss";Key Changes in v4
Aspect v3 Configuration v4 Configuration PostCSS Plugin tailwindcss: {}@tailwindcss/postcss: {}[5]Required Packages tailwindcsstailwindcss + @tailwindcss/postcss[7]CSS Imports @tailwinddirectives@import "tailwindcss"[5]Vendor Prefixing Required autoprefixerBuilt-in (no plugin needed) [5] Common Pitfalls
- Using outdated PostCSS plugin name (
tailwindcssinstead of@tailwindcss/postcss)- Forgetting to remove
autoprefixerfrom PostCSS config [5][9]- Multiple CSS files needing individual
@importstatements [10]For projects using Vite, consider switching to the official
@tailwindcss/viteplugin instead of PostCSS for better performance [7].Citations:
- 1: https://rsbuild.dev/guide/basic/tailwindcss
- 2: https://dev.to/manthanank/setting-up-tailwind-css-40-in-angular-v191-a-step-by-step-guide-258m
- 3: https://tailwindcss.com/docs/installation/using-postcss
- 4: https://tailwindcss.com/blog/tailwindcss-v4-alpha
- 5: https://tailwindcss.com/docs/upgrade-guide
- 6: https://mojoauth.com/blog/tailwind-css-v4-0-everything-you-need-to-know/
- 7: https://tailwindcss.com/blog/tailwindcss-v4
- 8: https://daily.dev/blog/tailwind-css-40-everything-you-need-to-know-in-one-place
- 9: tailwindlabs/tailwindcss#15764
- 10: https://forums.meteor.com/t/tailwindcss-4-wont-work-wihout-import-in-each-css-files/63072
- 11: tailwindlabs/tailwindcss#15735
Tailwind CSS v4 PostCSS Integration Correctly Updated
Your configuration in
docs/.postcssrc.jsnow correctly uses the@tailwindcss/postcssplugin instead of the outdatedtailwindcssentry. This change complies with Tailwind CSS v4’s updated integration requirements as outlined in the official upgrade guide. Please ensure that any deprecated plugins (likeautoprefixer) are also removed if no longer needed.src/components/FwbDropdown/composables/useDropdownClasses.ts (1)
9-9: Updated shadow utility to match Tailwind v4 design systemChanged
shadowtoshadow-smfor the dropdown content wrapper, which aligns with Tailwind v4's updated shadow utility classes. This change maintains visual consistency with other component updates in this PR.src/components/FwbFooter/FwbFooter.vue (1)
34-35: Updated shadow utilities to match Tailwind v4 design systemChanged
shadowtoshadow-smfor both the logo and default footer types, consistent with the shadow updates in other components. This ensures visual consistency across the application after upgrading to Tailwind v4.docs/vite.config.ts (1)
3-3:✅ Verification successful
Added Tailwind CSS Vite plugin integration for v4
Added the Tailwind CSS Vite plugin import and configuration, which is required for integrating Tailwind CSS v4 with Vite. This complements the PostCSS configuration changes and ensures proper processing of Tailwind utilities in the documentation build.
Also applies to: 8-10
🌐 Web query:
What is the correct Vite plugin for Tailwind CSS v4?💡 Result:
The correct Vite plugin for Tailwind CSS v4 is
@tailwindcss/vite, which replaces the previous PostCSS-based approach. Here's how to implement it:Installation & Configuration
Install dependencies:
npm install -D tailwindcss @tailwindcss/viteThis installs both Tailwind CSS v4 and its official Vite plugin[1][3][6].
Update Vite config:
// vite.config.js import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss() ] })This replaces previous PostCSS configurations[1][3][6].
Modify CSS entry file:
@import 'tailwindcss';Replace previous
@tailwinddirectives with this single import[2][3][6].Key Benefits
- No PostCSS required: Removes need for
postcss.config.jsand associated dependencies[1][2][5]- Faster builds: Leverages Vite's module graph for optimized performance[3][5]
- Simplified workflow: Automatic template detection and CSS processing[3][6]
Migration Notes
- Remove these from your project:
npm uninstall postcss autoprefixer- Delete any existing
postcss.config.jsfiles[2][4]- Update VS Code's Tailwind IntelliSense extension to pre-release version for v4 support[2][4]
The official Tailwind CSS documentation confirms this as the recommended approach for Vite integration, particularly noting significant performance improvements over the PostCSS method[3][6]. While still compatible with PostCSS, the Vite plugin implementation is now preferred for new projects[5][9].
Citations:
- 1: https://dev.to/osalumense/install-tailwind-css-v4-in-a-vue-3-vite-project-319g
- 2: https://epicweb-dev-pixel-perfect-tailwind.fly.dev/exercise/08/01/problem
- 3: https://tailwindcss.com/blog/tailwindcss-v4
- 4: https://www.epicweb.dev/workshops/pixel-perfect-figma-to-tailwind/preparing-for-tailwind-v4/integrating-tailwind-v4-with-vite/solution
- 5: https://tailwindcss.com/blog/tailwindcss-v4-alpha
- 6: https://tailwindcss.com/docs
- 7: https://www.youtube.com/watch?v=sHnG8tIYMB4
- 8: https://www.youtube.com/watch?v=RjzTBfX79Cc
- 9: tailwindlabs/tailwindcss#13204
Tailwind CSS Vite Plugin Integration Verified
The Tailwind CSS integration in
docs/vite.config.ts—specifically importing@tailwindcss/vite(lines 3 and 8-10)—is correct for Tailwind CSS v4. This implementation replaces the former PostCSS setup and follows the official approach.src/components/FwbButtonGroup/FwbButtonGroup.vue (2)
3-3: Shadow utility updated for Tailwind v4 compatibilityThe change from
shadow-smtoshadow-xsaligns with Tailwind v4's updated shadow utility classes.
11-12:✅ Verification successful
New CSS reference directive added
The
@referencedirective is a Tailwind v4 feature that references styles without duplicating them, which is more efficient than@import.
🌐 Web query:
What is the @reference directive in Tailwind CSS v4?💡 Result:
The
@referencedirective in Tailwind CSS v4.0 allows you to import stylesheets to access theme variables, custom utilities, and variants without duplicating CSS in your output. It's primarily used in component-scoped CSS (e.g., Vue/Svelte components, CSS modules) where Tailwind's configuration isn't automatically available.Key Features of
@reference1. Access to Tailwind Context
Enables@apply,@variant, and theme variables in scoped CSS by referencing your main Tailwind stylesheet:@reference "../../app.css"; .btn { @apply text-white bg-blue-500; /* Works after reference */ }2. Zero Output Duplication
Unlike regular@import,@referencedoesn't add the imported CSS to your output bundle[4][7].3. Framework Component Support
Essential for styling components in:
- Vue/Svelte
<style>blocks- CSS Modules
- Astro components[4][10]
Example Usage
<!-- Vue component --> <style> @reference "../../app.css"; .custom-card { @apply p-6 bg-background shadow-lg; color: var(--text-primary); } </style>When to Use It
Scenario Solution Using @applyin CSS ModulesRequired Accessing theme variables in JS frameworks Required Standard global CSS files Not needed The directive addresses a key v4.0 limitation where component-scoped CSS loses access to Tailwind's context by default[7][9]. For optimal performance, consider using native CSS variables directly instead of
@applywhere possible.Citations:
- 1: tailwindlabs/tailwindcss#16346
- 2: https://forum.cursor.com/t/tailwindcss-v4-and-cursorrules/46511
- 3: https://v2.tailwindcss.com/docs/functions-and-directives
- 4: https://tailwindcss.com/docs/functions-and-directives
- 5: https://daily.dev/blog/tailwind-css-40-everything-you-need-to-know-in-one-place
- 6: https://tailwindcss.ru/blog/tailwindcss-v4-alpha/
- 7: https://tailwindcss.com/docs/upgrade-guide
- 8: https://flowbite.com/blog/tailwind-v4/
- 9: https://tailwindcss.com/blog/tailwindcss-v4-alpha
- 10: https://ui.shadcn.com/docs/tailwind-v4
- 11: https://tailwindcss.com/blog/tailwindcss-v4
- 12: https://mojoauth.com/blog/tailwind-css-v4-0-everything-you-need-to-know/
- 13: https://rsbuild.dev/guide/basic/tailwindcss
Approved: New Tailwind CSS @reference Directive Implementation
The new usage of the
@referencedirective insrc/components/FwbButtonGroup/FwbButtonGroup.vue(lines 11–12) correctly leverages Tailwind CSS v4.0. It enables access to theme variables and utilities without duplicating CSS output, which is the intended purpose over using@import. No issues were noted with the implementation.vite.config.ts (1)
3-3: Tailwind v4 Vite plugin properly integratedThe addition of
@tailwindcss/viteplugin is required for Tailwind v4 compatibility with Vite. The plugin is correctly imported and added to the plugins array in the appropriate order.Also applies to: 9-12
package.json (2)
46-46: Tailwind v4 dependencies correctly updatedThe peerDependency update to Tailwind v4 and the addition of the required Tailwind v4 plugins (
@tailwindcss/postcssand@tailwindcss/vite) are appropriate for this upgrade.Also applies to: 72-73, 82-82
46-46: Tailwind listed as both dependency and peerDependencyTailwind CSS is listed as both a direct dependency (line 82) and a peerDependency (line 46). This is unusual and could cause version conflicts in consuming applications.
Consider keeping Tailwind CSS only as a peerDependency to allow consuming applications to manage their own Tailwind version, which is the typical pattern for UI framework libraries.
Also applies to: 82-82
| @import 'tailwindcss/theme.css' layer(theme) source(none); | ||
| @import 'tailwindcss/utilities.css'; |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Revisit the Positioning of @import Statements.
The static analysis hints indicate that both @import rules on lines 6–7 should be placed before other at-rules (apart from permissible ones like @charset and @layer). Consider moving these imports so they precede the custom at-rule declarations (e.g., the @custom-variant) to adhere to CSS spec requirements.
Action Required: Reorder @import Rules for CSS Spec Compliance
Based on the CSS specification and static analysis hints, please move the following imports from lines 6–7 in docs/.vitepress/theme/custom.css so that they appear before any non-permissible at-rules (for example, before any custom declarations like @custom-variant). Ensuring that all @import statements (aside from allowed ones like @charset or @layer) are declared at the top will help avoid CSS parsing issues.
@import 'tailwindcss/theme.css' layer(theme) source(none);
@import 'tailwindcss/utilities.css';
Please adjust their position accordingly and verify that the overall styling behaves as expected.
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: expected , but instead found (
Remove (
(parse)
[error] 6-6: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 6-6: Don't use unknown media feature names.
Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.
(lint/correctness/noUnknownMediaFeatureName)
[error] 7-7: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
|
|
||
| @custom-variant dark (&:where(.dark, .dark *)); | ||
|
|
||
| @import 'tailwindcss/theme.css' layer(theme) source(none); |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Fix Syntax of @import Rule on Line 6.
Static analysis reports a syntax error in the statement:
@import 'tailwindcss/theme.css' layer(theme) source(none);It appears that the parser expected a comma before the parenthesis. Please review the intended syntax—if this is an experimental feature or a Tailwind v4 update, confirm that the syntax is correct or adjust it to match the latest Tailwind and CSS specifications.
Action Required: Correct the @import Syntax on Line 6 of docs/.vitepress/theme/custom.css
The static analysis indicates that the current statement:
@import 'tailwindcss/theme.css' layer(theme) source(none);is causing a syntax error—the parser appears to expect a comma to separate the descriptors. To align with the parser’s expectations (and assuming no alternative experimental behavior is intended), please update the code as follows:
@import 'tailwindcss/theme.css' layer(theme), source(none);Ensure that this change is consistent with the latest Tailwind v4 (or experimental CSS features) specifications. If this syntax is intended to be experimental, double-check that your compiler or build tool fully supports it.
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: expected , but instead found (
Remove (
(parse)
[error] 6-6: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 6-6: Don't use unknown media feature names.
Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.
(lint/correctness/noUnknownMediaFeatureName)
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
docs/.vitepress/theme/custom.css (1)
1-12: 🛠️ Refactor suggestionCSS Import Ordering & Syntax Corrections Needed
Static analysis has flagged several issues:
- Syntax Error and Invalid Positioning: The
@importrules on lines 6, 7, and 11 are reported to be in the wrong position and use syntax which the parser does not expect (e.g., the parentheses inlayer(theme) source(none)).- Ordering Requirement: According to CSS standards, all
@importrules must precede all other style rules (aside from@charsetand@layerdeclarations).A recommended refactor is to move all
@importrules to the top of the file and then encapsulate the custom variant and source directives within the appropriate@layerblock. For instance:-/* .vitepress/theme/custom.css */ -@layer theme, base, components, utilities; -@custom-variant dark (&:where(.dark, .dark *)); -@import 'tailwindcss/theme.css' layer(theme) source(none); -@import 'tailwindcss/utilities.css'; -@source '../../../'; -@import './clear.css'; +/* .vitepress/theme/custom.css */ +@import 'tailwindcss/theme.css' layer(theme) source(none); +@import 'tailwindcss/utilities.css'; +@import './clear.css'; + +@layer theme, base, components, utilities { + @custom-variant dark (&:where(.dark, .dark *)); + @source '../../../'; +}This change should resolve the static analysis warnings by ensuring the proper ordering and syntax.
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: expected
,but instead found(Remove (
(parse)
[error] 6-6: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.(lint/correctness/noInvalidPositionAtImportRule)
[error] 6-6: Don't use unknown media feature names.
Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.(lint/correctness/noUnknownMediaFeatureName)
[error] 7-7: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.(lint/correctness/noInvalidPositionAtImportRule)
[error] 11-11: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.(lint/correctness/noInvalidPositionAtImportRule)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
docs/.postcssrc.js(1 hunks)docs/.vitepress/theme/custom.css(1 hunks)docs/.vitepress/theme/index.js(1 hunks)docs/.vitepress/theme/index.ts(0 hunks)docs/.vitepress/theme/tailwind.css(0 hunks)docs/vite.config.ts(1 hunks)eslint.config.js(0 hunks)package.json(1 hunks)src/components/FwbButtonGroup/FwbButtonGroup.vue(1 hunks)src/components/FwbDropdown/composables/useDropdownClasses.ts(1 hunks)src/components/FwbFooter/FwbFooter.vue(1 hunks)src/components/FwbModal/FwbModal.vue(1 hunks)src/components/FwbToast/composables/useToastClasses.ts(1 hunks)src/style.css(1 hunks)tailwind.config.js(0 hunks)vite.config.ts(1 hunks)
💤 Files with no reviewable changes (4)
- docs/.vitepress/theme/tailwind.css
- tailwind.config.js
- docs/.vitepress/theme/index.ts
- eslint.config.js
🧰 Additional context used
🪛 Biome (1.9.4)
docs/.vitepress/theme/custom.css
[error] 6-6: expected , but instead found (
Remove (
(parse)
[error] 6-6: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 6-6: Don't use unknown media feature names.
Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.
(lint/correctness/noUnknownMediaFeatureName)
[error] 7-7: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
[error] 11-11: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🔇 Additional comments (15)
src/style.css (1)
1-1: Tailwind CSS Import Added
The import statement for Tailwind CSS is correctly added to enable the use of Tailwind’s utility classes throughout your stylesheet.src/components/FwbModal/FwbModal.vue (1)
16-16: Consistent Shadow Class Update
Replacing the genericshadowclass withshadow-smaligns with the updated design guidelines and ensures uniformity in shadow effects across components.docs/.vitepress/theme/index.js (1)
1-5: Well-Structured Theme Imports
This file correctly imports the default VitePress theme along with the custom CSS and the main style file. The ordering ensures that the customizations incustom.cssand styles instyle.cssare applied properly.src/components/FwbToast/composables/useToastClasses.ts (1)
31-31: Unified Shadow Styling in Toast Component
Updating the default wrapper classes to includeshadow-smmaintains consistency with similar updates across other components. This change enhances the visual design coherence.docs/.postcssrc.js (1)
8-8: Updated PostCSS plugin for Tailwind CSS v4The configuration has been correctly updated to use
@tailwindcss/postcsswhich is the appropriate PostCSS plugin for Tailwind CSS v4. This change is essential for the Tailwind v4 upgrade to work properly.src/components/FwbButtonGroup/FwbButtonGroup.vue (2)
3-3: Shadow utility updated to align with Tailwind v4The shadow class has been updated from
shadow-smtoshadow-xs, which aligns with Tailwind v4's shadow utilities. This change ensures consistent shadow styling across the application.
11-12: Added CSS reference directiveThe
@referencedirective is used to reference external stylesheets without embedding them. This is a proper approach for modular CSS in the Tailwind v4 ecosystem.src/components/FwbDropdown/composables/useDropdownClasses.ts (1)
9-9: Updated shadow utility classChanged from
shadowtoshadow-smin the dropdown's default content wrapper classes. This ensures consistent shadow styling in accordance with the Tailwind v4 upgrade across all components.vite.config.ts (2)
3-3: Added Tailwind CSS Vite plugin importCorrectly imported the Tailwind CSS Vite plugin from
@tailwindcss/vite, which is necessary for integrating Tailwind v4 with the Vite build system.
9-12: Configured Tailwind CSS Vite pluginThe plugins array has been properly updated to include both the Vue plugin and the Tailwind CSS plugin. This configuration ensures that Tailwind directives are processed correctly during the build process.
docs/vite.config.ts (1)
3-3: LGTM: Proper Tailwind v4 Vite plugin integrationThe addition of
tailwindcssfrom@tailwindcss/viteand its setup in the plugins array correctly integrates Tailwind v4 with the Vite build process for the documentation site.Also applies to: 8-10
src/components/FwbFooter/FwbFooter.vue (1)
34-35: Shadow class updates for Tailwind v4 compatibilityThe changes from
shadowtoshadow-smin the footer component properly align with Tailwind v4's shadow utility classes, providing a more subtle shadow effect.package.json (3)
46-46: Tailwind peer dependency updated to v4The peer dependency has been correctly updated to require Tailwind v4, which is essential for the library's consumers to use the right version.
72-74: Added required Tailwind v4 integration packagesThe new Tailwind v4 specific packages for PostCSS and Vite integration have been properly added, which are necessary for the new plugin architecture in Tailwind v4.
51-69: Dev dependencies updatedAll development dependencies have been updated to their latest compatible versions, which is good practice when performing a major framework upgrade.
| "flowbite": "3.1.2", | ||
| "lodash-es": "^4.17.21", | ||
| "nanoid": "5.0.9", | ||
| "tailwind-merge": "2.6.0", | ||
| "tailwindcss": "^3" | ||
| "nanoid": "5.1.3", | ||
| "postcss-prefix-selector": "^2.1.0", | ||
| "tailwind-merge": "3.0.2", | ||
| "tailwindcss": "^4" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Dependency versions updated for Tailwind v4 compatibility
All related dependencies have been updated to versions compatible with Tailwind v4. Note that tailwindcss appears in both peerDependencies and dependencies, which is unusual but can be beneficial for development purposes.
🌐 Web query:
What are the best practices for listing tailwindcss in both peerDependencies and dependencies in package.json?
💡 Result:
When listing Tailwind CSS in package.json, the best practices depend on whether your package is a host-dependent library (like a plugin/component library) or a self-contained utility:
For host-dependent libraries (plugins/component libraries)
-
Use
peerDependencies
List Tailwind CSS here if your package requires the host app to provide Tailwind configuration:"peerDependencies": { "tailwindcss": ">=3.0.0" }
This ensures:
- Single Tailwind instance in the final build[3][4]
- Host app's theme/config gets inherited[3][10]
- Avoids version conflicts between multiple installations[4][8]
-
Keep version ranges wide
Use caret (^) or greater-than ranges to maximize compatibility:"tailwindcss": "^3.0.0 || ^2.0.0"
For self-contained utilities
- Use
dependencies
List Tailwind CSS here if your package:- Bundles its own styles[2][5]
- Doesn't require host app configuration[6]
"dependencies": { "tailwindcss": "^3.3.3" }
Special cases to avoid
-
Never list in both
While technically possible, this creates installation conflicts in npm 6 and confuses package managers[8]. -
Don't use
devDependencies
Unless you're publishing unbuilt source code (rare for CSS utilities).
Example scenarios
| Package Type | Dependencies | PeerDependencies |
|---|---|---|
| Tailwind plugin | ❌ | ✅ tailwindcss |
| Component library | ❌ | ✅ tailwindcss |
| CLI tool with styles | ✅ tailwindcss |
❌ |
Key considerations
- Always specify
tailwindcssin eitherdependenciesorpeerDependencies[4][6] - Warn users in documentation if Tailwind is required[3]
- Use JIT mode when possible for smaller bundles[3][7]
- Leverage CSS variables for theme integration[10]
For React component libraries, a common pattern is:
{
"peerDependencies": {
"tailwindcss": "^3.0.0",
"react": "^18.0.0"
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
}This allows development with specific Tailwind versions while letting users control the final installation[2][6].
Citations:
- 1: https://dev.to/gabrielmlinassi/tailwindcss-react-best-practices-the-clean-way-3dka
- 2: https://ryanschiang.com/rollup-js-tailwind-css
- 3: https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css
- 4: https://dev.to/icy0307/peer-dependencies-in-depth-1o3b
- 5: https://modernjs.dev/module-tools/en/guide/best-practices/use-tailwindcss
- 6: https://dev.to/tigawanna/building-and-publishing-npm-packages-with-typescript-multiple-entry-points-tailwind-tsup-and-npm-9e7
- 7: https://helloanselm.com/writings/quick-tailwindcss-production-setup
- 8: Use peerDependencies to avoid duplicate dependencies codemirror/dev#858
- 9: https://tailwindcss.com/docs/styling-with-utility-classes
- 10: https://tailwindcss.com/docs/theme
- 11: https://tailwindcss.com/docs/optimizing-for-production
- 12: https://laracasts.com/discuss/channels/elixir/how-to-properly-configure-packagejson-for-tailwind-jit
Tailwind CSS Dependency Declaration: Clarify Single Source of Truth
All dependency versions have been updated for Tailwind v4 compatibility. However, the package currently lists Tailwind CSS in both peerDependencies and dependencies. According to best practices, a package should declare Tailwind CSS in only one of these places to avoid installation conflicts (especially in npm 6) and to ensure a single, consistent instance in the final build. Consider the following based on your package type:
-
For host-dependent libraries (e.g., plugins or component libraries):
• Remove Tailwind CSS fromdependenciesand list it solely inpeerDependencieswith a wide version range (e.g.,"tailwindcss": ">=3.0.0") so that the host application supplies its configuration. -
For self-contained applications or utilities:
• Keep Tailwind CSS independencies(or consider moving the version used solely for development todevDependencies), ensuring that your package bundles its own styles.
Please review and adjust the dependency declaration as appropriate for the intended use of your package.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (9)
docs/pages/getting-started.md (9)
1-3: Clear Component Import.
The<script setup>block correctly importsFwbAlertfromflowbite-vue. Please verify that this import—appearing again later in the file—is intentionally duplicated (for demonstrating both global usage and a self-contained example) rather than being redundant.
11-11: HTML Line Break Tag Usage.
The<br>tag is used to force a line break. Consider whether standard markdown line breaks (e.g. ending a line with two spaces) might suffice in this context unless HTML is specifically preferred for consistent formatting.
31-43: Vite Plugin Configuration Update.
The configuration snippet effectively integrates the new Tailwind CSS Vite plugin using@tailwindcss/vite. For future maintainability, consider adding inline comments inside the configuration (e.g. explaining the purpose or order of each plugin).
47-50: Tailwind CSS Import Statement.
The import statement@import "tailwindcss";is used here. Please verify that this approach is compatible with Tailwind CSS v4—current best practices may favor using directives such as@tailwind base;,@tailwind components;, and@tailwind utilities;.
52-54: @reference Directive Notice.
The info box instructing users to@referencetheir main style in<style>blocks is helpful. Since@referenceis not a standard CSS directive, please ensure that it is properly supported and documented in the context of Tailwind CSS v4 and your PostCSS setup.
66-84: Flowbite Vue Configuration Update.
The updated instructions for installing Flowbite and Flowbite Vue—including the use of@import,@plugin, and@sourcedirectives instyle.css—are clear. Consider adding brief inline comments to explain the purpose of the less-common directives (@pluginand@source) for users who might be unfamiliar with them.
86-86: Refine Descriptive Language.
The phrase "build awesome interfaces" is somewhat informal. For a more professional tone, consider replacing "awesome" with a term like "robust" or "responsive."🧰 Tools
🪛 LanguageTool
[style] ~86-~86: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...ue** anywhere in your project and build awesome interfaces:<fw...(AWESOME)
94-104: Self-Contained Vue Component Example.
This Vue snippet provides a clear, self-contained example of using theFwbAlertcomponent. Note that it re-importsFwbAlerteven though a similar import appears at the top of the document; if the component is registered globally in your project, you might consider removing this local import to reduce redundancy.
20-20: Heading Level Consistency.
The heading "### Install and configure TailwindCSS" appears immediately after an h1 title, which skips a level. For better document structure and accessibility, consider changing it to an h2 (i.e. use##) so that heading levels increment sequentially.🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
20-20: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3(MD001, heading-increment)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/pages/getting-started.md(1 hunks)package.json(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🪛 LanguageTool
docs/pages/getting-started.md
[uncategorized] ~9-~9: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...of the utility-classes from Tailwind CSS and it also includes a JavaScript file that...
(COMMA_COMPOUND_SENTENCE)
[style] ~86-~86: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...ue** anywhere in your project and build awesome interfaces:
(AWESOME)
🪛 markdownlint-cli2 (0.17.2)
docs/pages/getting-started.md
20-20: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🔇 Additional comments (4)
docs/pages/getting-started.md (4)
13-18: Informational Block Clarity.
The info box advising users to ensure Node.js (v18+) is installed is clear and instructive. This addition helps set the correct environment expectations for Flowbite Vue.
25-25: Tailwind CSS Installation Command.
The commandnpm install -D tailwindcss @tailwindcss/vitecorrectly reflects the updated dependency installation for Tailwind CSS.
56-64: Vue Style Block Example.
This snippet demonstrates referencing the main stylesheet with@reference "./style.css";and using Tailwind’s@applyto compose styles. Confirm that the@referencedirective is officially supported by your Tailwind CSS v4 configuration or any custom PostCSS plugins you are using.
88-93: Clear Example Usage.
The HTML block effectively demonstrates how to use the<fwb-alert>component. The example message is clear and engaging.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
docs/pages/getting-started.md (5)
9-9: Punctuation Suggestion in Introductory TextConsider adding a comma before “and” to improve the readability of the sentence on line 9. For example:
"Flowbite is a library of components built on top of the utility-classes from Tailwind CSS, and it also includes a JavaScript file..."🧰 Tools
🪛 LanguageTool
[uncategorized] ~9-~9: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...of the utility-classes from Tailwind CSS and it also includes a JavaScript file that...(COMMA_COMPOUND_SENTENCE)
11-11: Evaluate Use of HTML<br>Using an explicit
<br>tag (line 11) for spacing in Markdown may be unnecessary. Consider relying on Markdown’s native formatting (such as blank lines) unless a specific line break is desired.
20-20: Adjust Heading Level for Consistent HierarchyThe heading "### Install and configure TailwindCSS" (line 20) skips from an
#heading to an###heading. For a smoother hierarchy, consider changing it to a level 2 heading (## Install and configure TailwindCSS).🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
20-20: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3(MD001, heading-increment)
86-86: Refine Informal Language in HeadingThe phrase “build awesome interfaces” (line 86) might be too informal for documentation. Consider using a more formal alternative (e.g., “build exceptional interfaces”) to match the overall tone of the guide.
🧰 Tools
🪛 LanguageTool
[style] ~86-~86: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...ue** anywhere in your project and build awesome interfaces:<fw...(AWESOME)
101-103: Ensure Consistency in Example Code ImportsThe example code snippet at the bottom (lines 101–103) correctly imports
FwbAlertfromflowbite-vue, which further highlights the inconsistency with the top<script setup>block. Please align both usages to avoid confusion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/pages/getting-started.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/pages/getting-started.md
[uncategorized] ~9-~9: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...of the utility-classes from Tailwind CSS and it also includes a JavaScript file that...
(COMMA_COMPOUND_SENTENCE)
[style] ~86-~86: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...ue** anywhere in your project and build awesome interfaces:
(AWESOME)
🪛 markdownlint-cli2 (0.17.2)
docs/pages/getting-started.md
20-20: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
| <script setup> | ||
| import { FwbAlert } from '../../src/index' | ||
| </script> |
There was a problem hiding this comment.
Inconsistent Import Source for FwbAlert
The <script setup> block currently imports FwbAlert from ../../src/index, whereas the later example (lines 101–103) imports it from flowbite-vue. For consistency and clarity in documentation, please update this import to use flowbite-vue.
- import { FwbAlert } from '../../src/index'
+ import { FwbAlert } from 'flowbite-vue'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <script setup> | |
| import { FwbAlert } from '../../src/index' | |
| </script> | |
| <script setup> | |
| import { FwbAlert } from 'flowbite-vue' | |
| </script> |
1 participant
TailwindCSS v4 is here!
Summary by CodeRabbit
New Features
FwbAlertcomponent and clarified Tailwind CSS installation instructions.Style
Refactor
Chore