fix: autoprefixer on dev mode for tailwind plugin (#6002)

Co-authored-by: Sarah Rainsberger <[email protected]>

.changeset/mean-tips-search.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': patch
+---
+
+Re-enable autoprefixer in dev

examples/with-tailwindcss/src/components/Button.astro

@@ -4,7 +4,7 @@
 ---
 
 <button
-	class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
 >
 	<slot />
 </button>

packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro

@@ -3,7 +3,7 @@ let { type = 'button' } = Astro.props;
 ---
 
 <button
-	class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	class="appearance-none py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
 	{type}
 >
 	<slot />

packages/astro/e2e/tailwindcss.test.js

@@ -33,6 +33,13 @@ test.describe('Tailwind CSS', () => {
 
 		const button = page.locator('button');
 
+		await expect(button, 'should have appearance none').toHaveClass(/appearance-none/);
+		await expect(button, 'should have appearance: none').toHaveCSS('appearance', 'none');
+		await expect(button, 'should have appearance-none with webkit prefix').toHaveCSS(
+			'-webkit-appearance',
+			'none'
+		);
+
 		await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
 		await expect(button, 'should have background color').toHaveCSS(
 			'background-color',

packages/integrations/tailwind/README.md

@@ -68,7 +68,7 @@ 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.
+[Autoprefixer](https://github.com/postcss/autoprefixer) is also set up automatically when working in dev mode, and for production builds, so Tailwind classes will work in older browsers.
 
 https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4
 

packages/integrations/tailwind/src/index.ts

@@ -86,7 +86,6 @@ async function getPostCssConfig(
 }
 
 async function getViteConfiguration(
-	isBuild: boolean,
 	tailwindConfig: TailwindConfig,
 	viteConfig: UserConfig
 ) {
@@ -100,9 +99,7 @@ async function getViteConfiguration(
 		postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
 	postcssPlugins.push(tailwindPlugin(tailwindConfig));
 
-	if (isBuild) {
-		postcssPlugins.push(autoprefixerPlugin());
-	}
+	postcssPlugins.push(autoprefixerPlugin());
 	return {
 		css: {
 			postcss: {
@@ -140,7 +137,6 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 		name: '@astrojs/tailwind',
 		hooks: {
 			'astro:config:setup': async ({
-				command,
 				config,
 				updateConfig,
 				injectScript,
@@ -166,7 +162,7 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
 
 				updateConfig({
-					vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite),
+					vite: await getViteConfiguration(tailwindConfig, config.vite),
 				});
 
 				if (applyBaseStyles) {