tailwind-impl-build-postcss-cli

name	tailwind-impl-build-postcss-cli
description	Use when wiring Tailwind CSS into a non-Vite build : the PostCSS plugin (Next.js, Remix, Astro pre-Vite, Nuxt v3, Webpack, Rollup, esbuild, Parcel, Laravel Mix, Symfony Encore, any postcss.config.js consumer), or the standalone CLI binary for Rails, Laravel Blade, Django, PHP, Go, Rust, Elixir, .NET, or any non-Node project that has no JS bundler. Prevents the wrong-plugin-name trap (v4 ships @tailwindcss/postcss as a separate package, NOT tailwindcss directly), the autoprefixer-duplication trap (v4 includes Lightning CSS so adding autoprefixer in postcss.config breaks the cascade), the forgot-init trap (v3 requires npx tailwindcss init to create tailwind.config.js before content scanning works), the CLI-binary-vs-npx trap (CLI runs as npx @tailwindcss/cli in v4 but npx tailwindcss in v3), and the @tailwind-vs-@import trap (v3 uses three @tailwind directives, v4 uses one @import "tailwindcss"). Covers postcss.config.mjs/cjs/js for both versions, every CLI flag (--input/-i, --output/-o, --watch, --minify, --config, --cwd), framework-specific integration (Next.js, Astro, Remix, Nuxt, SvelteKit, plain HTML/PHP/Rails), the v3 to v4 plugin rename, standalone executable usage without Node, and the autoprefixer pairing rule (v3 needs it explicitly, v4 never needs it). Keywords: tailwind postcss, @tailwindcss/postcss, postcss config mjs, postcss config js, postcss plugin, tailwind cli, @tailwindcss/cli, npx tailwindcss, npx @tailwindcss/cli, --input flag, --output flag, --watch flag, --minify flag, -i flag, -o flag, autoprefixer tailwind, lightning css, oxide engine, tailwind without node, tailwind standalone binary, tailwind rails, tailwind laravel, tailwind django, tailwind php, tailwind go, tailwind nextjs postcss, tailwind astro postcss, tailwind nuxt, tailwind webpack, tailwind rollup, tailwind esbuild, tailwind parcel, my postcss config not working, plugin @tailwindcss/postcss not found, Cannot find module tailwindcss, tailwindcss init missing, how do I build tailwind without webpack, how to watch tailwind, how to minify tailwind output, npm install tailwind postcss, tailwind binary download, tailwind cli flags
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS PostCSS + Standalone CLI Build

Two non-Vite ways to compile Tailwind : the PostCSS plugin (drops into any bundler that runs PostCSS) and the standalone CLI (a Node script or a single binary, used when there is no bundler at all).

This skill covers BOTH Tailwind v3 and v4 because the package names, config-file shapes, and CSS entry-point syntax all differ between versions. Pick the right combination or compilation silently produces empty CSS.

Companion skills :

• tailwind-impl-build-vite : the Vite plugin path (preferred for SPAs)
• tailwind-impl-config-v3 : the v3 JS-config surface
• tailwind-impl-config-v4 : the v4 CSS-first config surface
• tailwind-core-v3-vs-v4 : every breaking change across the API
• tailwind-errors-build : when builds fail or output is empty

Quick Reference : Which Path Do You Need

Have a Vite project ?              -> tailwind-impl-build-vite
Have any other JS bundler ?         -> PostCSS plugin (this skill)
   (Webpack, Rollup, esbuild, Parcel, Laravel Mix, Encore)
Have Next.js (any version) ?        -> PostCSS plugin (this skill)
Have Remix, Nuxt, Astro (pre-v4) ?  -> PostCSS plugin (this skill)
No JS bundler at all ?              -> Standalone CLI (this skill)
   (Rails, Laravel Blade, Django, Flask, Go html/template,
    Phoenix, plain HTML, static sites)
No Node.js installed ?              -> Standalone CLI binary (this skill)

Quick Reference : Minimum v4 PostCSS Setup

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

/* src/app.css */
@import "tailwindcss";

No tailwind.config.js. No autoprefixer. No postcss-import. The v4 plugin embeds Lightning CSS, which handles vendor prefixing, @import inlining, and modern-CSS lowering internally.

Quick Reference : Minimum v3 PostCSS Setup

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init