Rename tailwind integration options (#7391)

.changeset/beige-schools-hang.md

@@ -0,0 +1,24 @@
+---
+'@astrojs/tailwind': major
+---
+
+Rename options `config.path` to `configFile`, and `config.applyBaseStyles` to `applyBaseStyles`. If you are using these options, you need to migrate to the new names.
+
+```diff
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [
+    tailwind({
+-      config: {
+-        path: '...',
+-        applyBaseStyles: true,
+-      },
++      configFile: '...',
++      applyBaseStyles: true,
+    }),
+  ],
+});
+```

.changeset/real-spies-pretend.md

@@ -2,9 +2,12 @@
 '@astrojs/tailwind': major
 ---
 
-Let tailwind postcss plugin load its config file itself. This changes the `tailwind.config.js` loading behaviour where Tailwind would load the config file from `process.cwd()` instead of the project `root`. You can configure the integration's `config.path` option to load from a specific path instead.
+Let the `tailwindcss` PostCSS plugin load its config file itself. This changes the Tailwind config loading behaviour where it is loaded from `process.cwd()` instead of the project `root`.
+
+If your Tailwind config file is not located in the current working directory, you will need to configure the integration's `configFile` option to load from a specific path:
 
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import { fileURLToPath } from 'url';
@@ -12,17 +15,16 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-			},
 		}),
 	],
 });
 ```
 
-This change also requires a Tailwind config file to exist in your project as Astro's fallback value is no longer provided. It is set up automatically during `astro add tailwind`, but you can also manually create a `tailwind.config.cjs` file in your project root:
+This change also requires a Tailwind config file to exist in your project as a fallback config is no longer provided. It is set up automatically during `astro add tailwind`, but if it does not exist, you can manually create a `tailwind.config.cjs` file in your project root:
 
 ```js
+// tailwind.config.cjs
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],

packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs

@@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-			},
 		}),
 	],
 	vite: {

packages/astro/test/fixtures/astro-scripts/astro.config.mjs

@@ -5,9 +5,7 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
-			},
 		}),
 	],
 });

packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs

@@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
-			},
 		}),
 	],
 });

packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts

@@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-			},
 		}),
 	],
 });

packages/astro/test/fixtures/tailwindcss/astro.config.mjs

@@ -7,9 +7,7 @@ import { fileURLToPath } from 'url';
 export default defineConfig({
 	integrations: [
 		tailwind({
-			config: {
+			configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-				path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
-			},
 		}),
 		mdx(),
 	],

packages/integrations/tailwind/README.md

@@ -84,9 +84,11 @@ If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the r
 
 The Astro Tailwind integration handles the communication between Astro and Tailwind and it has its own options. Change these in the `astro.config.mjs` file (_not_ the Tailwind configuration file) which is where your project's integration settings live.
 
-#### config.path
+#### configFile
+
+Previously known as `config.path` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
   
-If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `config.path` option. If `config.path` is relative, it will be resolved relative to the root.
+If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `configFile` option. If `configFile` is relative, it will be resolved relative to the current working directory.
 
 > **Warning**
 > Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
@@ -100,14 +102,16 @@ import tailwind from '@astrojs/tailwind';
 export default defineConfig({
   integrations: [tailwind({
     // Example: Provide a custom path to a Tailwind config file
-    config: { path: './custom-config.cjs' },
+    configFile: './custom-config.cjs',
   })],
 });
 ```
 
-#### config.applyBaseStyles
+#### applyBaseStyles
 
-  By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
+Previously known as `config.applyBaseStyles` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
+
+By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
 
 ```css
 /* The integration's default injected base.css file */
@@ -116,7 +120,7 @@ export default defineConfig({
 @tailwind utilities;
 ```
 
-To disable this default behavior, set `config.applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
+To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
 
 __`astro.config.mjs`__
 
@@ -127,7 +131,7 @@ export default defineConfig({
   integrations: [tailwind({
     // Example: Disable injecting a basic `base.css` import on every page.
     // Useful if you need to define and/or import your own custom `base.css`.
-    config: { applyBaseStyles: false },
+    applyBaseStyles: false,
   })],
 });
 ```

packages/integrations/tailwind/src/index.ts

@@ -46,29 +46,25 @@ async function getViteConfiguration(
 	};
 }
 
-type TailwindOptions =
+type TailwindOptions = {
-	| {
+	/**
-			config?: {
+	 * Path to your tailwind config file
-				/**
+	 * @default 'tailwind.config.js'
-				 * Path to your tailwind config file
+	 */
-				 * @default 'tailwind.config.js'
+	configFile?: string;
-				 */
+	/**
-				path?: string;
+	 * Apply Tailwind's base styles
-				/**
+	 * Disabling this is useful when further customization of Tailwind styles
-				 * Apply Tailwind's base styles
+	 * and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
-				 * Disabling this is useful when further customization of Tailwind styles
+	 * for more details on directives and customization.
-				 * and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
+	 * @default true
-				 * for more details on directives and customization.
+	 */
-				 * @default true
+	applyBaseStyles?: boolean;
-				 */
+};
-				applyBaseStyles?: boolean;
-			};
-	  }
-	| undefined;
 
 export default function tailwindIntegration(options?: TailwindOptions): AstroIntegration {
-	const applyBaseStyles = options?.config?.applyBaseStyles ?? true;
+	const applyBaseStyles = options?.applyBaseStyles ?? true;
-	const customConfigPath = options?.config?.path;
+	const customConfigPath = options?.configFile;
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {