Docs
Blog
Docs
Blog

PostCSS

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

Capability What it gives you
Shared CSS pipeline Use the same transforms across popup, options, new tab, and content scripts
Flexible config discovery Load PostCSS config from dedicated files or package.json
Tailwind compatibility Works with Tailwind-based setups through PostCSS plugins
Plugin-based transforms Add 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

npm
pnpm
yarn
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:

npm
yarn
pnpm
bun
npm install -D postcss postcss-loader autoprefixer

Step 2: 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).

Video demo soon: PostCSS in pages and content scripts

Tailwind interaction

  • Tailwind presence can trigger PostCSS setup automatically.
  • Tailwind v3 and v4 are both handled, with plugin selection based on detected version.
  • In ESM projects with incompatible CJS PostCSS config patterns, Extension.js may bypass user 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

ON THIS PAGE