Tailwind typography plugin (#88)

* Install and configure `@tailwindcss/typography`

* Update content.css

Author: SebKay

bun.lockb

@@ -4,6 +4,7 @@
     "@inertiajs/vue3": "^1.2.0",
     "@sentry/vue": "^8.30.0",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "@vitejs/plugin-vue": "^5.1.4",
     "autoprefixer": "^10.4.20",
     "laravel-vite-plugin": "^1.0.5",

package.json

@@ -1,16 +1,14 @@
 @layer components {
     .content {
+        @apply prose text-neutral-700;
+
         h1,
         h2,
         h3,
         h4,
         h5,
         h6 {
-            @apply text-brand-900 font-heading;
-
-            a {
-                @apply text-brand-800 hover:no-underline;
-            }
+            @apply font-heading font-bold  text-neutral-900;
         }
 
         h1 {
@@ -77,18 +75,14 @@
             @apply border-b border-brand-200;
         }
 
-        > * + * {
-            @apply mt-6;
-        }
-
         * {
             & + h1,
             & + h2,
             & + h3,
             & + h4,
             & + h5,
             & + h6 {
-                @apply mt-12;
+                @apply mt-8;
             }
         }
     }

resources/css/content.css

@@ -44,5 +44,6 @@ module.exports = {
 
     plugins: [
         require('@tailwindcss/forms'),
+        require('@tailwindcss/typography'),
     ],
 }