themesberg · SutuSebastian · Apr 18, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025
diff --git a/apps/storybook/.flowbite-react/config.json b/apps/storybook/.flowbite-react/config.json
@@ -5,5 +5,6 @@
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 3
 }
diff --git a/apps/storybook/.storybook/preview.ts → apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.ts → apps/storybook/.storybook/preview.tsx
@@ -1,5 +1,8 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react";
+import { ThemeConfig } from "flowbite-react";
+import React from "react";
+import config from "../.flowbite-react/config.json";
 
 import "./style.css";
 
@@ -17,7 +20,13 @@ const preview: Preview = {
   },
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
+  (Story) => (
+    <>
+      <ThemeConfig version={config.version as 3 | 4} />
+      <Story />
+    </>
+  ),
   withThemeByClassName({
     themes: {
       light: "light",

diff --git a/apps/web/.flowbite-react/config.json b/apps/web/.flowbite-react/config.json
@@ -5,5 +5,6 @@
   "path": "components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 3
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,7 +1,8 @@
-import { ThemeModeScript } from "flowbite-react";
+import { ThemeConfig, ThemeModeScript } from "flowbite-react";
 import { Inter as InterFont } from "next/font/google";
 import type { Metadata, Viewport } from "next/types";
 import type { PropsWithChildren } from "react";
+import config from "~/.flowbite-react/config.json";
 import { FathomScript } from "~/components/fathom-script";
 
 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">
+        <ThemeConfig version={config.version as 3 | 4} />
         {children}
         <FathomScript />
       </body>

diff --git a/apps/web/content/docs/customize/config.mdx b/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:
@@ -123,7 +137,8 @@ Example config for automatic mode:
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 
@@ -145,7 +160,8 @@ Example config for manual mode:
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 

diff --git a/apps/web/content/docs/customize/custom-components.mdx b/apps/web/content/docs/customize/custom-components.mdx
@@ -28,7 +28,8 @@ You can customize these options in your config file `.flowbite-react/config.json
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 

diff --git a/apps/web/content/docs/customize/dark-mode.mdx b/apps/web/content/docs/customize/dark-mode.mdx
@@ -86,7 +86,8 @@ Additionally, you must disable dark mode in your build configuration by setting
   "path": "src/components",
   "prefix": "",
   "rsc": true,
-  "tsx": true
+  "tsx": true,
+  "version": 4
 }
 ```
 

diff --git a/apps/web/content/docs/customize/prefix.mdx b/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
 }
 ```
 

diff --git a/apps/web/content/docs/getting-started/cli.mdx b/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:

diff --git a/bun.lock b/bun.lock
@@ -109,7 +109,7 @@
     },
     "packages/ui": {
       "name": "flowbite-react",
-      "version": "0.11.5",
+      "version": "0.11.7",
       "bin": {
         "flowbite-react": "./dist/cli/bin.js",
       },

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -212,7 +212,6 @@
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "generate-metadata": "bun scripts/generate-metadata.ts",
-    "postinstall": "bun run src/cli/bin.ts patch",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepack": "clean-package",

diff --git a/packages/ui/schema.json b/packages/ui/schema.json
@@ -128,7 +128,8 @@
     },
     "prefix": {
       "description": "Optional prefix to apply to all Tailwind CSS classes. \nSee https://flowbite-react.com/docs/customize/config#prefix for more details.",
-      "type": "string"
+      "type": "string",
+      "default": ""
     },
     "rsc": {
       "description": "Whether to include the 'use client' directive for React Server Components. \nSee https://flowbite-react.com/docs/customize/config#rsc for more details.",
@@ -139,7 +140,13 @@
       "description": "Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation. \nSee https://flowbite-react.com/docs/customize/config#tsx for more details.",
       "type": "boolean",
       "default": true
+    },
+    "version": {
+      "description": "The version of Tailwind CSS to use. \nSee https://flowbite-react.com/docs/customize/config#version for more details.",
+      "type": "number",
+      "enum": [3, 4],
+      "default": 4
     }
   },
-  "required": ["components", "dark", "path", "prefix", "rsc", "tsx"]
+  "required": ["components", "dark", "path", "prefix", "rsc", "tsx", "version"]
 }
diff --git a/packages/ui/scripts/generate-metadata.ts b/packages/ui/scripts/generate-metadata.ts
@@ -235,6 +235,7 @@ async function generateSchema(components: string[]): Promise<void> {
           description:
             "Optional prefix to apply to all Tailwind CSS classes. \nSee https://flowbite-react.com/docs/customize/config#prefix for more details.",
           type: "string",
+          default: "",
         },
         rsc: {
           description:
@@ -248,8 +249,15 @@ async function generateSchema(components: string[]): Promise<void> {
           type: "boolean",
           default: true,
         },
+        version: {
+          description:
+            "The version of Tailwind CSS to use. \nSee https://flowbite-react.com/docs/customize/config#version for more details.",
+          type: "number",
+          enum: [3, 4],
+          default: 4,
+        },
       },
-      required: ["components", "dark", "path", "prefix", "rsc", "tsx"],
+      required: ["components", "dark", "path", "prefix", "rsc", "tsx", "version"],
     };
 
     defaultSchema.properties.components.items.enum.push(...components);

diff --git a/packages/ui/src/cli/commands/dev.ts b/packages/ui/src/cli/commands/dev.ts
@@ -46,6 +46,7 @@ export async function dev() {
       components: config.components.length ? config.components : newImportedComponents,
       dark: config.dark,
       prefix: config.prefix,
+      version: config.version,
     });
 
     if (!isEqual(classList, newClassList)) {

diff --git a/packages/ui/src/cli/commands/ensure-tailwind.ts b/packages/ui/src/cli/commands/ensure-tailwind.ts
@@ -1,10 +1,12 @@
 import { getPackageJson } from "../utils/get-package-json";
 
+/**
+ * Requires Tailwind CSS to be installed in the project.
+ */
 export async function ensureTailwind() {
   const packageJson = await getPackageJson();
-  const tailwindVersion = packageJson?.dependencies?.["tailwindcss"] || packageJson?.devDependencies?.["tailwindcss"];
 
-  if (!tailwindVersion) {
+  if (!(packageJson?.dependencies?.["tailwindcss"] || packageJson?.devDependencies?.["tailwindcss"])) {
     console.error("Install Tailwind CSS first.\n\nSee: https://tailwindcss.com/docs/installation");
     process.exit(1);
   }

diff --git a/packages/ui/src/cli/commands/help.ts b/packages/ui/src/cli/commands/help.ts
@@ -10,7 +10,6 @@ Commands:
   init                Initialize Flowbite React with config files and necessary setup
   install             Install Flowbite React using your detected package manager
   migrate             Run code transformations to update to latest patterns and APIs
-  patch               Patch Tailwind CSS to expose version number for compatibility
   register            Register Flowbite React process for development with automatic class generation
   setup <subcommand>  Setup additional features and configurations
 

diff --git a/packages/ui/src/cli/commands/init.ts b/packages/ui/src/cli/commands/init.ts
@@ -1,56 +1,28 @@
 import { ensureTailwind } from "./ensure-tailwind";
-import { installFlowbiteReact } from "./install";
-import { patchTailwind } from "./patch";
+import { installPackage } from "./install";
 import { setupClassList } from "./setup-class-list";
 import { setupConfig } from "./setup-config";
 import { setupGitIgnore } from "./setup-gitignore";
 import { setupOutputDirectory } from "./setup-output-directory";
-import { setupPatch } from "./setup-patch";
 import { setupPlugin } from "./setup-plugin";
 import { setupRegister } from "./setup-register";
 import { setupTailwind } from "./setup-tailwind";
 import { setupVSCode } from "./setup-vscode";
 
 export async function init() {
   try {
-    // require `tailwindcss`
     await ensureTailwind();
-
-    // patch `tailwindcss`
-    await patchTailwind();
-
-    // install `flowbite-react`
-    await installFlowbiteReact();
-
-    // setup patch script in `package.json`
-    await setupPatch();
-
-    // setup `tailwindcss`
-    await setupTailwind();
-
-    // setup `.flowbite-react` directory
+    await installPackage();
     await setupOutputDirectory();
-
-    // setup `.flowbite-react/class-list.json` file
+    await setupGitIgnore();
     await setupClassList();
-
-    // setup `.flowbite-react/config.json` file
     await setupConfig();
-
-    // setup `.flowbite-react/.gitignore` file
-    await setupGitIgnore();
-
-    // setup VSCode intellisense
     await setupVSCode();
-
-    // setup plugin based on bundler
+    await setupTailwind();
     const hasBundler = await setupPlugin();
-
     if (!hasBundler) {
-      // setup register script in `package.json`
       await setupRegister();
     }
-
     console.log("\n✅ Flowbite React has been successfully initialized!");
   } catch (error) {
     console.error("An error occurred during initialization:", error);

diff --git a/packages/ui/src/cli/commands/install.ts b/packages/ui/src/cli/commands/install.ts
@@ -3,11 +3,15 @@ import { detect } from "package-manager-detector/detect";
 import { execCommand } from "../utils/exec-command";
 import { getPackageJson } from "../utils/get-package-json";
 
-export async function installFlowbiteReact() {
+/**
+ * Installs `flowbite-react` package using the detected package manager.
+ */
+export async function installPackage() {
   try {
     const packageJson = await getPackageJson();
 
     if (packageJson.dependencies?.["flowbite-react"] || packageJson.devDependencies?.["flowbite-react"]) {
+      // TODO: prompt to bump the version to latest
       return;
     }