1559: Can't resolve 'tailwindcss/version.js'

[SutuSebastian]

Task

Changes

• [ ]

Result

Before

After

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e7f5931a10546ee8fab299e35e159f99b13b4a19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
flowbite-react	Minor

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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 22, 2025 9:34am
flowbite-react-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 22, 2025 9:34am

[coderabbitai[bot]]

"""

Walkthrough

This update removes the flowbite-react patch CLI command and all related patching logic, introducing a new self-managing configuration and initialization system for Flowbite React. The .flowbite-react/config.json and .gitignore files are now auto-managed, and a new init.(jsx|tsx) file is generated to synchronize configuration with the React runtime via a ThemeInit component. Documentation, CLI commands, and schema definitions are updated to require and describe the new version config property.

Changes

File(s) / Group	Change Summary
.changeset/tricky-planes-shake.md, .github/actions/setup/action.yml, package.json	Updated documentation, Bun version, and changeset for release.
apps/storybook/.flowbite-react/config.json, apps/web/.flowbite-react/config.json	Added "version": 3 to config files.
apps/storybook/.flowbite-react/init.tsx, apps/web/.flowbite-react/init.tsx	Auto-generated ThemeInit React component for config sync.
apps/storybook/.storybook/preview.tsx, apps/web/app/layout.tsx	Imported and rendered ThemeInit at app root.
apps/storybook/tsconfig.json	Broadened file inclusion, added excludes.
apps/web/content/docs/customize/config.mdx, apps/web/content/docs/customize/dark-mode.mdx, apps/web/content/docs/customize/prefix.mdx, apps/web/content/docs/customize/custom-components.mdx, apps/web/content/docs/getting-started/cli.mdx	Updated documentation to require/use new version property and ThemeInit usage.
packages/ui/package.json	Added exports for store and store/init, removed postinstall patch script.
packages/ui/rollup.config.js	Removed Tailwind version file from externals.
packages/ui/schema.json, packages/ui/scripts/generate-metadata.ts	Updated schema to require version and set prefix default.
packages/ui/src/cli/commands/build.ts, create.ts, dev.ts, init.ts, register.ts	Refactored commands to remove patch logic, add setupInit, and improve config/component handling.
packages/ui/src/cli/commands/ensure-tailwind.ts, setup-class-list.ts, setup-gitignore.ts, setup-output-directory.ts, setup-plugin.ts, setup-register.ts, setup-tailwind.ts, setup-vscode.ts	Added/updated JSDoc comments, minor refactorings.
packages/ui/src/cli/commands/setup-config.ts	Major refactor: deep config validation, auto-fix, and migration to include version.
packages/ui/src/cli/commands/setup-init.ts	New: Generates/updates `.flowbite-react/init.(tsx
packages/ui/src/cli/consts.ts	Added constants for new init and gitignore files/paths.
packages/ui/src/cli/main.ts	Removed patch command; updated install logic.
packages/ui/src/cli/utils/build-class-list.ts	Now takes explicit version parameter.
packages/ui/src/cli/utils/get-config.ts	Delegates to new setupConfig for robust config handling.
packages/ui/src/cli/utils/get-module-package-json.ts, get-tailwind-version.ts	New: Utilities for reading package versions and Tailwind version.
packages/ui/src/helpers/get-tailwind-version.ts, packages/ui/src/cli/commands/generate-class-list.ts, patch.ts, setup-patch.ts	Deleted: Patch and Tailwind version helpers, old class list generator.
packages/ui/src/helpers/resolve-theme.ts, tailwind-merge.ts	Use runtime store for version instead of static helper.
packages/ui/src/helpers/resolve-theme.test.ts	Updated test to set version in store.
packages/ui/src/store/index.ts	Store now tracks version; added getVersion getter.
packages/ui/src/theme/config.tsx	ThemeConfig now only uses mode prop, not full store.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CLI
    participant ConfigFile
    participant InitFile
    participant ReactApp

    User->>CLI: Run init/build/dev/register
    CLI->>ConfigFile: Read/validate config.json
    CLI->>InitFile: Generate/update init.tsx (ThemeInit)
    CLI->>ReactApp: User imports ThemeInit at root
    ReactApp->>ThemeInit: Render at runtime
    ThemeInit->>Store: Sync config (dark, prefix, version)

Estimated code review effort

4 (~100 minutes)

The changes are extensive, affecting CLI commands, configuration management, runtime initialization, documentation, and package exports. There are major refactors, new files, and deletions, but the changes are mostly focused on a specific feature set and are well-scoped.

Possibly related PRs

• themesberg/flowbite-react#1556: Modifies the internal implementation of the patch command for Windows support; directly related as this PR removes the patch command entirely.

Suggested labels

:books: documentation

Suggested reviewers

• rluders
• tulup-conner
• zoltanszogyenyi

Poem

🐇
Goodbye to patch, hello to sync,
With ThemeInit, configs now link.
Versioned and tidy, our files self-heal,
Docs and schemas show the new deal.
Hop along, React, with runtime delight—
The rabbit ensures your theming is right!
🌱 """

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/ui/src/theme/mode-script.tsx

