feat: Add inline code styling to prose

Author: pheralb

website/app/ui/prose.ts

@@ -7,4 +7,5 @@ export const proseClasses = cn(
   'prose-a:underline-offset-[4px] prose-a:decoration-solid dark:prose-a:decoration-neutral-500 prose-a:decoration-neutral-400',
   'prose-figure:my-0 prose-p:mb-1 prose-p:text-pretty',
   'prose-ol:mb-0',
+  'prose-inline-code:rounded prose-inline-code:font-mono prose-inline-code:p-[2px] prose-inline-code:border prose-inline-code:border-neutral-300 prose-inline-code:bg-neutral-200/50 prose-inline-code:dark:border-neutral-800 prose-inline-code:dark:bg-neutral-800/50',
 );

website/tailwind.config.ts

@@ -1,8 +1,10 @@
 import type { Config } from 'tailwindcss';
 
+// Plugins:
+import plugin from 'tailwindcss/plugin';
 import twAnimate from 'tailwindcss-animate';
 import typography from '@tailwindcss/typography';
-import { fontFamily } from 'tailwindcss/defaultTheme';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 const config = {
   darkMode: ['class'],
@@ -23,8 +25,20 @@ const config = {
     },
     extend: {
       fontFamily: {
-        sans: ['Geist', ...fontFamily.sans],
-        mono: ['GeistMono', ...fontFamily.mono],
+        sans: ['Geist', ...defaultTheme.fontFamily.sans],
+        mono: ['GeistMono', ...defaultTheme.fontFamily.mono],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            'code::before': {
+              content: '""',
+            },
+            'code::after': {
+              content: '""',
+            },
+          },
+        },
       },
       keyframes: {
         'accordion-down': {
@@ -54,7 +68,16 @@ const config = {
       },
     },
   },
-  plugins: [twAnimate, typography],
+  plugins: [
+    twAnimate,
+    typography,
+    plugin(function ({ addVariant }) {
+      addVariant(
+        'prose-inline-code',
+        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))',
+      );
+    }),
+  ],
 } satisfies Config;
 
 export default config;