fix(@astrojs/tailwind): manually load postcss config file

packages/integrations/tailwind/package.json

@@ -30,12 +30,14 @@
   "dependencies": {
     "@proload/core": "^0.3.2",
     "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14"
+    "postcss": "^8.4.14",
+    "postcss-load-config": "^4.0.1"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.0.24",
+    "vite": "^4.0.3"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.24",

packages/integrations/tailwind/src/index.ts

@@ -1,12 +1,15 @@
 import load, { resolve } from '@proload/core';
 import type { AstroIntegration } from 'astro';
+import type { CSSOptions, UserConfig } from 'vite';
 import autoprefixerPlugin from 'autoprefixer';
 import fs from 'fs/promises';
 import path from 'path';
 import tailwindPlugin, { Config as TailwindConfig } from 'tailwindcss';
 import resolveConfig from 'tailwindcss/resolveConfig.js';
 import { fileURLToPath } from 'url';
 
+type AddWatchFile = (path: string | URL) => void;
+
 function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
 	return resolveConfig({
 		theme: {
@@ -66,14 +69,46 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false)
 	}
 }
 
-function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) {
-	const postcssPlugins = [tailwindPlugin(tailwindConfig)];
+async function getPostCssConfig(
+	root: UserConfig['root'],
+	postcssInlineOptions: CSSOptions['postcss']
+) {
+	let postcssConfigResult;
+	// Check if postcss config is not inlined
+	if (!(typeof postcssInlineOptions === 'object' && postcssInlineOptions !== null)) {
+		let { default: postcssrc } = await import('postcss-load-config');
+		const searchPath = typeof postcssInlineOptions === 'string' ? postcssInlineOptions : root!;
+		try {
+			postcssConfigResult = await postcssrc({}, searchPath);
+		} catch (e) {
+			postcssConfigResult = null;
+		}
+	}
+	return postcssConfigResult;
+}
+
+async function getViteConfiguration(
+	isBuild: boolean,
+	tailwindConfig: TailwindConfig,
+	viteConfig: UserConfig
+) {
+	// We need to manually load postcss config files because when inlining the tailwind and autoprefixer plugins,
+	// that causes vite to ignore postcss config files
+	const postcssConfigResult = await getPostCssConfig(viteConfig.root, viteConfig.css?.postcss);
+
+	const postcssOptions = (postcssConfigResult && postcssConfigResult.options) || {};
+
+	const postcssPlugins =
+		postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
+	postcssPlugins.push(tailwindPlugin(tailwindConfig));
+
 	if (isBuild) {
 		postcssPlugins.push(autoprefixerPlugin());
 	}
 	return {
 		css: {
 			postcss: {
+				options: postcssOptions,
 				plugins: postcssPlugins,
 			},
 		},
@@ -131,7 +166,10 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 
 				const tailwindConfig =
 					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
-				updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) });
+
+				updateConfig({
+					vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite),
+				});
 
 				if (applyBaseStyles) {
 					// Inject the Tailwind base import