GitbookIO · zenoachtig · May 1, 2025 · May 1, 2025 · May 1, 2025 · May 1, 2025
diff --git a/.changeset/twenty-teachers-hang.md b/.changeset/twenty-teachers-hang.md
@@ -0,0 +1,8 @@
+---
+"gitbook-v2": patch
+"@gitbook/react-math": patch
+"gitbook": patch
+"@gitbook/icons": patch
+---
+
+Upgrade to Tailwind v4
diff --git a/bun.lock b/bun.lock
diff --git a/packages/gitbook-v2/package.json b/packages/gitbook-v2/package.json
@@ -19,7 +19,7 @@
         "gitbook": "*",
         "@opennextjs/cloudflare": "^1.0.0-beta.3",
         "@types/rison": "^0.0.9",
-        "tailwindcss": "^3.4.0",
+        "tailwindcss": "^4.1.5",
         "postcss": "^8"
     },
     "scripts": {

diff --git a/packages/gitbook-v2/postcss.config.js b/packages/gitbook-v2/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        '@tailwindcss/postcss': {},
     },
 };
diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
@@ -80,6 +80,7 @@
         "@cloudflare/next-on-pages": "1.13.12",
         "@cloudflare/workers-types": "^4.20241230.0",
         "@playwright/test": "^1.51.1",
+        "@tailwindcss/postcss": "^4.1.5",
         "@types/js-cookie": "^3.0.6",
         "@types/jsontoxml": "^1.0.5",
         "@types/jsonwebtoken": "^9.0.6",
@@ -91,14 +92,13 @@
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",
         "@types/rison": "^0.0.9",
-        "autoprefixer": "^10",
         "deepmerge": "^4.3.1",
         "env-cmd": "^10.1.0",
         "jsonwebtoken": "^9.0.2",
         "postcss": "^8",
         "psi": "^4.1.0",
         "stylelint": "^16.16.0",
-        "tailwindcss": "^3.4.0",
+        "tailwindcss": "^4.1.5",
         "ts-essentials": "^10.0.1",
         "typescript": "^5.5.3",
         "vercel": "^39.3.0"

diff --git a/packages/gitbook/postcss.config.js b/packages/gitbook/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        '@tailwindcss/postcss': {},
     },
 };
