#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

#Template examples

#Tailwind + PostCSS starter

Use this template when you want a working PostCSS setup with Tailwind and component-driven UI.

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

#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 install -D postcss postcss-loader autoprefixer

yarn add -D postcss postcss-loader autoprefixer

pnpm add -D postcss postcss-loader autoprefixer

bun add -D postcss postcss-loader autoprefixer

deno add -D npm:postcss npm:postcss-loader npm: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).

#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

• Configure Tailwind CSS with PostCSS.
• Add stylesheet linting with Stylelint.