GitbookIO · nolannbiron · Dec 20, 2025
diff --git a/bun.lock b/bun.lock
@@ -135,7 +135,6 @@
         "@radix-ui/react-tooltip": "^1.1.8",
         "@sindresorhus/fnv1a": "^3.1.0",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/typography": "^0.5.16",
         "@tusbar/cache-control": "^1.0.2",
         "ai": "^4.2.2",
         "assert-never": "catalog:",
@@ -1479,8 +1478,6 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.11", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "postcss": "^8.4.41", "tailwindcss": "4.1.11" } }, "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA=="],
 
-    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
-
     "@tanstack/virtual-core": ["@tanstack/virtual-core@3.10.8", "", {}, "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA=="],
 
     "@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.10.8", "", { "dependencies": { "@tanstack/virtual-core": "3.10.8" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ=="],
@@ -2323,8 +2320,6 @@
 
     "locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
 
-    "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
-
     "lodash.clonedeep": ["lodash.clonedeep@4.5.0", "", {}, "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="],
 
     "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
@@ -2341,8 +2336,6 @@
 
     "lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="],
 
-    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
-
     "lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="],
 
     "lodash.startcase": ["lodash.startcase@4.4.0", "", {}, "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg=="],
@@ -4021,8 +4014,6 @@
 
     "@tailwindcss/postcss/postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
 
