fix: customize markdown styles instead of using @tailwindcss/typography

package.json

@@ -24,7 +24,6 @@
     "@docsearch/react": "3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@shikijs/rehype": "^1.3.0",
-    "@tailwindcss/typography": "^0.5.12",
     "@types/chroma-js": "^2.4.4",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.78",

src/components/MarkdownWrapper.astro

@@ -6,6 +6,6 @@ interface Props {
 const { class: className } = Astro.props
 ---
 
-<article id="markdown-wrapper" class="prose max-w-none" class:list={[className]}>
+<article id="markdown-wrapper" class="markdown" class:list={[className]}>
   <slot />
 </article>

src/styles/markdown.css

@@ -1,81 +1,165 @@
-.prose :not(pre) > code {
-  @apply px-2 py-1 rounded bg-secondary text-sm;
+.markdown > :first-child {
+  @apply mt-0;
 }
 
-.prose :not(pre) > code::before,
-.prose :not(pre) > code::after {
-  content: none;
+.markdown > :last-child {
+  @apply mb-0;
 }
 
-.prose a {
-  @apply no-underline hover:underline underline-offset-2 decoration-dashed;
+.markdown p {
+  @apply mb-5;
 }
 
-.prose .code-block {
-  @apply bg-secondary relative rounded-lg mt-10 mb-6;
+.markdown h1 {
+  @apply text-4xl font-extrabold mb-8;
 }
 
-.prose .lang-tag {
+.markdown h2 {
+  @apply text-2xl font-bold mt-12 mb-6;
+}
+
+.markdown h3 {
+  @apply text-xl font-semibold mt-8 mb-3;
+}
+
+.markdown h4 {
+  @apply font-semibold mt-6 mb-2;
+}
+
+.markdown a {
+  @apply font-normal text-accent hover:underline underline-offset-2;
+}
+
+.markdown a + .icon-external-link {
+  @apply text-secondary ml-1;
+}
+
+.markdown blockquote {
+  @apply my-5 pl-4 border-l-2 border-accent/80 text-secondary italic;
+}
+
+.markdown blockquote::before {
+  content: '\e793';
+  font-family: 'iconfont';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @apply not-italic text-accent/80;
+}
+
+.markdown blockquote > p:last-child {
+  @apply mb-0;
+}
+
+.markdown :not(pre) > code {
+  @apply px-2 py-1 rounded bg-secondary text-sm font-semibold;
+}
+
+.markdown .code-block {
+  @apply relative mt-10 mb-5 bg-secondary rounded-lg;
+}
+
+.markdown .lang-tag {
   @apply absolute right-6 -top-6 h-6 px-4 flex items-center rounded-t-lg bg-inherit text-sm;
 }
 
-.prose pre {
-  min-height: 60px;
-  max-height: 450px;
-  @apply my-0 px-6 py-4 bg-transparent text-sm leading-relaxed;
+.markdown pre {
+  @apply px-6 py-4 max-h-[450px] text-sm leading-relaxed overflow-auto;
+}
+
+.markdown .table-wrapper {
+  @apply overflow-x-auto my-5;
+}
+
+.markdown table {
+  @apply w-auto mx-auto text-left table-auto text-sm;
 }
 
-.prose .table-wrapper {
-  @apply overflow-x-auto my-6;
+.markdown tr {
+  @apply border-b border-primary;
 }
 
-.prose table {
-  @apply w-auto my-0 mx-auto text-left;
+.markdown th,
+.markdown td {
+  @apply p-2;
 }
 
-.prose img {
-  min-height: 80px;
-  min-width: 80px;
-  @apply rounded-lg bg-secondary;
+.markdown td {
+  @apply align-baseline;
 }
 
-.prose figure {
-  @apply flex flex-col items-center;
+.markdown img {
+  @apply rounded-lg bg-secondary min-h-[80px] min-w-[80px];
 }
 
-.prose .heading-anchor {
+.markdown figure {
+  @apply mb-5 flex flex-col items-center;
+}
+
+.markdown figcaption {
+  @apply mt-3 text-secondary text-sm;
+}
+
+.markdown .heading-anchor {
   @apply ml-1 opacity-0 hover:no-underline;
 }
 
-.prose .heading:hover .heading-anchor,
-.prose .heading-anchor:focus-visible {
+.markdown .heading:hover .heading-anchor,
+.markdown .heading-anchor:focus-visible {
   @apply opacity-100;
 }
 
-.prose iframe {
+.markdown iframe {
   @apply rounded-lg w-full bg-secondary;
 }
 
-.prose iframe.codepen {
-  min-height: 450px;
+.markdown iframe.codepen {
+  @apply min-h-[450px];
 }
 
-.prose iframe.video {
+.markdown iframe.video {
   @apply aspect-video;
 }
 
-.prose hr {
-  max-width: 100px;
-  @apply mx-auto;
+.markdown hr {
+  @apply mx-auto max-w-[100px];
+}
+
+.markdown ul {
+  @apply list-disc;
+}
+
+.markdown ol {
+  @apply list-decimal;
+}
+
+.markdown ol,
+.markdown ul {
+  @apply my-5 pl-6 space-y-2;
+}
+
+.markdown ul ul,
+.markdown ul ol,
+.markdown ol ul,
+.markdown ol ol {
+  @apply my-3;
+}
+
+.markdown .spoiler {
+  @apply bg-current rounded transition-bg-color not-italic;
+}
+
+.markdown .spoiler:hover {
+  @apply bg-transparent;
+}
+
+.markdown h2 + * {
+  @apply mt-0;
 }
 
-.prose .spoiler {
-  background-color: currentColor;
-  border-radius: 4px;
-  text-decoration: none;
-  transition: background-color 0.2s;
+.markdown h3 + * {
+  @apply mt-0;
 }
 
-.prose .spoiler:hover {
-  background-color: transparent;
+.markdown h4 + * {
+  @apply mt-0;
 }

tailwind.config.ts

@@ -1,5 +1,4 @@
 import type { Config } from 'tailwindcss'
-import typography from '@tailwindcss/typography'
 
 const config: Config = {
   content: ['./src/**/*.{astro,ts,tsx,js,jsx}'],
@@ -54,31 +53,8 @@ const config: Config = {
       zIndex: {
         '1': '1',
       },
-      typography: ({ theme }) => ({
-        DEFAULT: {
-          css: {
-            '--tw-prose-body': theme('textColor.primary'),
-            '--tw-prose-headings': theme('textColor.primary'),
-            '--tw-prose-lead': theme('textColor.primary'),
-            '--tw-prose-links': theme('colors.accent/1'),
-            '--tw-prose-bold': theme('textColor.primary'),
-            '--tw-prose-counters': theme('textColor.primary'),
-            '--tw-prose-bullets': theme('textColor.primary'),
-            '--tw-prose-hr': theme('borderColor.primary'),
-            '--tw-prose-quotes': theme('textColor.secondary'),
-            '--tw-prose-quote-borders': theme('colors.accent/.8'),
-            '--tw-prose-captions': theme('textColor.secondary'),
-            '--tw-prose-code': theme('textColor.primary'),
-            '--tw-prose-pre-code': theme('textColor.primary'),
-            '--tw-prose-pre-bg': theme('backgroundColor.secondary'),
-            '--tw-prose-th-borders': theme('borderColor.primary'),
-            '--tw-prose-td-borders': theme('borderColor.primary'),
-          },
-        },
-      }),
     },
   },
-  plugins: [typography],
 }
 
 export default config