Refactor tailwind integration setup (#5717)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/thick-walls-smell.md

@@ -0,0 +1,6 @@
+---
+'astro': major
+'@astrojs/tailwind': major
+---
+
+Remove `style.postcss` Astro config. Refactor tailwind integration to configure through `vite` instead. Also disables `autoprefixer` in dev.

packages/astro/src/core/config/schema.ts

@@ -30,7 +30,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		port: 3000,
 		streaming: true,
 	},
-	style: { postcss: { options: {}, plugins: [] } },
 	integrations: [],
 	markdown: {
 		drafts: false,
@@ -127,18 +126,6 @@ export const AstroConfigSchema = z.object({
 			.optional()
 			.default({})
 	),
-	style: z
-		.object({
-			postcss: z
-				.object({
-					options: z.any(),
-					plugins: z.array(z.any()),
-				})
-				.optional()
-				.default(ASTRO_CONFIG_DEFAULTS.style.postcss),
-		})
-		.optional()
-		.default({}),
 	markdown: z
 		.object({
 			drafts: z.boolean().default(false),
@@ -300,21 +287,6 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
 				.optional()
 				.default({})
 		),
-		style: z
-			.object({
-				postcss: z.preprocess(
-					(val) => resolvePostcssConfig(val, fileProtocolRoot),
-					z
-						.object({
-							options: z.any(),
-							plugins: z.array(z.any()),
-						})
-						.optional()
-						.default(ASTRO_CONFIG_DEFAULTS.style.postcss)
-				),
-			})
-			.optional()
-			.default({}),
 	}).transform((config) => {
 		// If the user changed outDir but not build.server, build.config, adjust so those
 		// are relative to the outDir, as is the expected default.

packages/astro/src/core/create-vite.ts

@@ -150,9 +150,6 @@ export async function createVite(
 				ignored: mode === 'build' ? ['**'] : undefined,
 			},
 		},
-		css: {
-			postcss: settings.config.style.postcss || {},
-		},
 		resolve: {
 			alias: [
 				{

packages/integrations/tailwind/README.md

@@ -68,6 +68,8 @@ export default defineConfig({
 
 When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
 
+[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes will work in older browsers.
+
 https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4
 
 ## Configuration

packages/integrations/tailwind/src/index.ts

@@ -66,6 +66,20 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false)
 	}
 }
 
+function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) {
+	const postcssPlugins = [tailwindPlugin(tailwindConfig)];
+	if (isBuild) {
+		postcssPlugins.push(autoprefixerPlugin());
+	}
+	return {
+		css: {
+			postcss: {
+				plugins: postcssPlugins,
+			},
+		},
+	};
+}
+
 type TailwindOptions =
 	| {
 			config?: {
@@ -92,7 +106,14 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {
-			'astro:config:setup': async ({ config, injectScript, addWatchFile, isRestart }) => {
+			'astro:config:setup': async ({
+				command,
+				config,
+				updateConfig,
+				injectScript,
+				addWatchFile,
+				isRestart,
+			}) => {
 				// Inject the Tailwind postcss plugin
 				const userConfig = await getUserConfig(config.root, customConfigPath, isRestart);
 
@@ -108,10 +129,9 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 					addWatchFile(userConfig.filePath);
 				}
 
-				const tailwindConfig: TailwindConfig =
+				const tailwindConfig =
 					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
-				config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
+				updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) });
-				config.style.postcss.plugins.push(autoprefixerPlugin);
 
 				if (applyBaseStyles) {
 					// Inject the Tailwind base import