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

* add mdx since md is deprecated now * rename .md -> .mdx * fix component import * yarn format
withastro · Oct 18, 2022 · 66e8ae3 · 66e8ae3
1 parent d7407db
commit 66e8ae3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/examples/with-tailwindcss/astro.config.mjs b/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()],
 });
diff --git a/examples/with-tailwindcss/package.json b/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",

diff --git a/examples/with-tailwindcss/src/pages/markdown-page.md b/examples/with-tailwindcss/src/pages/markdown-page.md
diff --git a/examples/with-tailwindcss/src/pages/markdown-page.mdx b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml