fix: use tailwind.config.mjs file by default config (#903)

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

.changeset/thick-bats-pay.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight-tailwind': patch
+---
+
+Show `tailwind.config.mjs` file in docs

docs/src/components/theme-designer.astro

@@ -104,14 +104,14 @@ const {
 		}
 
 		#updateTailwindConfig({ dark, light }: ReturnType<typeof getPalettes>) {
-			const config = `const starlightPlugin = require('@astrojs/starlight-tailwind');
+			const config = `import starlightPlugin from '@astrojs/starlight-tailwind';
 
 // Generated color palettes
 const accent = { 200: '${dark['accent-high']}', 600: '${light.accent}', 900: '${light['accent-high']}', 950: '${dark['accent-low']}' };
 const gray = { 100: '${light['gray-7']}', 200: '${light['gray-6']}', 300: '${light['gray-5']}', 400: '${light['gray-4']}', 500: '${light['gray-3']}', 700: '${light['gray-2']}', 800: '${light['gray-1']}', 900: '${light.white}' };
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {

docs/src/content/docs/guides/css-and-tailwind.mdx

@@ -181,14 +181,14 @@ If you already have a Starlight site and want to add Tailwind CSS, follow these
     });
     ```
 
-5.  Add the Starlight Tailwind plugin to `tailwind.config.cjs`:
+5.  Add the Starlight Tailwind plugin to `tailwind.config.mjs`:
 
     ```js ins={2,7}
-    // tailwind.config.cjs
-    const starlightPlugin = require('@astrojs/starlight-tailwind');
+    // tailwind.config.mjs
+    import starlightPlugin from '@astrojs/starlight-tailwind';
 
     /** @type {import('tailwindcss').Config} */
-    module.exports = {
+    export default {
     	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     	plugins: [starlightPlugin()],
     };
@@ -206,12 +206,12 @@ If set, the following options will override Starlight’s default styles:
 - `fontFamily.mono` — used for code examples
 
 ```js {12,14,18,20}
-// tailwind.config.cjs
-const starlightPlugin = require('@astrojs/starlight-tailwind');
-const colors = require('tailwindcss/colors');
+// tailwind.config.mjs
+import starlightPlugin from '@astrojs/starlight-tailwind';
+import colors from 'tailwindcss/colors';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {

examples/tailwind/README.md

@@ -26,7 +26,7 @@ Inside of your Astro + Starlight project, you'll see the following folders and f
 │   └── env.d.ts
 ├── astro.config.mjs
 ├── package.json
-├── tailwind.config.cjs
+├── tailwind.config.mjs
 └── tsconfig.json
 ```
 

examples/tailwind/tailwind.config.mjs

@@ -0,0 +1,18 @@
+import colors from 'tailwindcss/colors';
+import starlightPlugin from '@astrojs/starlight-tailwind';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {
+      colors: {
+        // Your preferred accent color. Indigo is closest to Starlight’s defaults.
+        accent: colors.indigo,
+        // Your preferred gray scale. Zinc is closest to Starlight’s defaults.
+        gray: colors.zinc,
+      },
+    },
+  },
+  plugins: [starlightPlugin()],
+}

packages/tailwind/index.ts

@@ -9,11 +9,11 @@ import plugin from 'tailwindcss/plugin';
  * - Links Starlight’s fonts to `sans` and `mono` in Tailwind theme settings.
  *
  * @example
- * // tailwind.config.cjs
- * const colors = require('tailwindcss/colors');
- * const starlightPlugin = require('@astrojs/starlight/tailwind');
+ * // tailwind.config.mjs
+ * import colors from 'tailwindcss/colors';
+ * import starlightPlugin from '@astrojs/starlight-tailwind';
  *
- * module.exports = {
+ * export default {
  *   plugins: [
  *     // Add Starlight’s Tailwind plugin
  *     starlightPlugin(),