PostCSS & Tailwind

The postcss key runs a PostCSS pipeline. It is separate from the Sass styles pipeline — use it for Tailwind CSS, Autoprefixer, or any other PostCSS plugin.

Shape

{
  "postcss": {
    "in": "src/css/main.css",
    "out": "dist/css/main.css",
    "options": {
      "plugins": ["@tailwindcss/postcss"],
      "minify": true
    }
  }
}

• in / out — input and output CSS files.
• options.plugins — array of plugin names. Each is a string, or a tuple ["name", { opts }].
• options.minify / options.justMinified — same behaviour as the other pipelines.
• Source maps — an input ending in a sourceMappingURL has its map composed through the pass and written beside the output, so a Sass output post-processed here still traces to its .scss. An input carrying no map produces none.

Pass options to a plugin with the tuple form:

{
  "postcss": {
    "in": "src/css/main.css",
    "out": "dist/css/main.css",
    "options": { "plugins": [["autoprefixer", { "grid": true }]] }
  }
}

Tailwind CSS v4

Install the deps, then your entry CSS just imports Tailwind:

@import "tailwindcss";

Config:

{
  "postcss": {
    "in": "src/css/main.css",
    "out": "dist/css/main.css",
    "options": { "plugins": ["@tailwindcss/postcss"], "minify": true }
  },
  "markup": {
    "in": "src/markup",
    "out": "dist",
    "options": { "includePaths": ["_layouts", "_partials"] }
  },
  "watch": ["src"]
}

Then use Tailwind utility classes in your markup. Tailwind v4 auto-detects content sources, so no tailwind.config.js is required.

Sass and Tailwind together

Keep them as two pipelines writing to two files: Sass compiles your .scss, PostCSS handles Tailwind independently. They don't need to chain.

If you do want PostCSS to post-process the Sass output (say, Autoprefixer over compiled Sass), point postcss.in at the Sass output file and postcss.out at a different file so the original isn't overwritten mid-build.

Next: React.