Skip to main content
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 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.