#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

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

yarn dlx 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

pnpm install -D tailwindcss @tailwindcss/postcss postcss

yarn add -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.