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

.changeset/tricky-planes-shake.md

@@ -0,0 +1,35 @@
+---
+"flowbite-react": minor
+---
+
+# Breaking changes
+
+- removed `flowbite-react patch` CLI command
+
+## Changes
+
+- `flowbite-react/.gitignore`, `flowbite-react/config.json` self manages, regenerates and repairs
+- new generated file `init.(jsx|tsx)` in `.flowbite-react/` directory that syncs up values from `config.json` that also are needed in React app runtime (similar to how a React context works)
+  - synced on CLI commands: `init`, `build`, `dev`, `register`
+- If you have custom configuration in `.flowbite-react/config.json` (different `dark`/`prefix`/`version` values), you must render `<ThemeInit />` at the root level of your app to sync runtime with node config values
+  - notify users to include `<ThemeInit />` at the root level if custom `dark`, `prefix`, or `version` values are detected in the configuration file
+- expose `flowbite-react/store` import path
+- check if `flowbite-react` is installed when `npx flowbite-react@latest init`
+  - bump the version to latest if below `0.11.x`
+- remove redundant `{ flag: "w" }` in `fs.writeFile`
+- update `dark-mode.md` and `prefix.md` documentation to reflect the `<ThemeInit />` changes
+- add Tailwind CSS version support in theme mode handling and fix dark theme toggle class in Tailwind CSS v4
+
+## Migration Guide
+
+1. Remove `flowbite-react patch` from your `package.json`
+
+   ```diff
+   {
+     "scripts": {
+   -   "postinstall": "flowbite-react patch"
+     }
+   }
+   ```
+
+2. Add `<ThemeInit />` (import from `.flowbite-react/init.(jsx|tsx)`) at the root level of your app if you have custom configuration in `.flowbite-react/config.json` (different `dark`/`prefix`/`version` values).

.github/actions/setup/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: Setup Bun
       uses: oven-sh/setup-bun@v2
       with:
-        bun-version: 1.2.2
+        bun-version: 1.2.18
 
     - name: Setup Node
       uses: actions/setup-node@v4

apps/storybook/.flowbite-react/config.json

@@ -1,9 +1,10 @@
 {
-  "$schema": "../../../node_modules/flowbite-react/schema.json",
+  "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": [],
   "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 3
 }

apps/storybook/.flowbite-react/init.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore-all lint: auto-generated file
+
+// This file is auto-generated by the flowbite-react CLI.
+// Do not edit this file directly.
+// Instead, edit the .flowbite-react/config.json file.
+
+import { StoreInit } from "flowbite-react/store/init";
+import React from "react";
+
+export const config = {
+  dark: true,
+  prefix: "",
+  version: 3,
+};
+
+export function ThemeInit() {
+  return <StoreInit {...config} />;
+}
+
+ThemeInit.displayName = "ThemeInit";

apps/storybook/.storybook/preview.ts → apps/storybook/.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react";
+import React from "react";
+import { ThemeInit } from "../.flowbite-react/init";
 
 import "./style.css";
 
@@ -17,7 +19,13 @@ const preview: Preview = {
   },
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
+  (Story) => (
+    <>
+      <ThemeInit />
+      <Story />
+    </>
+  ),
   withThemeByClassName({
     themes: {
       light: "light",

apps/storybook/tsconfig.json

@@ -21,5 +21,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "storybook-static"]
 }

apps/web/.flowbite-react/config.json

@@ -1,9 +1,10 @@
 {
-  "$schema": "../../../node_modules/flowbite-react/schema.json",
+  "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": [],
   "dark": true,
   "path": "components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 3
 }

apps/web/.flowbite-react/init.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore-all lint: auto-generated file
+
+// This file is auto-generated by the flowbite-react CLI.
+// Do not edit this file directly.
+// Instead, edit the .flowbite-react/config.json file.
+
+import { StoreInit } from "flowbite-react/store/init";
+import React from "react";
+
+export const config = {
+  dark: true,
+  prefix: "",
+  version: 3,
+};
+
+export function ThemeInit() {
+  return <StoreInit {...config} />;
+}
+
+ThemeInit.displayName = "ThemeInit";

apps/web/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter as InterFont } from "next/font/google";
 import type { Metadata, Viewport } from "next/types";
 import type { PropsWithChildren } from "react";
 import { FathomScript } from "~/components/fathom-script";
+import { ThemeInit } from "../.flowbite-react/init";
 
 import "~/styles/globals.css";
 
@@ -60,6 +61,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
         <ThemeModeScript />
       </head>
       <body className="bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
+        <ThemeInit />
         {children}
         <FathomScript />
       </body>

apps/web/content/docs/customize/config.mdx

@@ -40,7 +40,8 @@ The configuration file follows this JSON Schema:
     },
     "prefix": {
       "description": "Optional prefix to apply to all Tailwind CSS classes",
-      "type": "string"
+      "type": "string",
+      "default": ""
     },
     "rsc": {
       "description": "Whether to include the 'use client' directive for React Server Components",
@@ -51,9 +52,15 @@ The configuration file follows this JSON Schema:
       "description": "Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation",
       "type": "boolean",
       "default": true
+    },
+    "version": {
+      "description": "The version of Tailwind CSS to use",
+      "type": "number",
+      "enum": [3, 4],
+      "default": 4
     }
   },