diff --git a/packages/gitbook/src/components/Adaptive/AIPageLinkSummary.tsx b/packages/gitbook/src/components/Adaptive/AIPageLinkSummary.tsx
@@ -175,7 +175,7 @@ export function AIPageLinkSummary(props: {
                     {shimmerBlocks.map((block, index) => (
                         <div
                             key={`${index}-${block}`}
-                            className={`${block} h-4 animate-pulse rounded straight-corners:rounded-none bg-tint-active`}
+                            className={`${block} h-4 animate-pulse rounded-sm straight-corners:rounded-none bg-tint-active`}
                         />
                     ))}
                 </div>

diff --git a/packages/gitbook/src/components/Ads/AdCoverRendering.tsx b/packages/gitbook/src/components/Ads/AdCoverRendering.tsx
@@ -49,7 +49,7 @@ export async function AdCoverRendering({
                 'rounded-lg',
                 'p-4',
                 'overflow-hidden',
-                'shadow-sm'
+                'shadow-xs'
             )}
             style={{ backgroundColor: ad.backgroundColor, color: ad.textColor ?? '#ffffff' }}
             href={ad.statlink}
@@ -68,7 +68,7 @@ export async function AdCoverRendering({
                 }}
             />
 
-            <div className={tcls('z-[2]')}>
+            <div className={tcls('z-2')}>
                 <img
                     alt="Large cover"
                     src={largeImage}
@@ -81,10 +81,10 @@ export async function AdCoverRendering({
                     )}
                 />
             </div>
-            <div className={tcls('z-[2]')}>
+            <div className={tcls('z-2')}>
                 <img alt={ad.company} src={ad.logo} className={tcls('max-w-36', 'max-h-12')} />
             </div>
-            <div className={tcls('flex', 'flex-col', 'z-[2]')}>
+            <div className={tcls('flex', 'flex-col', 'z-2')}>
                 <div className={tcls('text-sm', 'font-semibold', 'mb-2')}>{ad.companyTagline}</div>
                 <div
                     className={tcls(
@@ -99,7 +99,7 @@ export async function AdCoverRendering({
                     {ad.description}
                 </div>
             </div>
-            <div className={tcls('z-[2]')}>
+            <div className={tcls('z-2')}>
                 <span
                     className={tcls(
                         'text-sm',
@@ -119,7 +119,7 @@ export async function AdCoverRendering({
                 </span>
             </div>
             <div
-                className={tcls('absolute', 'inset-0', 'backdrop-blur', 'z-[1]')}
+                className={tcls('absolute', 'inset-0', 'backdrop-blur-sm', 'z-1')}
                 style={{
                     backgroundColor: hexToRgba(ad.backgroundColor, 0.8),
                 }}

diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -78,7 +78,7 @@ export function AnnouncementBanner(props: {
                     </Tag>
                     {closeable ? (
                         <button
-                            className={`absolute top-0 right-4 mt-2 mr-2 rounded straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
+                            className={`absolute top-0 right-4 mt-2 mr-2 rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
                             type="button"
                             onClick={dismissAnnouncement}
                         >
@@ -119,22 +119,22 @@ const BANNER_STYLES = {
         icon: 'circle-exclamation',
         iconColor: 'text-warning-subtle',
         close: 'hover:bg-tint-base hover:ring-warning-subtle',
-        link: 'links-default:text-warning links-default:hover:text-warning-strong links-default:decoration-warning/6 links-accent:decoration-warning',
+        link: 'links-default:text-warning hover:links-default:text-warning-strong links-default:decoration-warning/6 links-accent:decoration-warning',
     },
     danger: {
         container: 'bg-danger decoration-danger/6 ring-danger-subtle',
         hover: 'hover:bg-danger-hover',
         icon: 'triangle-exclamation',
         iconColor: 'text-danger-subtle',
         close: 'hover:bg-tint-base hover:ring-danger-subtle',
-        link: 'links-default:text-danger links-default:hover:text-danger-strong links-default:decoration-danger/6 links-accent:decoration-danger',
+        link: 'links-default:text-danger hover:links-default:text-danger-strong links-default:decoration-danger/6 links-accent:decoration-danger',
     },
     success: {
         container: 'bg-success decoration-success/6 ring-success-subtle',
         hover: 'hover:bg-success-hover',
         icon: 'circle-check',
         iconColor: 'text-success-subtle',
         close: 'hover:bg-tint-base hover:ring-success-subtle',
-        link: 'links-default:text-success links-default:hover:text-success-strong links-default:decoration-success/6 links-accent:decoration-success',
+        link: 'links-default:text-success hover:links-default:text-success-strong links-default:decoration-success/6 links-accent:decoration-success',
     },
 };
diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -45,7 +45,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'fixed',
                 'z-10',
                 'bg-tint-base',
-                'rounded',
+                'rounded-sm',
                 'straight-corners:rounded-none',
                 'ring-1',
                 'ring-tint-subtle',
@@ -82,7 +82,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                     'flex',
                     'justify-center',
                     'items-center',
-                    'rounded-sm',
+                    'rounded-xs',
                     'hover:bg-tint-hover'
                 )}
                 title={tString(language, 'cookies_close')}

diff --git a/packages/gitbook/src/components/DocumentView/Annotation/AnnotationPopover.tsx b/packages/gitbook/src/components/DocumentView/Annotation/AnnotationPopover.tsx
@@ -34,7 +34,7 @@ export function AnnotationPopover(props: { children: React.ReactNode; body: Reac
                         'bg-tint',
                         'ring-1',
                         'ring-tint',
-                        'rounded',
+                        'rounded-sm',
                         'shadow-1xs',
                         'shadow-tint-12/1',
                         'dark:shadow-tint-1/2',
@@ -53,7 +53,7 @@ export function AnnotationPopover(props: { children: React.ReactNode; body: Reac
                             viewBox="0 0 8 5"
                             className={tcls(
                                 'relative',
-                                'z-[2]',
+                                'z-2',
                                 'fill-tint-3', // Same as bg-tint
                                 'stroke-tint-7', // Same as ring-tint
                                 '[paint-order:stroke_fill]'

diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx
@@ -70,7 +70,7 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
                 style={[
                     'mx-auto w-full decoration-primary/6',
                     node.data && 'fullWidth' in node.data && node.data.fullWidth
-                        ? 'max-w-screen-xl'
+                        ? 'max-w-(--breakpoint-xl)'
                         : 'max-w-3xl',
                     blockStyle,
                 ]}

diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx
@@ -38,11 +38,11 @@ export function Caption(
             'overflow-hidden',
             'after:block',
             'after:absolute',
-            'after:-inset-[0]',
+            'after:-inset-0',
             'after:pointer-events-none',
             fit ? 'w-fit' : null,
             withBorder
-                ? 'rounded straight-corners:rounded-none after:border-tint-subtle after:border after:rounded straight-corners:after:rounded-none dark:after:mix-blend-plus-lighter after:pointer-events-none'
+                ? 'rounded-sm straight-corners:rounded-none after:border-tint-subtle after:border after:rounded-sm straight-corners:after:rounded-none dark:after:mix-blend-plus-lighter after:pointer-events-none'
                 : null,
         ],
         style,

diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.css b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.css
@@ -1,5 +1,7 @@
+@reference "../../RootLayout/globals.css";
+
 .highlight-line {
-    @apply grid [grid-template-columns:subgrid] col-span-2 relative ring-1 ring-transparent hover:ring-tint-hover hover:z-[1] rounded;
+    @apply grid [grid-template-columns:subgrid] col-span-2 relative ring-1 ring-transparent hover:ring-tint-hover hover:z-1 rounded;
     @apply only:hover:ring-transparent;
     @apply [counter-increment:line];
 
@@ -24,11 +26,11 @@
 }
 
 .highlight-line-number {
-    @apply text-sm text-right pr-3.5 rounded-l pl-2 sticky left-[-3px] bg-gradient-to-r from-80% from-tint-subtle contrast-more:from-tint-base theme-muted:from-tint-base [html.theme-bold.sidebar-filled_&]:from-tint-base to-transparent;
+    @apply text-sm text-right pr-3.5 rounded-l pl-2 sticky left-[-3px] bg-linear-to-r from-80% from-tint-subtle contrast-more:from-tint-base theme-muted:from-tint-base [html.theme-bold.sidebar-filled_&]:from-tint-base to-transparent;
     @apply before:text-tint before:content-[counter(line)];
 
     .highlight-line.highlighted > & {
-        @apply before:text-tint bg-gradient-to-r from-80% from-tint-active to-transparent;
+        @apply before:text-tint bg-linear-to-r from-80% from-tint-active to-transparent;
     }
 }
 

diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx
@@ -46,12 +46,12 @@ export const CodeBlockRenderer = forwardRef(function CodeBlockRenderer(
             </div>
             <CopyCodeButton
                 codeId={id}
-                style="z-[2] mt-2 mr-2 self-start justify-self-end rounded-md bg-transparent p-1 text-tint text-xs leading-none opacity-0 ring-1 ring-tint backdrop-blur-md transition-opacity duration-75 [grid-area:2/1] hover:ring-tint-hover group-hover/codeblock:opacity-[1]"
+                style="z-2 mt-2 mr-2 self-start justify-self-end rounded-md bg-transparent p-1 text-tint text-xs leading-none opacity-0 ring-1 ring-tint backdrop-blur-md transition-opacity duration-75 [grid-area:2/1] hover:ring-tint-hover group-hover/codeblock:opacity-11"
             />
             <pre
                 className={tcls(
                     'hide-scroll relative overflow-auto border border-tint-subtle bg-tint-subtle theme-muted:bg-tint-base [grid-area:2/1] contrast-more:border-tint contrast-more:bg-tint-base [html.theme-bold.sidebar-filled_&]:bg-tint-base',
-                    'rounded-md straight-corners:rounded-sm shadow-sm',
+                    'rounded-md straight-corners:rounded-xs shadow-xs',
                     title && 'rounded-ss-none'
                 )}
             >

diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css
@@ -1,3 +1,5 @@
+@reference "../../RootLayout/globals.css";
+
 :root {
     --shiki-color-text: theme("colors.tint.11");
     --shiki-token-punctuation: theme("colors.tint.11");

diff --git a/packages/gitbook/src/components/DocumentView/DocumentView.tsx b/packages/gitbook/src/components/DocumentView/DocumentView.tsx
@@ -85,7 +85,7 @@ export function DocumentViewSkeleton(props: { document: JSONDocument; blockStyle
                     style={[
                         'mx-auto w-full decoration-primary/6',
                         block.data && 'fullWidth' in block.data && block.data.fullWidth
-                            ? 'max-w-screen-xl'
+                            ? 'max-w-(--breakpoint-xl)'
                             : 'max-w-3xl',
                         blockStyle,
                     ]}

diff --git a/packages/gitbook/src/components/DocumentView/Expandable/Details.tsx b/packages/gitbook/src/components/DocumentView/Expandable/Details.tsx
@@ -50,12 +50,12 @@ export function Details(props: {
                 'border-b-0',
                 'border-tint-subtle',
                 //all
-                '[&]:mt-[0px]',
+                'mt-0!',
                 //select first child
-                '[&:first-child]:mt-5',
-                '[&:first-child]:rounded-t-lg',
+                'first:mt-5!',
+                'first:rounded-t-lg',
                 //select first in group
-                '[:not(&)_+&]:mt-5',
+                '[:not(&)_+&]:mt-5!',
                 '[:not(&)_+&]:rounded-t-lg',
                 //select last in group
                 '[&:not(:has(+_&))]:mb-5',

diff --git a/packages/gitbook/src/components/DocumentView/Heading.tsx b/packages/gitbook/src/components/DocumentView/Heading.tsx
@@ -40,10 +40,10 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                     'w-7',
                     'border-0',
                     'opacity-0',
-                    'group-hover:opacity-[0]',
-                    'group-focus:opacity-[0]',
-                    'md:group-hover:md:opacity-[1]',
-                    'md:group-focus:md:opacity-[1]',
+                    'group-hover:opacity-0',
+                    'group-focus:opacity-0',
+                    'md:md:group-hover:opacity-11',
+                    'md:md:group-focus:opacity-11',
                     textStyle.marginTop
                 )}
             >
@@ -70,7 +70,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             <div
                 className={tcls(
                     'grid-area-1-1',
-                    'z-[1]',
+                    'z-1',
                     'justify-self-start',
                     'text-left',
                     textStyle.lineHeight,

diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx
@@ -113,10 +113,10 @@ const HINT_STYLES: {
         header: 'bg-warning-active',
         body: [
             'text-neutral-strong',
-            'links-default:[&_a]:text-warning',
-            'links-default:[&_a:hover]:text-warning-strong',
-            'links-default:[&_a]:decoration-warning/6',
-            'links-accent:[&_a]:decoration-warning',
+            '[&_a]:links-default:text-warning',
+            '[&_a:hover]:links-default:text-warning-strong',
+            '[&_a]:links-default:decoration-warning/6',
+            '[&_a]:links-accent:decoration-warning',
             'decoration-warning/6',
             '[&_.can-override-bg]:bg-warning-active',
             '[&_.can-override-text]:text-warning-strong',
@@ -130,10 +130,10 @@ const HINT_STYLES: {
         header: 'bg-danger-active',
         body: [
             'text-neutral-strong',
-            'links-default:[&_a]:text-danger',
-            'links-default:[&_a:hover]:text-danger-strong',
-            'links-default:[&_a]:decoration-danger/6',
-            'links-accent:[&_a]:decoration-danger',
+            '[&_a]:links-default:text-danger',
+            '[&_a:hover]:links-default:text-danger-strong',
+            '[&_a]:links-default:decoration-danger/6',
+            '[&_a]:links-accent:decoration-danger',
             'decoration-danger/6',
             '[&_.can-override-bg]:bg-danger-active',
             '[&_.can-override-text]:text-danger-strong',
@@ -147,10 +147,10 @@ const HINT_STYLES: {
         header: 'bg-success-active',
         body: [
             'text-neutral-strong',
-            'links-default:[&_a]:text-success',
-            'links-default:[&_a:hover]:text-success-strong',
-            'links-default:[&_a]:decoration-success/6',
-            'links-accent:[&_a]:decoration-success',
+            '[&_a]:links-default:text-success',
+            '[&_a:hover]:links-default:text-success-strong',
+            '[&_a]:links-default:decoration-success/6',
+            '[&_a]:links-accent:decoration-success',
             'decoration-success/6',
             '[&_.can-override-bg]:bg-success-active',
             '[&_.can-override-text]:text-success-strong',

diff --git a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
@@ -1,3 +1,5 @@
+@reference '../../RootLayout/globals.css';
+
 /** Stacks */
 .contentkit-stack {
     @apply flex gap-4;
@@ -114,7 +116,7 @@
 
 /** Modals */
 .contentkit-modal-backdrop {
-    @apply fixed inset-0 z-40 px-7 pb-11 pt-4 md:pt-[min(8vw,_6rem)] flex items-start justify-center backdrop-blur-2xl bg-tint-12/4 dark:bg-tint-1/6;
+    @apply fixed inset-0 z-40 px-7 pb-11 pt-4 md:pt-[min(8vw,6rem)] flex items-start justify-center backdrop-blur-2xl bg-tint-12/4 dark:bg-tint-1/6;
 }
 .contentkit-modal {
     @apply flex flex-col gap-6 relative z-50 bg-tint

diff --git a/packages/gitbook/src/components/DocumentView/ListItem.tsx b/packages/gitbook/src/components/DocumentView/ListItem.tsx
@@ -165,7 +165,7 @@ function PseudoBefore(props: {
 }) {
     return (
         <div
-            className="before:font-var before:content-[--pseudoBefore--content]"
+            className="before:font-var before:content-(--pseudoBefore--content)"
             style={
                 {
                     '--pseudoBefore--content': `'${props.content}'`,

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css b/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css
@@ -1,4 +1,8 @@
-@import "@scalar/api-client-react/style.css";
+/* Import Scalar CSS only within .scalar-container context */
+.scalar-container {
+    @import "@scalar/api-client-react/style.css";
+}
+@reference "../../RootLayout/globals.css";
 
 html,
 body {