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) {
- return {
+function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
+ return resolveConfig({
  theme: {
  extend: {},
  },
  plugins: [],
  content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
- };
+ });
+}
+
+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 });
 }
 
-export default function (): AstroIntegration {
+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