| name | React with Tailwind & shadcn |
|---|---|
| description | Simple example extension using React, Tailwind CSS, and shadcn UI components. |
This example demonstrates how to integrate React 19+, Tailwind CSS v4+, and shadcn UI components within a WXT extension.
-
Initialize a new WXT project:
Open your terminal and run the following command to create a new WXT project with the React template:
pnpm dlx wxt@latest init
The CLI will guide you through the project setup. Choose the
reacttemplate and your preferred package manager. For this example, I use pnpm.WXT 0.20.6 ℹ Initializing new project ✔ Project Directory … react-shadcn ✔ Choose a template › react ✔ Package Manager › pnpm ✔ Downloading template ✨ WXT project created with the react template. Next steps: 1. cd react-shadcn 2. pnpm install -
Navigate to the project directory and install dependencies:
cd react-shadcn pnpm install -
Install Tailwind CSS and
@tailwindcss/vite:You should follow the official Tailwind Vite installation guide. As the time of creating this example, it asked to run the following command:
pnpm install tailwindcss @tailwindcss/vite
-
Configure Tailwind CSS in
wxt.config.ts:To configure Tailwind CSS, modify
wxt.config.ts. While official documentation says to changevite.config.ts, WXT configures Vite internally, so you need to updatewxt.config.tsinstead. This file manages the build process. To integrate Tailwind, add it as a Vite plugin within the wxt.config.ts file, as shown here: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()], }), });
-
Create a
tailwind.cssfile:Create a
tailwind.cssfile in yourassetsdirectory (or the root directory of your project if you don't have an assets dir) with the following content:@import "tailwindcss";
-
Import
tailwind.css:You can now easily import the
tailwind.cssfile in your React components:import "@/assets/tailwind.css"; // Adjust the path if necessary
or you can include it directly in your
index.htmlfile:<!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 start styling your components with Tailwind CSS classes.
-
Install and Configure Shadcn UI:
Integrating Shadcn UI requires a few extra steps. You can choose either the manual installation or the Vite installation method. Both of them have workarounds we need to do, however this guide will use the Vite installation method.
You also need to decide whether to stick with WXT's default project structure or introduce a
src/directory to separate source code from configuration files. WXT provides documentation on adding asrc/directory here. This guide will continue without asrc/directory for simplicity. -
Configure
tsconfig.json:Before installing Shadcn UI components, you need to configure your
tsconfig.jsonfile. Add the following within thecompilerOptionssection:"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"] // or "./src/*" if using src directory } }
-
Configure
wxt.config.tsfor Alias Resolution:Update your
wxt.config.tsto include an alias for resolving paths. Make sure to install@types/nodefor thepathmodule:pnpm add -D @types/nodeimport { defineConfig } from "wxt"; import tailwindcss from "@tailwindcss/vite"; import path from "path"; // See https://wxt.dev/api/config.html export default defineConfig({ modules: ["@wxt-dev/module-react"], vite: () => ({ plugins: [tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./"), // or "./src" if using src directory }, }, }), });
-
Temporarily Add
vite.config.ts(Workaround for Shadcn CLI):The Shadcn CLI relies on detecting a
vite.config.tsfile to identify which framework to use. So before initializing the tool, we have to temporarily create avite.config.tsfile with the following content:import path from "path"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./"), // or "./src" if using src directory }, }, });
This file ensures that the Shadcn CLI correctly identifies your project as a Vite project and configures the alias. This file should be deleted after the initialization.
-
Initialize Shadcn UI:
Run the Shadcn UI initialization command:
pnpm dlx shadcn-ui@latest init
Answer the prompts in the CLI to configure Shadcn UI according to your preferences (color scheme, etc.).
-
Delete Temporary
vite.config.ts:After Shadcn UI is initialized, you can safely delete the temporary
vite.config.tsfile you created in step 10. -
Add Shadcn UI Components:
You can now add Shadcn UI components using the CLI:
pnpm dlx shadcn-ui@latest add button
This will install the button component and its dependencies. Repeat this command for any other components you wish to use.
There are some potential conflicts with WXT's recommended configuration and best practices in this setup, particularly in wxt.config.ts and tsconfig.json.
WXT advises against directly adding paths to tsconfig.json and prefers using the alias option in wxt.config.ts (see WXT documentation). However, Shadcn currently fails to resolve paths correctly if they are only defined in wxt.config.ts. There is an open issue about this in the Shadcn UI repository.
Therefore, the current approach of modifying both tsconfig.json and wxt.config.ts is a temporary workaround.
Ideally, the configuration should look like this:
// tsconfig.ts
{
"extends": "./.wxt/tsconfig.json",
"compilerOptions": {
"allowImportingTsExtensions": true,
"jsx": "react-jsx",
- "baseUrl": ".",
- "paths": {
- "@/*": ["./*"]
- }
}
}// wxt.config.ts
export default defineConfig({
modules: ["@wxt-dev/module-react"],
+ alias: {
+ "@": path.resolve(__dirname, "./"),
+ },
vite: () => ({
plugins: [tailwindcss()],
- resolve: {
- alias: {
- "@": path.resolve(__dirname, "./"),
- },
- },
}),
});However, this will not work correctly with Shadcn UI until the linked issue is resolved. Remember to monitor the linked issue in the Shadcn UI repository and update your configuration when a fix is available.
For a more in-depth guide that goes through the manual installation process, please check this detailed guide.