feat: update inline code styles + add custom plugin

pheralb · May 31, 2024 · 20ed03a · 20ed03a
1 parent 66d5207
commit 20ed03a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
@@ -16,7 +16,7 @@
 
 <main class={cn('flex flex-col space-y-5', routeAnimation)}>
   <div class="mt-7 flex flex-col space-y-2">
-    <h2 class="text-3xl md:text-4xl font-medium tracking-tighter">
+    <h2 class="text-3xl font-medium tracking-tighter md:text-4xl">
       {data.meta.title}
     </h2>
     <p class="text-neutral-800 dark:text-neutral-400">{data.meta.description}</p>
@@ -59,7 +59,8 @@
       'prose-headings:font-medium prose-h2:tracking-tight',
       'prose-a:decoration-neutral-400 prose-a:decoration-dotted prose-a:decoration-[1.5px] prose-a:underline-offset-[6px] hover:prose-a:opacity-80 dark:prose-a:decoration-neutral-400',
       'prose-pre:my-3',
-      'prose-ol:mb-3 prose-ul:mb-3'
+      'prose-ol:mb-3 prose-ul:mb-3',
+      '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'
     )}
   >
     <svelte:component this={data.content} />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,15 +1,25 @@
 import type { Config } from 'tailwindcss';
 
 // Plugins:
-import { fontFamily } from 'tailwindcss/defaultTheme';
+import plugin from 'tailwindcss/plugin';
+import defaultTheme from 'tailwindcss/defaultTheme';
 import twTypography from '@tailwindcss/typography';
 import twAnimate from 'tailwindcss-animate';
 
 const config: Config = {
   darkMode: ['class'],
   content: ['./src/**/*.{html,js,svelte,ts}'],
   safelist: ['dark'],
-  plugins: [twTypography, twAnimate],
+  plugins: [
+    twTypography,
+    twAnimate,
+    plugin(function ({ addVariant }) {
+      addVariant(
+        'prose-inline-code',
+        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
+      );
+    })
+  ],
   theme: {
     container: {
       center: true,
@@ -20,15 +30,13 @@ const config: Config = {
     },
     extend: {
       typography: {
-        default: {
+        DEFAULT: {
           css: {
-            code: {
-              '&::before': {
-                display: 'none'
-              },
-              '&::after': {
-                display: 'none'
-              }
+            'code::before': {
+              content: '""'
+            },
+            'code::after': {
+              content: '""'
             }
           }
         },
@@ -40,9 +48,9 @@ const config: Config = {
         }
       },
       fontFamily: {
-        sans: ['InterVariable', ...fontFamily.sans],
-        mono: ['GeistMono', ...fontFamily.mono],
-        gambarino: ['Gambarino', ...fontFamily.sans]
+        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+        mono: ['GeistMono', ...defaultTheme.fontFamily.mono],
+        gambarino: ['Gambarino', ...defaultTheme.fontFamily.sans]
       }
     }
   }