wxt-dev · oyzamil · Feb 22, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/examples/react-antd-tailwindcss/.gitignore b/examples/react-antd-tailwindcss/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react-antd-tailwindcss/README.md b/examples/react-antd-tailwindcss/README.md
@@ -0,0 +1,96 @@
+---
+name: React with AntD & Tailwind CSS
+description: Simple example extension using React, Tailwind CSS, and AntD components.
+---
+
+# WXT + React + AntD + Tailwind CSS
+
+This example demonstrates how to integrate React 19+, Tailwind CSS v4+, and AntD components within a WXT extension.
+
+## Installation Walkthrough
+
+1. **Initialize a new WXT project:**
+
+   Open your terminal and run the following command to create a new WXT project with the React template:
+
+   ```sh
+   pnpm dlx wxt@latest init
+   ```
+
+   The CLI will guide you through the project setup. Choose the `react` template and your preferred package manager. For this example, I use pnpm.
+
+   ```
+   WXT 0.20.6
+   ℹ Initializing new project
+   ✔ Project Directory … react-antd-tailwindcss
+   ✔ Choose a template › react
+   ✔ Package Manager › pnpm
+   ✔ Downloading template
+   ✨ WXT project created with the react template.
+   Next steps:
+     1. cd react-antd-tailwindcss
+     2. pnpm install
+   ```
+
+2. **Navigate to the project directory and install dependencies:**
+
+   ```sh
+   cd react-antd-tailwindcss
+   pnpm install
+   ```
+
+3. **Install Tailwind CSS and `@tailwindcss/vite`:**
+
+   You should follow the official Tailwind Vite installation [guide](https://tailwindcss.com/docs/installation/using-vite). As the time of creating this example, it asked to run the following command:
+
+   ```sh
+   pnpm install tailwindcss @tailwindcss/vite
+   ```
+
+4. **Configure Tailwind CSS in `wxt.config.ts`:**
+
+    To configure Tailwind CSS, modify `wxt.config.ts`. While official documentation says to change `vite.config.ts`, WXT configures Vite internally, so you need to update `wxt.config.ts` instead. This file manages the build process. To integrate Tailwind, add it as a Vite plugin within the wxt.config.ts file, as shown here:
+
+   ```ts
+   import { defineConfig } from "wxt";
+   import tailwindcss from "@tailwindcss/vite";
+   // See https://wxt.dev/api/config.html
+   export default defineConfig({
+     modules: ["@wxt-dev/module-react"],
+     vite: () => ({
+       plugins: [tailwindcss()],
+     }),
+   });
+   ```
+
+5. **Create a `tailwind.css` file:**
+
+   Create a `tailwind.css` file in your `assets` directory (or the root directory of your project if you don't have an assets dir) with the following content:
+
+   ```css
+   @import "tailwindcss";
+   ```
+
+6. **Import `tailwind.css`:**
+
+   You can now easily import the `tailwind.css` file in your React components:
+
+   ```ts
+   import "@/assets/tailwind.css"; // Adjust the path if necessary
+   ```
+
+   or you can include it directly in your `index.html` file:
+
+   ```html
+   <!doctype html>
+   <html>
+     <head>
+       <meta charset="UTF-8" />
+       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+       <link href="@/assets/tailwind.css" rel="stylesheet" />
+     </head>
+     <body></body>
+   </html>
+   ```
+
+   Now you can use AntD and TailwindCSS together throughout your project.
diff --git a/examples/react-antd-tailwindcss/assets/react.svg b/examples/react-antd-tailwindcss/assets/react.svg
diff --git a/examples/react-antd-tailwindcss/assets/tailwind.css b/examples/react-antd-tailwindcss/assets/tailwind.css
@@ -0,0 +1,7 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/examples/react-antd-tailwindcss/entrypoints/content/index.tsx b/examples/react-antd-tailwindcss/entrypoints/content/index.tsx
@@ -0,0 +1,31 @@
+
+import { ThemeProvider } from "@/provider/Theme";
+import { Button } from "antd";
+import { createRoot } from "react-dom/client";
+
+export default defineContentScript({
+  matches: ["*://*.example.com/*"],
+  cssInjectionMode: "ui",
+
+  async main(ctx) {
+    const ui = await createShadowRootUi(ctx, {
+      name: "react-antd-tailwindcss",
+      position: "inline",
+      anchor: "body",
+
+      onMount: (container, shadow) => {
+        const root = createRoot(container);
+
+        root.render(
+          <ThemeProvider cssContainer={shadow.querySelector("head") ?? shadow}>
+            <Button className="bg-green-100">Button</Button>
+          </ThemeProvider>
+        );
+
+        return root;
+      },
+    });
+
+    ui.autoMount();
+  },
+});
diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/App.tsx b/examples/react-antd-tailwindcss/entrypoints/popup/App.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import reactLogo from "@/assets/react.svg";
+import wxtLogo from "/wxt.svg";
+import antdLogo from "/antd.svg";
+import { Button } from "antd";
+
+function App() {
+	const [count, setCount] = useState(0);
+
+	return (
+		<div className="w-80 p-4 space-y-4 bg-white rounded-md shadow-md">
+			<div className="flex justify-center items-center space-x-4">
+				<a href="https://wxt.dev" target="_blank" rel="noopener noreferrer">
+					<img src={wxtLogo} className="h-8 w-auto" alt="WXT logo" />
+				</a>
+				<a href="https://react.dev" target="_blank" rel="noopener noreferrer">
+					<img src={reactLogo} className="h-8 w-auto" alt="React logo" />
+				</a>
+        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+					<img src={antdLogo} className="h-8 w-auto" alt="Antd logo" />
+				</a>
+			</div>
+
+			<h1 className="text-xl font-semibold text-center text-gray-800">
+				WXT + React + Antd
+			</h1>
+
+			<div className="bg-gray-100 p-4 rounded-md shadow-inner flex flex-col items-center">
+				<Button onClick={() => setCount((count) => count + 1)} type="primary">
+					Count is {count}
+				</Button>
+				<p className="text-sm mt-2 text-gray-600 text-center">
+					Edit <code>src/App.tsx</code> and save to test HMR
+				</p>
+			</div>
+
+        <p className="text-xs text-center text-gray-500">
+				Click on the WXT and React logos to learn more
+			</p>
+		</div>
+	);
+}
+
+export default App;
diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/index.html b/examples/react-antd-tailwindcss/entrypoints/popup/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/main.tsx b/examples/react-antd-tailwindcss/entrypoints/popup/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "@/assets/tailwind.css";
+import { ThemeProvider } from "@/provider/Theme.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<ThemeProvider>
+			<App />
+		</ThemeProvider>
+	</React.StrictMode>,
+);
diff --git a/examples/react-antd-tailwindcss/package.json b/examples/react-antd-tailwindcss/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-antd-tailwindcss",
+  "description": "manifest.json description",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "@ant-design/cssinjs": "^2.0.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "antd": "^6.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@wxt-dev/module-react": "^1.1.5",
+    "typescript": "^5.9.3",
+    "wxt": "^0.20.18"
+  }
+}
diff --git a/examples/react-antd-tailwindcss/provider/Theme.tsx b/examples/react-antd-tailwindcss/provider/Theme.tsx
@@ -0,0 +1,32 @@
+import "@/assets/tailwind.css";
+import { StyleProvider } from "@ant-design/cssinjs";
+import { ConfigProvider } from "antd";
+import type { ReactNode } from "react";
+
+type ThemeProviderProps = {
+  children?: ReactNode;
+  cssContainer?: HTMLElement | ShadowRoot;
+};
+
+export const ThemeProvider = ({
+  children,
+  cssContainer,
+}: ThemeProviderProps) => {
+  const container =
+    cssContainer ??
+    (typeof document !== "undefined" ? document.head : undefined);
+
+  return (
+    <StyleProvider container={container} layer hashPriority="high">
+      <ConfigProvider
+        theme={{
+          token: {
+            colorPrimary: "#ff000a",
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </StyleProvider>
+  );
+};
diff --git a/examples/react-antd-tailwindcss/public/antd.svg b/examples/react-antd-tailwindcss/public/antd.svg
diff --git a/examples/react-antd-tailwindcss/public/icon/128.png b/examples/react-antd-tailwindcss/public/icon/128.png
diff --git a/examples/react-antd-tailwindcss/public/icon/16.png b/examples/react-antd-tailwindcss/public/icon/16.png
diff --git a/examples/react-antd-tailwindcss/public/icon/32.png b/examples/react-antd-tailwindcss/public/icon/32.png
diff --git a/examples/react-antd-tailwindcss/public/icon/48.png b/examples/react-antd-tailwindcss/public/icon/48.png
diff --git a/examples/react-antd-tailwindcss/public/icon/96.png b/examples/react-antd-tailwindcss/public/icon/96.png
diff --git a/examples/react-antd-tailwindcss/public/wxt.svg b/examples/react-antd-tailwindcss/public/wxt.svg
diff --git a/examples/react-antd-tailwindcss/tsconfig.json b/examples/react-antd-tailwindcss/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+  }
+}
diff --git a/examples/react-antd-tailwindcss/wxt.config.ts b/examples/react-antd-tailwindcss/wxt.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "wxt";
+import tailwindcss from "@tailwindcss/vite";
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+  modules: ["@wxt-dev/module-react"],
+  vite: () => ({
+    plugins: [tailwindcss()],
+  }),
+});