chore(playground): add prose

Author: atinux

playground/components/global/AsyncComponent.vue

@@ -3,7 +3,7 @@
     <UAlert
       color="primary"
       variant="subtle"
-      class="my-4"
+      class="my-4 not-prose"
     >
       <template #description>
         <h2 class="font-semibold">

playground/components/global/PageSnippet.vue

@@ -3,7 +3,7 @@
     <UAlert
       color="primary"
       variant="subtle"
-      class="page-snippet-alert"
+      class="page-snippet-alert not-prose"
     >
       <template #description>
         <MDCRenderer

playground/package.json

@@ -8,8 +8,12 @@
     "generate": "nuxi generate"
   },
   "devDependencies": {
-    "nuxt": "latest",
     "@monaco-editor/loader": "^1.4.0",
-    "@nuxtlabs/monarch-mdc": "^0.2.0"
+    "@nuxtlabs/monarch-mdc": "^0.2.0",
+    "nuxt": "latest"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.26",
+    "@tailwindcss/typography": "^0.5.16"
   }
 }

playground/pages/async-components/advanced.vue

@@ -3,7 +3,7 @@
     <PageNav />
     <div
       v-if="ast"
-      class="page-mdc-content"
+      class="page-mdc-content prose"
     >
       <MDCRenderer
         v-if="ast.body"

playground/pages/async-components/index.vue

@@ -3,7 +3,7 @@
     <PageNav />
     <div
       v-if="ast"
-      class="page-mdc-content"
+      class="page-mdc-content prose"
     >
       <MDCRenderer
         v-if="ast.body"

playground/pages/index.vue

@@ -55,7 +55,7 @@ onMounted(() => {
       </div>
       <div class="flex-1 h-full flex flex-col  border-2 border-neutral-900">
         <code class="text-xs px-2 py-1">Source -> MDC -> Render</code>
-        <div class="flex-1 overflow-scroll">
+        <div class="flex-1 overflow-scroll prose p-4">
           <MDCRenderer
             v-if="ast"
             :body="ast!.body"

playground/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  plugins: [
+    require('@tailwindcss/typography')
+  ]
+}