Try using local postcss installation first in the CLI (#8270)

* Load local PostCSS package if available

* Update changelog

CHANGELOG.md

@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Only check selectors containing base apply candidates for circular dependencies ([#8222](https://github.com/tailwindlabs/tailwindcss/pull/8222))
 - Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204))
 
+### Changed
+
+- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+
 ### Added
 
 - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))

src/cli-peer-dependencies.js

@@ -1,4 +1,6 @@
-export let postcss = require('postcss')
+export function lazyPostcss() {
+  return require('postcss')
+}
 
 export function lazyAutoprefixer() {
   return require('autoprefixer')

src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { postcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
+import { lazyPostcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
 
 import chokidar from 'chokidar'
 import path from 'path'
@@ -146,6 +146,15 @@ function oneOf(...options) {
   )
 }
 
+function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
 let commands = {
   init: {
     run: init,
@@ -576,6 +585,7 @@ async function build() {
         })(),
     ].filter(Boolean)
 
+    let postcss = loadPostcss()
     let processor = postcss(plugins)
 
     function processCSS(css) {
@@ -709,6 +719,7 @@ async function build() {
       let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__')
       let copy = plugins.slice()
       copy.splice(tailwindPluginIdx, 1, tailwindPlugin)
+      let postcss = loadPostcss()
       let processor = postcss(copy)
 
       function processCSS(css) {