feat(tailwind): support v4

.changeset/curvy-penguins-act.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': major
+---
+
+aaa

packages/integrations/tailwind/package.json

@@ -21,35 +21,30 @@
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/tailwind/",
   "exports": {
     ".": "./dist/index.js",
-    "./base.css": "./base.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "base.css"
+    "dist"
   ],
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\"",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
     "test": "astro-scripts test \"test/**/*.test.js\""
   },
-  "dependencies": {
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
-    "postcss-load-config": "^4.0.2"
-  },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "tailwindcss": "^3.4.17",
     "vite": "^6.0.9"
   },
   "peerDependencies": {
-    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0",
-    "tailwindcss": "^3.0.24"
+    "astro": "^5.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "publishConfig": {
     "provenance": true
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0"
   }
 }

packages/integrations/tailwind/src/index.ts

@@ -1,101 +1,50 @@
-import { fileURLToPath } from 'node:url';
 import type { AstroIntegration } from 'astro';
-import autoprefixerPlugin from 'autoprefixer';
-import tailwindPlugin from 'tailwindcss';
-import type { CSSOptions, UserConfig } from 'vite';
-
-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 {
-			postcssConfigResult = null;
-		}
-	}
-	return postcssConfigResult;
-}
-
-async function getViteConfiguration(
-	tailwindConfigPath: string | undefined,
-	nesting: boolean,
-	root: string,
-	postcssInlineOptions: CSSOptions['postcss'],
-): Promise<Partial<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(root, postcssInlineOptions);
-
-	const postcssOptions = postcssConfigResult?.options ?? {};
-	const postcssPlugins = postcssConfigResult?.plugins?.slice() ?? [];
-
-	if (nesting) {
-		const tailwindcssNestingPlugin = (await import('tailwindcss/nesting/index.js')).default;
-		postcssPlugins.push(tailwindcssNestingPlugin());
-	}
-
-	postcssPlugins.push(tailwindPlugin(tailwindConfigPath));
-	postcssPlugins.push(autoprefixerPlugin());
-
-	return {
-		css: {
-			postcss: {
-				...postcssOptions,
-				plugins: postcssPlugins,
-			},
-		},
-	};
-}
+import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath } from 'node:url';
+import { writeFileSync } from 'node:fs';
 
 type TailwindOptions = {
 	/**
 	 * Path to your tailwind config file
-	 * @default 'tailwind.config.mjs'
+	 * @deprecated It is recommended to use the `@config` directive, see https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
+	 * @default './tailwind.config.mjs'
 	 */
 	configFile?: string;
 	/**
 	 * Apply Tailwind's base styles
-	 * Disabling this is useful when further customization of Tailwind styles
-	 * and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
-	 * for more details on directives and customization.
+	 * @deprecated It is recommended to use a css file to configure Tailwind, see https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives
 	 * @default true
 	 */
 	applyBaseStyles?: boolean;
-	/**
-	 * Add CSS nesting support using `tailwindcss/nesting`. See {@link https://tailwindcss.com/docs/using-with-preprocessors#nesting Tailwind's docs}
-	 * for how this works with `postcss-nesting` and `postcss-nested`.
-	 */
-	nesting?: boolean;
 };
 
-export default function tailwindIntegration(options?: TailwindOptions): AstroIntegration {
-	const applyBaseStyles = options?.applyBaseStyles ?? true;
-	const customConfigPath = options?.configFile;
-	const nesting = options?.nesting ?? false;
+export default function tailwindIntegration({
+	applyBaseStyles = true,
+	configFile,
+}: TailwindOptions = {}): AstroIntegration {
+	if (applyBaseStyles && !configFile) {
+		configFile = './tailwind.config.mjs';
+	}
 
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {
-			'astro:config:setup': async ({ config, updateConfig, injectScript }) => {
-				// Inject the Tailwind postcss plugin
+			'astro:config:setup': async ({ config, updateConfig, injectScript, createCodegenDir }) => {
 				updateConfig({
-					vite: await getViteConfiguration(
-						customConfigPath,
-						nesting,
-						fileURLToPath(config.root),
-						config.vite.css?.postcss,
-					),
+					vite: { plugins: [tailwindcss()] },
 				});
 
 				if (applyBaseStyles) {
-					// Inject the Tailwind base import
-					injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`);
+					const codegenDir = createCodegenDir();
+					let content = '@import "tailwindcss";';
+					if (configFile) {
+						content += `\n@config ${JSON.stringify(fileURLToPath(new URL(configFile, config.root)))};`;
+					}
+
+					const url = new URL('tailwind.css', codegenDir);
+					writeFileSync(url, content, 'utf-8');
+
+					injectScript('page-ssr', `import ${JSON.stringify(url)};`);
 				}
 			},
 		},

packages/integrations/tailwind/test/basic.test.js

@@ -28,10 +28,6 @@ describe('Basic', () => {
 
 			assert.equal(css.includes('box-sizing:border-box;'), true); // base css
 			assert.equal(css.includes('text-red-500'), true); // class css
-			assert.equal(
-				new RegExp(/\.a\[data-astro-cid-.*?\] \.b\[data-astro-cid-.*?\]/).test(css),
-				true,
-			); // nesting
 		});
 	});
 });

packages/integrations/tailwind/test/fixtures/basic/astro.config.js

@@ -1,12 +1,11 @@
-import { fileURLToPath } from 'node:url';
+// @ts-check
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   integrations: [
     tailwind({
-      configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-      nesting: true
+      configFile: "./tailwind.config.js"
     }),
   ]
 });

packages/integrations/tailwind/test/fixtures/basic/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "dependencies": {
     "astro": "workspace:*",
-    "@astrojs/tailwind": "workspace:*"
+    "@astrojs/tailwind": "workspace:*",
+    "tailwindcss": "4.0.0"
   }
 }