PostCSS Pipeline & Tailwind CSS Support

Poops now has a general-purpose PostCSS pipeline. Use any PostCSS plugin — including Tailwind CSS v4 — alongside or instead of the Sass pipeline.

What's new?

Poops now supports an optional postcss config key that lets you process CSS files through PostCSS with any plugins you want. The most obvious use case is Tailwind CSS, but it works with any PostCSS plugin — Autoprefixer, cssnano, postcss-preset-env, you name it.

Getting started

Install PostCSS and whatever plugins you need:

npm i -D postcss @tailwindcss/postcss tailwindcss

Add a postcss entry to your poops.json:

{
  "postcss": {
    "in": "src/css/main.css",
    "out": "dist/css/main.css",
    "options": {
      "plugins": ["@tailwindcss/postcss"],
      "minify": true
    }
  },
  "markup": {
    "in": "src/markup",
    "out": "dist",
    "site": {
      "title": "Poops + Tailwind",
      "description": "A Tailwind CSS example for Poops"
    },
    "includePaths": ["_layouts", "_partials"]
  },
  "serve": { "port": 4040, "base": "/dist" },
  "livereload": true,
  "watch": ["src"]
}

Your CSS entry file just imports Tailwind:

@import "tailwindcss";

Then use utility classes in your markup templates. Tailwind v4 auto-detects content sources, so no config file is needed.

How it works

The PostCSS pipeline runs after Styles (Sass) and Markups in the build order. This matters because PostCSS plugins like Tailwind need to scan the compiled HTML to know which utility classes are actually used.

In watch mode, PostCSS is re-triggered whenever Styles or Markups recompile — so adding a new class to a template automatically regenerates the CSS.

Plugin configuration

Plugins can be specified as simple strings or as tuples with options:

{
  "options": {
    "plugins": ["@tailwindcss/postcss", ["autoprefixer", { "grid": true }]]
  }
}

Using Sass and Tailwind together

The Sass and PostCSS pipelines are independent. If you want both, keep them writing to separate output files:

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

If you want PostCSS to post-process Sass output (e.g. add vendor prefixes with Autoprefixer), point postcss.in to the Sass output file and postcss.out to a different path — so the original Sass output is preserved for re-processing on subsequent builds.

---