feat(ui): add @tailwindcss/typography for v4

.changeset/lazy-fans-grin.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add `@tailwindcss/typography` for v4

packages/ui/package.json

@@ -61,6 +61,7 @@
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@tailwindcss/typography": "^0.5.16",
     "cmdk": "^1.0.4",
     "cva": "1.0.0-beta.3",
     "embla-carousel-react": "^8.5.2",

packages/ui/styles/typography.css

@@ -0,0 +1,50 @@
+@plugin '@tailwindcss/typography';
+
+.prose {
+  --tw-prose-body: color-mix(in oklab, var(--color-foreground) 90%, transparent);
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-lead: var(--color-foreground);
+  --tw-prose-links: var(--color-foreground);
+  --tw-prose-bold: var(--color-foreground);
+  --tw-prose-counters: var(--color-muted-foreground);
+  --tw-prose-bullets: var(--color-muted-foreground);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-foreground);
+  --tw-prose-quote-borders: var(--color-border);
+  --tw-prose-captions: var(--color-foreground);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+  --tw-prose-code: var(--color-foreground);
+
+  & {
+    max-width: none;
+  }
+
+  :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    margin: 0 auto;
+  }
+
+  :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    padding: 2px 4px;
+    font-size: 13px;
+    border-radius: 6px;
+    background: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+    border: 1px solid hsl(var(--border));
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    font-style: normal;
+
+    p {
+      &:first-of-type::before,
+      &:last-of-type::after {
+        content: none;
+      }
+    }
+  }
+}