Feat: support tailwind config files (#2831)

* feat: support custom tailwind config files

* fix: make config options optional

* feat: use existing utilities to resolve config path

* deps: add @proload/core to tailwind integration

* deps: update pnpm lock

* chore: clarify config docs

* refactor: extract user config fetch to helper

* refactor: rename function and function options

* refactor: throw error on bad custom config path

* deps: move @proload/core to regular deps

* chore: add changeset

* fix: apply astro preset when user config exists

* fix: use resolveConfig to preserve defaults

.changeset/rude-panthers-tease.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': patch
+---
+
+Add support for tailwind config files. These can either be a standard `tailwind.config.js|cjs|mjs`, or a custom filename as specified in your integration config.

packages/integrations/tailwind/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "tailwindcss": "^3.0.23",
     "autoprefixer": "^10.4.4",
+    "@proload/core": "^0.2.2",
     "postcss": "^8.4.12"
   },
   "devDependencies": {

packages/integrations/tailwind/src/index.ts

@@ -2,25 +2,73 @@ import type { AstroIntegration } from 'astro';
 import { fileURLToPath } from 'url';
 import path from 'path';
 import tailwindPlugin from 'tailwindcss';
+import type { TailwindConfig } from 'tailwindcss/tailwind-config';
+import resolveConfig from 'tailwindcss/resolveConfig.js';
 import autoprefixerPlugin from 'autoprefixer';
+import load from '@proload/core';
 
-function getDefaultTailwindConfig(srcUrl: URL) {
+function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
-	return {
+	return resolveConfig({
 		theme: {
 			extend: {},
 		},
 		plugins: [],
 		content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
-	};
+	});
 }
 
-export default function (): AstroIntegration {
+async function getUserConfig(projectRoot: URL, configPath?: string) {
+	const resolvedProjectRoot = fileURLToPath(projectRoot);
+	let userConfigPath: string | undefined;
+
+	if (configPath) {
+		const configPathWithLeadingSlash = /^\.*\//.test(configPath) ? configPath : `./${configPath}`;
+		userConfigPath = fileURLToPath(new URL(configPathWithLeadingSlash, projectRoot));
+	}
+
+	return await load('tailwind', { mustExist: false, cwd: resolvedProjectRoot, filePath: userConfigPath });
+}
+
+type TailwindOptions =
+	| {
+			config?: {
+				/**
+				 * Path to your tailwind config file
+				 * @default 'tailwind.config.js'
+				 */
+				path?: string;
+				/**
+				 * Apply Astro's default Tailwind config as a preset
+				 * This is recommended to enable Tailwind across all components and Astro files
+				 * @default true
+				 */
+				applyAstroPreset?: boolean;
+			};
+	  }
+	| undefined;
+
+export default function tailwindIntegration(options: TailwindOptions): AstroIntegration {
+	const applyAstroConfigPreset = options?.config?.applyAstroPreset ?? true;
+	const customConfigPath = options?.config?.path;
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {
-			'astro:config:setup': ({ config, injectScript }) => {
+			'astro:config:setup': async ({ config, injectScript }) => {
 				// Inject the Tailwind postcss plugin
-				config.styleOptions.postcss.plugins.push(tailwindPlugin(getDefaultTailwindConfig(config.src)));
+				const userConfig = await getUserConfig(config.projectRoot, customConfigPath);
+
+				if (customConfigPath && !userConfig?.value) {
+					throw new Error(`Could not find a Tailwind config at ${JSON.stringify(customConfigPath)}. Does the file exist?`);
+				}
+
+				const tailwindConfig: TailwindConfig = (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.src);
+				if (applyAstroConfigPreset && userConfig?.value) {
+					// apply Astro config as a preset to user config
+					// this avoids merging or applying nested spread operators ourselves
+					tailwindConfig.presets = [getDefaultTailwindConfig(config.src), ...(tailwindConfig.presets || [])];
+				}
+
+				config.styleOptions.postcss.plugins.push(tailwindPlugin(tailwindConfig));
 				config.styleOptions.postcss.plugins.push(autoprefixerPlugin);
 
 				// Inject the Tailwind base import

pnpm-lock.yaml

@@ -1261,6 +1261,7 @@ importers:
 
   packages/integrations/tailwind:
     specifiers:
+      '@proload/core': ^0.2.2
       '@types/tailwindcss': ^3.0.9
       astro: workspace:*
       astro-scripts: workspace:*
@@ -1268,6 +1269,7 @@ importers:
       postcss: ^8.4.12
       tailwindcss: ^3.0.23
     dependencies:
+      '@proload/core': 0.2.2
       autoprefixer: 10.4.4_postcss@8.4.12
       postcss: 8.4.12
       tailwindcss: 3.0.23_autoprefixer@10.4.4