Skip to main content
Transform CSS consistently across extension pages and content scripts with one pipeline. PostCSS is ideal when you need plugins like Autoprefixer or modern CSS transforms. Extension.js detects PostCSS config and applies postcss-loader when needed.

​
When PostCSS is a good fit

  • You need autoprefixing or modern CSS transforms in extension styles.
  • You want one CSS transform pipeline across popup/options/sidebar/content scripts.
  • You are using Tailwind or plugin-based style processing.

​
PostCSS capabilities

CapabilityWhat it gives you
Shared CSS pipelineUse the same transforms across popup, options, new tab, and content scripts
Flexible config discoveryLoad PostCSS config from dedicated files or package.json
Tailwind compatibilityWorks with Tailwind-based setups through PostCSS plugins
Plugin-based transformsAdd tools like autoprefixer and postcss-preset-env

​
Template examples

​
Tailwind + PostCSS starter

Use this template when you want a working PostCSS setup with Tailwind and component-driven UI. sidebar-shadcn screenshot 
npx extension@latest create my-extension --template=sidebar-shadcn
Repository: examples/sidebar-shadcn

​
Detection and config files

Extension.js checks these PostCSS config files:
  • .postcssrc
  • .postcssrc.json
  • .postcssrc.yaml
  • .postcssrc.yml
  • postcss.config.mjs
  • .postcssrc.js / .postcssrc.cjs
  • postcss.config.js / postcss.config.cjs
It also recognizes postcss config in package.json.

​
Using PostCSS with an existing extension

Install PostCSS dependencies:

​
Create postcss.config.js

export default {
  plugins: {
    autoprefixer: {}
  }
}

​
Usage

Import styles normally in extension pages: 
import './styles/globals.css'
For content scripts, import the same way in your content-script entry: 
import './styles/content.css'
Extension.js applies PostCSS in both contexts; the output packaging differs (css pipeline for pages, asset pipeline for content scripts).

​
Tailwind interaction

  • Tailwind presence can trigger PostCSS setup automatically.
  • Extension.js handles both Tailwind v3 and v4, selecting plugins based on the detected version.
  • In ECMAScript Module (ESM) projects with incompatible CommonJS (CJS) PostCSS config patterns, Extension.js may bypass your config and inject compatibility plugins.

​
Best practices

  • Keep plugin chains small and explicit (for example autoprefixer, postcss-preset-env).
  • Verify config format (.mjs/.cjs) matches your project module type.
  • Keep Tailwind and PostCSS versions aligned to avoid plugin resolution mismatches.
  • Prefer shared style entry files for predictable processing across extension surfaces.

​
Next steps