Tailwind CSS in browser extensions

​

When Tailwind CSS is a good fit

• You need fast UI iteration across multiple extension surfaces.
• You prefer utility-first styling with shared tokens.
• You want consistent styling patterns across page and content-script entries.

​

Tailwind capabilities

​

Template examples

​

Sidebar + Tailwind + shadcn/ui

npx extension@latest create my-extension --template=sidebar-shadcn

pnpx extension@latest create my-extension --template=sidebar-shadcn

yarn dlx extension@latest create my-extension --template=sidebar-shadcn

bunx extension@latest create my-extension --template=sidebar-shadcn

deno run -A npm:extension@latest create my-extension --template=sidebar-shadcn

​

Usage with an existing extension

​

Installation

npm install -D tailwindcss @tailwindcss/postcss postcss

pnpm install -D tailwindcss @tailwindcss/postcss postcss

yarn add -D tailwindcss @tailwindcss/postcss postcss

bun add --dev tailwindcss @tailwindcss/postcss postcss

deno add npm:tailwindcss npm:@tailwindcss/postcss npm:postcss

​

Configuration

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

​

Tailwind v4 vs v3 quick setup

// Tailwind v4 postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

// Tailwind v3 postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

​

Tailwind content paths (v3 style)

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./pages/**/*.{html,js,ts,jsx,tsx,mdx}",
    "./scripts/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

​

Usage

​

Create the global CSS file

/* styles/globals.css */
@import "tailwindcss";

​

In a page script (popup/options/new-tab)

import "./styles/globals.css";

export default function MyNewTabPage() {
  return <h1 className="text-4xl font-bold">Hello, Extension.</h1>;
}

​

In a content script

import "./styles/globals.css";

console.log("Tailwind styles loaded for content script");

​

Body fonts on extension pages

@import "tailwindcss";

:root body {
  font-family: "Inter", sans-serif;
}

​

Best practices

• Keep Tailwind source imports in shared style entry files (styles/globals.css).
• Ensure your content scanning includes pages/, scripts/, and src/ when relevant.
• In monorepos, verify Tailwind content paths resolve from the extension project root.
• Use templates when possible to avoid configuration drift between PostCSS and Tailwind versions.

​

Next steps

• Configure PostCSS for additional CSS transforms.
• Ensure your CSS follows best practices with Stylelint.