diff --git a/.changeset/thick-bats-pay.md b/.changeset/thick-bats-pay.md
new file mode 100644
index 0000000000..65987f72c9
--- /dev/null
+++ b/.changeset/thick-bats-pay.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight-tailwind': patch
+---
+
+Show `tailwind.config.mjs` file in docs
diff --git a/docs/src/components/theme-designer.astro b/docs/src/components/theme-designer.astro
index a59c2890e0..176c151255 100644
--- a/docs/src/components/theme-designer.astro
+++ b/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: {
diff --git a/docs/src/content/docs/guides/css-and-tailwind.mdx b/docs/src/content/docs/guides/css-and-tailwind.mdx
index f159e936d7..440df5a66c 100644
--- a/docs/src/content/docs/guides/css-and-tailwind.mdx
+++ b/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: {
diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md
index 97352ede18..a4a8ce623b 100644
--- a/examples/tailwind/README.md
+++ b/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
 ```
 
diff --git a/examples/tailwind/tailwind.config.cjs b/examples/tailwind/tailwind.config.cjs
deleted file mode 100644
index 474874c617..0000000000
--- a/examples/tailwind/tailwind.config.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-const colors = require('tailwindcss/colors');
-const starlightPlugin = require('@astrojs/starlight-tailwind');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	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()],
-};
diff --git a/examples/tailwind/tailwind.config.mjs b/examples/tailwind/tailwind.config.mjs
new file mode 100644
index 0000000000..11977e41e7
--- /dev/null
+++ b/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()],
+}
diff --git a/packages/tailwind/index.ts b/packages/tailwind/index.ts
index b35b339026..52b4e4c4c7 100644
--- a/packages/tailwind/index.ts
+++ b/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(),