-    "@tailwindcss/typography/postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
-
     "@ts-morph/common/fast-glob": ["fast-glob@3.3.2", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow=="],
 
     "@ts-morph/common/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],

diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
@@ -28,7 +28,6 @@
         "@radix-ui/react-tooltip": "^1.1.8",
         "@sindresorhus/fnv1a": "^3.1.0",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/typography": "^0.5.16",
         "@tusbar/cache-control": "^1.0.2",
         "ai": "^4.2.2",
         "assert-never": "catalog:",

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx
@@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind';
 
 import type { BlockProps } from '../Block';
 
-import './scalar.css';
-import './style.css';
+import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
 import type { AnyOpenAPIOperationsBlock } from '@/lib/openapi/types';
 import { getOpenAPIContext } from './context';
 
@@ -47,10 +46,13 @@ async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>
     }
 
     return (
-        <BaseOpenAPIOperation
-            data={data}
-            context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
-            className="openapi-block"
-        />
+        <>
+            <OpenAPIStyles />
+            <BaseOpenAPIOperation
+                data={data}
+                context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
+                className="openapi-block"
+            />
+        </>
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx
@@ -4,8 +4,7 @@ import { OpenAPISchemas as BaseOpenAPISchemas } from '@gitbook/react-openapi';
 
 import type { BlockProps } from '../Block';
 
-import './scalar.css';
-import './style.css';
+import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
 import type { OpenAPISchemasBlock } from '@/lib/openapi/types';
 import { getOpenAPIContext } from './context';
 
@@ -48,11 +47,14 @@ async function OpenAPISchemasBody(props: BlockProps<OpenAPISchemasBlock>) {
     }
 
     return (
-        <BaseOpenAPISchemas
-            schemas={data.schemas}
-            grouped={block.data.grouped}
-            context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
-            className="openapi-block"
-        />
+        <>
+            <OpenAPIStyles />
+            <BaseOpenAPISchemas
+                schemas={data.schemas}
+                grouped={block.data.grouped}
+                context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
+                className="openapi-block"
+            />
+        </>
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * Dummy component to lazy load the OpenAPI CSS.
+ */
+export default function OpenAPIStyles() {
+    // Load the CSS as soon as possible (this is why we don't use an effect hook here)
+    // We lazy load the CSS to avoidNext bundling it in the main bundle
+    loadCSS();
+
+    return null;
+}
+
+let loaded = false;
+
+function loadCSS() {
+    if (loaded || typeof window === 'undefined') {
+        return;
+    }
+
+    loaded = true;
+
+    // @ts-ignore
+    import('./style.css').then(() => {
+        document.body.classList.add('openapi-styles-loaded');
+    });
+}
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx
@@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind';
 
 import type { BlockProps } from '../Block';
 
-import './scalar.css';
-import './style.css';
+import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
 import type { OpenAPIWebhookBlock } from '@/lib/openapi/types';
 import { getOpenAPIContext } from './context';
 
@@ -49,10 +48,13 @@ async function OpenAPIWebhookBody(props: BlockProps<OpenAPIWebhookBlock>) {
     }
 
     return (
-        <BaseOpenAPIWebhook
-            data={data}
-            context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
-            className="openapi-block"
-        />
+        <>
+            <OpenAPIStyles />
+            <BaseOpenAPIWebhook
+                data={data}
+                context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
+                className="openapi-block"
+            />
+        </>
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx
@@ -9,8 +9,6 @@ import { PlainCodeBlock } from '../CodeBlock';
 import { DocumentView } from '../DocumentView';
 import { Heading } from '../Heading';
 
-import './scalar.css';
-import './style.css';
 import { DEFAULT_LOCALE, getSpaceLocale } from '@/intl/server';
 import type { GitBookAnyContext } from '@/lib/context';
 import type {

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -1,4 +1,5 @@
 @reference "../../RootLayout/globals.css";
+@import './scalar.css';
 
 /* Layout Components */
 .openapi-operation,
@@ -53,11 +54,6 @@
     @apply font-semibold font-mono truncate;
 }
 
-.openapi-description.openapi-markdown,
-.openapi-description.openapi-markdown code {
-    @apply prose-sm;
-}
-
 /* Markdown Elements */
 .openapi-markdown blockquote {
     @apply !ps-3;
@@ -81,7 +77,7 @@
 
 /* Markdown Base */
 .openapi-markdown {
-    @apply prose text-tint-strong prose-p:my-2! dark:prose-invert max-w-none whitespace-normal;
+    @apply prose prose-sm text-tint-strong dark:prose-invert max-w-none whitespace-normal;
 }
 
 .openapi-markdown > *:first-child {
@@ -160,7 +156,7 @@
 }
 
 .openapi-schema-root-description.openapi-markdown {
-    @apply prose-sm text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text;
 }
 
 .openapi-section-schemas > .openapi-section-body > .openapi-schema-root-description {
@@ -279,7 +275,7 @@
 
 /* Schema Description */
 .openapi-schema-description.openapi-markdown {
-    @apply prose-sm text-tint overflow-hidden text-pretty font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-tint overflow-hidden text-pretty font-normal! select-text;
 }
 
 .openapi-schema-description.openapi-markdown pre:has(code) {
@@ -301,7 +297,7 @@
 .openapi-schema-example,
 .openapi-schema-pattern,
 .openapi-schema-default {
-    @apply prose-sm text-tint;
+    @apply text-sm text-tint;
 }
 
 .openapi-schema-example code,
@@ -322,7 +318,7 @@
 
 .openapi-securities-oauth-content,
 .openapi-securities-scopes {
-    @apply prose *:!prose-sm *:text-tint;
+    @apply prose prose-sm text-sm *:text-tint;
 }
 
 .openapi-securities-oauth-content {
@@ -346,7 +342,7 @@
 }
 
 .openapi-securities-description.openapi-markdown {
-    @apply prose-sm text-tint font-normal! select-text text-pretty prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-tint font-normal! select-text text-pretty;
 }
 
 .openapi-securities-label {
@@ -377,7 +373,7 @@
 }
 
 .openapi-requestbody-description.openapi-markdown {
-    @apply prose-sm text-tint font-normal! text-pretty select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-tint font-normal! text-pretty select-text;
 }
 
 /* Responses */
@@ -395,7 +391,7 @@
 }
 
 .openapi-response-description.openapi-markdown {
-    @apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-left leading-tight text-tint select-text;
 }
 
 .openapi-disclosure-group-trigger[aria-expanded="false"] .openapi-response-description.openapi-markdown {

diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -2,6 +2,13 @@
 
 @config '../../../tailwind.config.ts';
 
+@import './prose.css';
+
+/* Prevent flash of unstyled OpenAPI blocks while the OpenAPI styles are lazy-loaded. */
+body:not(.openapi-styles-loaded) .openapi-block {
+    display: none;
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still