From 160d1cd755e70af1d8ec294d01dd2cb32d60db50 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 9 Oct 2023 16:21:26 +0200
Subject: [PATCH] feat(tailwind): create a tailwind.config.mjs file by default
 (#8638)

---
 .changeset/early-ghosts-hang.md             | 6 ++++++
 packages/astro/src/cli/add/index.ts         | 4 ++--
 packages/integrations/tailwind/README.md    | 6 +++---
 packages/integrations/tailwind/src/index.ts | 2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/early-ghosts-hang.md

diff --git a/.changeset/early-ghosts-hang.md b/.changeset/early-ghosts-hang.md
new file mode 100644
index 000000000000..41215d739260
--- /dev/null
+++ b/.changeset/early-ghosts-hang.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/tailwind': patch
+'astro': patch
+---
+
+The `@astrojs/tailwind` integration now creates a `tailwind.config.mjs` file by default
diff --git a/packages/astro/src/cli/add/index.ts b/packages/astro/src/cli/add/index.ts
index afd63716b1bf..859a95c0a93b 100644
--- a/packages/astro/src/cli/add/index.ts
+++ b/packages/astro/src/cli/add/index.ts
@@ -50,7 +50,7 @@ const ALIASES = new Map([
 ]);
 const ASTRO_CONFIG_STUB = `import { defineConfig } from 'astro/config';\n\nexport default defineConfig({});`;
 const TAILWIND_CONFIG_STUB = `/** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {},
@@ -160,7 +160,7 @@ export async function add(names: string[], { flags }: AddOptions) {
 						'./tailwind.config.mjs',
 						'./tailwind.config.js',
 					],
-					defaultConfigFile: './tailwind.config.cjs',
+					defaultConfigFile: './tailwind.config.mjs',
 					defaultConfigContent: TAILWIND_CONFIG_STUB,
 				});
 			}
diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index ecbe37d1ade4..6cbfd7adab71 100644
--- a/packages/integrations/tailwind/README.md
+++ b/packages/integrations/tailwind/README.md
@@ -94,7 +94,7 @@ https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b
 
 ### Configuring Tailwind
 
-If you used the Quick Install instructions and said yes to each prompt, you'll see a `tailwind.config.cjs` file in your project's root directory. Use this file for your Tailwind configuration changes. You can learn how to customize Tailwind using this file [in the Tailwind docs](https://tailwindcss.com/docs/configuration).
+If you used the Quick Install instructions and said yes to each prompt, you'll see a `tailwind.config.mjs` file in your project's root directory. Use this file for your Tailwind configuration changes. You can learn how to customize Tailwind using this file [in the Tailwind docs](https://tailwindcss.com/docs/configuration).
 
 If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the root directory and the integration will use its configurations. This can be great if you already have Tailwind configured in another project and want to bring those settings over to this one.
 
@@ -178,8 +178,8 @@ error   The `text-special` class does not exist. If `text-special` is a custom c
 [Instead of using `@layer` directives in a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config to fix it:
 
 ```js
-// tailwind.config.cjs
-module.exports = {
+// tailwind.config.mjs
+export default {
   // ...
   plugins: [
     function ({ addComponents, theme }) {
diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
index 700f16937d2c..daee5f857bcb 100644
--- a/packages/integrations/tailwind/src/index.ts
+++ b/packages/integrations/tailwind/src/index.ts
@@ -50,7 +50,7 @@ async function getViteConfiguration(
 type TailwindOptions = {
 	/**
 	 * Path to your tailwind config file
-	 * @default 'tailwind.config.js'
+	 * @default 'tailwind.config.mjs'
 	 */
 	configFile?: string;
 	/**