diff --git a/examples/react-antd-tailwindcss/.gitignore b/examples/react-antd-tailwindcss/.gitignore new file mode 100644 index 0000000..a256953 --- /dev/null +++ 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 new file mode 100644 index 0000000..998cb2f --- /dev/null +++ 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 + + + + + + + + + + ``` + + Now you can use AntD and TailwindCSS together throughout your project. \ No newline at end of file diff --git a/examples/react-antd-tailwindcss/assets/react.svg b/examples/react-antd-tailwindcss/assets/react.svg new file mode 100644 index 0000000..8e0e0f1 --- /dev/null +++ b/examples/react-antd-tailwindcss/assets/react.svg @@ -0,0 +1 @@ + diff --git a/examples/react-antd-tailwindcss/assets/tailwind.css b/examples/react-antd-tailwindcss/assets/tailwind.css new file mode 100644 index 0000000..084d81b --- /dev/null +++ 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 *)); \ No newline at end of file diff --git a/examples/react-antd-tailwindcss/entrypoints/content/index.tsx b/examples/react-antd-tailwindcss/entrypoints/content/index.tsx new file mode 100644 index 0000000..26f6b9f --- /dev/null +++ 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( + + + + ); + + return root; + }, + }); + + ui.autoMount(); + }, +}); \ No newline at end of file diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/App.tsx b/examples/react-antd-tailwindcss/entrypoints/popup/App.tsx new file mode 100644 index 0000000..162d7bc --- /dev/null +++ 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 ( +
+
+ + WXT logo + + + React logo + + + Antd logo + +
+ +

+ WXT + React + Antd +

+ +
+ +

+ Edit src/App.tsx and save to test HMR +

+
+ +

+ Click on the WXT and React logos to learn more +

+
+ ); +} + +export default App; diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/index.html b/examples/react-antd-tailwindcss/entrypoints/popup/index.html new file mode 100644 index 0000000..ed4cb94 --- /dev/null +++ b/examples/react-antd-tailwindcss/entrypoints/popup/index.html @@ -0,0 +1,13 @@ + + + + + + Default Popup Title + + + +
+ + + diff --git a/examples/react-antd-tailwindcss/entrypoints/popup/main.tsx b/examples/react-antd-tailwindcss/entrypoints/popup/main.tsx new file mode 100644 index 0000000..d19ff5c --- /dev/null +++ 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( + + + + + , +); diff --git a/examples/react-antd-tailwindcss/package.json b/examples/react-antd-tailwindcss/package.json new file mode 100644 index 0000000..afd50d6 --- /dev/null +++ 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 new file mode 100644 index 0000000..3762013 --- /dev/null +++ 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 ( + + + {children} + + + ); +}; \ No newline at end of file diff --git a/examples/react-antd-tailwindcss/public/antd.svg b/examples/react-antd-tailwindcss/public/antd.svg new file mode 100644 index 0000000..e9f8c2a --- /dev/null +++ b/examples/react-antd-tailwindcss/public/antd.svg @@ -0,0 +1,43 @@ + + + + Group 28 Copy 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/react-antd-tailwindcss/public/icon/128.png b/examples/react-antd-tailwindcss/public/icon/128.png new file mode 100644 index 0000000..9e35d13 Binary files /dev/null and b/examples/react-antd-tailwindcss/public/icon/128.png differ diff --git a/examples/react-antd-tailwindcss/public/icon/16.png b/examples/react-antd-tailwindcss/public/icon/16.png new file mode 100644 index 0000000..cd09f8c Binary files /dev/null and b/examples/react-antd-tailwindcss/public/icon/16.png differ diff --git a/examples/react-antd-tailwindcss/public/icon/32.png b/examples/react-antd-tailwindcss/public/icon/32.png new file mode 100644 index 0000000..f51ce1b Binary files /dev/null and b/examples/react-antd-tailwindcss/public/icon/32.png differ diff --git a/examples/react-antd-tailwindcss/public/icon/48.png b/examples/react-antd-tailwindcss/public/icon/48.png new file mode 100644 index 0000000..cb7a449 Binary files /dev/null and b/examples/react-antd-tailwindcss/public/icon/48.png differ diff --git a/examples/react-antd-tailwindcss/public/icon/96.png b/examples/react-antd-tailwindcss/public/icon/96.png new file mode 100644 index 0000000..c28ad52 Binary files /dev/null and b/examples/react-antd-tailwindcss/public/icon/96.png differ diff --git a/examples/react-antd-tailwindcss/public/wxt.svg b/examples/react-antd-tailwindcss/public/wxt.svg new file mode 100644 index 0000000..0e76320 --- /dev/null +++ b/examples/react-antd-tailwindcss/public/wxt.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/examples/react-antd-tailwindcss/tsconfig.json b/examples/react-antd-tailwindcss/tsconfig.json new file mode 100644 index 0000000..c0790a5 --- /dev/null +++ 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 new file mode 100644 index 0000000..581e27f --- /dev/null +++ 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()], + }), +});