Tailwind CSS#

Build extension UI surfaces quickly with utility classes across popup, options, new tab, sidebar, and content-script entries.

Extension.js integrates Tailwind through PostCSS and supports both Tailwind v3 and v4 setups.

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#

Use this template when you want a complete Tailwind setup in a real extension UI surface.

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

Repository: examples/sidebar-shadcn

Usage with an existing extension#

Installation#

Install the required dependencies:

npm install -D tailwindcss @tailwindcss/postcss postcss

Configuration#

Create postcss.config.js:

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

For Tailwind v3 projects, use tailwindcss as the PostCSS plugin and keep a tailwind.config.js content list.

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 a global stylesheet and import Tailwind:

Create the global CSS file:#

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

Import this file in entry scripts where Tailwind classes are used.

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");

Extension.js routes content-script CSS through its content-script style pipeline and emits those assets under content_scripts/.

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 config drift between PostCSS and Tailwind versions.

Next steps#

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