Skip to main content

Documentation Index

Fetch the complete documentation index at: https://extension.js.org/llms.txt

Use this file to discover all available pages before exploring further.

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

CapabilityWhat it gives you
Multi-surface stylingReuse utility classes across extension pages and content scripts
PostCSS-based integrationKeep Tailwind in the same CSS transform pipeline as the rest of your project
Version flexibilitySupport Tailwind v3 and Tailwind v4 plugin patterns
Template onboardingStart from ready-made setups and adapt incrementally

​
Template examples

Use this template when you want a complete Tailwind setup in a real extension UI surface. sidebar-shadcn screenshot 
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 that use Tailwind classes.

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

​
Next steps

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