Oops! Something went wrong! :(

ESLint: 8.57.0

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/packages/ui".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "packages/ui/.eslintrc.cjs".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

packages/ui/src/theme/mode-script.test.tsx

Oops! Something went wrong! :(

ESLint: 8.57.0

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/packages/ui".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "packages/ui/.eslintrc.cjs".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cf984422d2bbeb3f0c4059db3c08ce09dd4eac82 and d4985f0a715f385f9bdb9e0dd243c6f407ef86a7.

📒 Files selected for processing (3)

• packages/ui/package.json (1 hunks)
• packages/ui/src/theme/mode-script.test.tsx (2 hunks)
• packages/ui/src/theme/mode-script.tsx (12 hunks)

🪛 Biome (1.9.4)

packages/ui/src/theme/mode-script.tsx

[error] 71-71: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/ui/src/theme/mode-script.test.tsx
• packages/ui/package.json

🧰 Additional context used

🪛 Biome (1.9.4)

packages/ui/src/theme/mode-script.tsx

[error] 71-71: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: 🧰 Build

🔇 Additional comments (5)

packages/ui/src/theme/mode-script.tsx (5)

9-9: LGTM! Clean addition of version and prefix properties.

The new version and prefix properties are well-defined with appropriate types, defaults, and documentation. The version restriction to 3 | 4 correctly reflects the supported Tailwind CSS versions.

Also applies to: 33-46

---

63-78: Good parameter forwarding with proper defaults.

The new prefix and version parameters are correctly integrated with default values and properly forwarded to getThemeModeScript. The implementation maintains backward compatibility.

---

71-71: Verify script generation security.

While the dangerouslySetInnerHTML usage here is controlled (not direct user input), ensure that getThemeModeScript properly sanitizes all parameters to prevent potential XSS vulnerabilities. The current implementation appears safe as parameters are typed and validated, but it's worth double-checking the string interpolation logic.

---

120-120: Excellent version-specific dark mode class handling.

The className computation correctly handles the differences between Tailwind CSS versions:

• Version 3: Supports prefixed dark class (${prefix}dark)
• Version 4: Uses unprefixed "dark" class regardless of prefix setting

This logic properly reflects how Tailwind CSS handles dark mode across versions.

Also applies to: 202-202

---

123-123: Comprehensive and consistent DOM class manipulation updates.

All dark mode class additions and removals have been properly updated to use the computed className variable. This ensures consistent behavior across:

• Initial theme application
• System preference change listeners
• Storage event listeners

The implementation maintains the same logic flow while supporting both Tailwind CSS versions and custom prefixes.

Also applies to: 125-125, 138-138, 140-140, 153-153, 155-155, 205-205, 207-207, 220-220, 222-222, 238-238, 240-240

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[trzcina]

Hi @SutuSebastian, I'm looking forward to this bugfix - currently, I have to manually override the missing version.js in my project by modifying the next.config.ts file. Thanks for working on the fix!

[SutuSebastian]

@trzcina just couple of migration scripts left and thats it, things looks pretty stable so far.

Btw, what does this have to do with next.config.ts? it's 100% related to patching the tailwindcss/package.json with the version.js file

[trzcina]

@trzcina just couple of migration scripts left and thats it, things looks pretty stable so far.

Btw, what does this have to do with next.config.ts? it's 100% related to patching the tailwindcss/package.json with the version.js file

Thanks for the info. What I meant is that in my project, I replaced this file by overriding the Webpack config — in my case, within the Next.js configuration.

const path = require("path");

module.exports = {
  webpack: (config) => {
    config.resolve.alias["tailwindcss/version.js"] = path.resolve(replacement );
    return config;
  },
};