update with-tailwind example to use mdx (#5104)

* add mdx since md is deprecated now

* rename .md -> .mdx

* fix component import

* yarn format

examples/with-tailwindcss/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
 import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind()],
+	integrations: [mdx(), tailwind()],
 });

examples/with-tailwindcss/package.json

@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^0.11.4",
     "@astrojs/tailwind": "^2.1.0",
     "@types/canvas-confetti": "^1.4.3",
     "astro": "^1.5.0",

examples/with-tailwindcss/src/pages/markdown-page.md

@@ -1,11 +0,0 @@
----
-title: 'Markdown + Tailwind'
-layout: ../layouts/main.astro
-setup: |
-  import Button from '../components/Button.astro';
----
-
-<div class="grid place-items-center h-screen content-center">
-    <Button>Tailwind Button in Markdown!</Button>
-    <a href="/" class="p-4 underline">Go home...</a>
-</div>

examples/with-tailwindcss/src/pages/markdown-page.mdx

@@ -0,0 +1,13 @@
+---
+title: 'Markdown + Tailwind'
+layout: ../layouts/main.astro
+---
+
+import Button from '../components/Button.astro';
+
+<div class="grid place-items-center h-screen content-center">
+	<Button>Tailwind Button in Markdown!</Button>
+	<a href="/" class="p-4 underline">
+		Go home...
+	</a>
+</div>

pnpm-lock.yaml

@@ -326,6 +326,7 @@ importers:
 
   examples/with-tailwindcss:
     specifiers:
+      '@astrojs/mdx': ^0.11.4
       '@astrojs/tailwind': ^2.1.0
       '@types/canvas-confetti': ^1.4.3
       astro: ^1.5.0
@@ -334,6 +335,7 @@ importers:
       postcss: ^8.4.14
       tailwindcss: ^3.0.24
     dependencies:
+      '@astrojs/mdx': link:../../packages/integrations/mdx
       '@astrojs/tailwind': link:../../packages/integrations/tailwind
       '@types/canvas-confetti': 1.4.3
       astro: link:../../packages/astro