-  "required": ["components", "dark", "path", "prefix", "rsc", "tsx"]
+  "required": ["components", "dark", "path", "prefix", "rsc", "tsx", "version"]
 }
 ```
 
@@ -101,6 +108,13 @@ For detailed instructions on configuring and using prefixes, see the [Prefix](/d
 - Default: `true`
 - Description: Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation. When set to `false`, components will be created with .jsx extension.
 
+#### `version`
+
+- Type: `number`
+- Options: `3`, `4`
+- Default: `4`
+- Description: The version of Tailwind CSS to use.
+
 ## Automatic Class Generation
 
 The automatic class generation system works in two modes:
@@ -120,10 +134,12 @@ Example config for automatic mode:
 {
   "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": [],
+  "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 
@@ -142,10 +158,12 @@ Example config for manual mode:
 {
   "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": ["Button", "Card", "Modal"],
+  "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 

apps/web/content/docs/customize/custom-components.mdx

@@ -25,10 +25,12 @@ You can customize these options in your config file `.flowbite-react/config.json
 {
   "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": [],
+  "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 

apps/web/content/docs/customize/dark-mode.mdx

@@ -55,28 +55,9 @@ declare const useThemeMode: () => {
 
 To completely disable dark mode class generation in your Flowbite React application, you should use both of the following methods:
 
-### 1. Using the ThemeConfig Component
+### 1. Using the Configuration File
 
-First, disable dark mode at the application level by setting the `dark` prop to `false` in the `ThemeConfig` component:
-
-```jsx
-import { ThemeConfig } from "flowbite-react";
-
-function App() {
-  return (
-    <>
-      <ThemeConfig dark={false} />
-      {/* Your application */}
-    </>
-  );
-}
-```
-
-This approach prevents the dark mode toggle functionality from working in your application's runtime.
-
-### 2. Using the Configuration File
-
-Additionally, you must disable dark mode in your build configuration by setting the `dark` property to `false` in your `.flowbite-react/config.json` file:
+First, disable dark mode in your build configuration by setting the `dark` property to `false` in your `.flowbite-react/config.json` file:
 
 ```json {4}
 {
@@ -86,13 +67,32 @@ Additionally, you must disable dark mode in your build configuration by setting
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 
 This method prevents dark mode classes from being generated during the build process, which reduces your CSS bundle size.
 
-> **Important**: For complete dark mode disabling, both methods should be used together. The ThemeConfig approach affects runtime behavior, while the config.json approach affects build-time class generation.
+### 2. Using the ThemeInit Component
+
+When you have custom configuration in your `.flowbite-react/config.json` (including disabling dark mode), you must render the `ThemeInit` component at the root level of your application to sync the runtime with your configuration:
+
+```jsx
+// src/App.tsx
+import { ThemeInit } from "../.flowbite-react/init";
+
+function App() {
+  return (
+    <>
+      <ThemeInit />
+      {/* Your application */}
+    </>
+  );
+}
+```
+
+> **Important**: The configuration file approach affects build-time class generation, while the ThemeInit component ensures your runtime behavior matches your configuration.
 
 ## Framework Integration
 

apps/web/content/docs/customize/prefix.mdx

@@ -19,7 +19,8 @@ To set a custom prefix for Flowbite React components, modify the `prefix` proper
   "path": "components",
   "prefix": "tw",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 
@@ -49,16 +50,17 @@ In Tailwind CSS v4, the prefix cannot contain special characters (like hyphens).
 
 ## Update Your React Application
 
-Next, render the `ThemeConfig` component at the **root of your app** with the same `prefix` property:
+When you have custom configuration in your `.flowbite-react/config.json` (including a custom prefix), you must render the `ThemeInit` component at the root level of your application to sync the runtime with your configuration:
 
-```tsx {1,6}
-import { ThemeConfig } from "flowbite-react";
+```tsx
+// src/App.tsx
+import { ThemeInit } from "../.flowbite-react/init";
 
 export default function App() {
   return (
     <>
-      <ThemeConfig prefix="tw" />
-      {/* ... */}
+      <ThemeInit />
+      {/* Your application */}
     </>
   );
 }

apps/web/content/docs/getting-started/cli.mdx

@@ -12,7 +12,6 @@ The Flowbite React CLI provides a comprehensive set of tools for:
 - Managing development workflows
 - Handling class generation
 - Configuring your development environment
-- Patching Tailwind CSS configurations
 - Providing help and documentation
 
 ## Installation & Setup
@@ -149,15 +148,6 @@ import { AccordionPanel } from "flowbite-react";
 <AccordionPanel>...</AccordionPanel>
 ```
 
-### `flowbite-react patch`
-
-Patches Tailwind CSS to expose its version number for compatibility detection:
-
-- Creates a JavaScript file that exports the Tailwind CSS version
-- Necessary because package.json cannot be reliably read by all bundlers
-- Makes the version accessible via `import version from "tailwindcss/version"`
-- Enables Flowbite React to adapt its behavior based on the installed Tailwind version
-
 ### `flowbite-react register`
 
 Registers the Flowbite React process for development:
@@ -232,7 +222,8 @@ The CLI creates a `.flowbite-react/config.json` file with several configuration
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 
@@ -260,6 +251,10 @@ Whether to include the `"use client"` directive for React Server Components. Def
 
 Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation. Default is `true`.
 
+#### `version`
+
+The version of Tailwind CSS to use. Default is `4`.
+
 ### VSCode Integration
 
 The CLI sets up VSCode for optimal development:

package.json

@@ -45,5 +45,5 @@
     "prettier-plugin-tailwindcss": "0.6.11",
     "turbo": "2.4.4"
   },
-  "packageManager": "[email protected].4"
+  "packageManager": "[email protected].18"
 }