migrate to tailwind v4.0.0-beta.2

.eslintrc.cjs

@@ -168,7 +168,9 @@ module.exports = {
         'no-restricted-imports': [
           'error',
           { name: 'next/link', message: 'Use `<Anchor>` instead' }
-        ]
+        ],
+        // False positive due Tailwind CSS v4
+        'tailwindcss/no-custom-classname': 'off'
       }
     },
     // ⚙️ nextra-theme-blog
@@ -194,7 +196,9 @@ module.exports = {
             message:
               'Use `useTransitionRouter` from `next-view-transitions` instead'
           }
-        ]
+        ],
+        // False positive due Tailwind CSS v4
+        'tailwindcss/no-custom-classname': 'off'
       }
     },
     // ⚙️ nextra
@@ -216,7 +220,9 @@ module.exports = {
       },
       rules: {
         ...TAILWIND_CONFIG.rules,
-        'import/extensions': ['error', 'ignorePackages']
+        'import/extensions': ['error', 'ignorePackages'],
+        // False positive due Tailwind CSS v4
+        'tailwindcss/no-custom-classname': 'off'
       }
     },
     // ⚙️ Docs
@@ -237,7 +243,10 @@ module.exports = {
             'headline',
             'content-container',
             'feat-darkmode',
-            'features-container'
+            'features-container',
+            // New in TailwindCSS v4
+            'z-1',
+            'z-2'
           ],
           cssFiles: [
             'docs/app/globals.css',

docs/app/_components/i18n-demo.tsx

@@ -38,7 +38,7 @@ export const I18n: FC = () => {
             className={cn(
               'relative cursor-default select-none whitespace-nowrap px-4 py-1.5',
               active === lang
-                ? '_text-primary-600 _bg-primary-50 dark:_bg-primary-500/10'
+                ? 'x:text-primary-600 x:bg-primary-50 x:dark:bg-primary-500/10'
                 : 'text-gray-800 dark:text-gray-100 '
             )}
           >

docs/app/docs/advanced/latex/page.mdx

@@ -9,8 +9,6 @@ import {
   MathJaxContext,
 } from 'nextra/components'
 
-import 'nextra/katex.css'
-
 {/* TODO: inject in loader */}
 
 # LaTeX

docs/app/docs/advanced/playground/_demo.tsx

@@ -62,7 +62,7 @@ Z --> G
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-6">
       <Pre
         data-filename="MDX"
-        icon={<MdxIcon height="16" className="_shrink-0" />}
+        icon={<MdxIcon height="16" className="shrink-0" />}
       >
         <Code>
           <span

docs/app/docs/guide/syntax-highlighting/_dynamic-code.tsx

@@ -16,7 +16,7 @@ export const DynamicCode: FC<{ children: ReactNode }> = ({ children }) => {
   }, [])
   return (
     <>
-      <div ref={ref} className="_mt-6">
+      <div ref={ref} className="mt-6">
         {children}
       </div>
       <div className="flex mt-3 gap-3 justify-center text-sm">

docs/app/globals.css

@@ -1,5 +1,10 @@
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import 'nextra-theme-docs/style.css';
+
+@variant dark (&:where(.dark *));
+
+@theme {
+}
 
 body {
   font-feature-settings:

docs/app/layout.tsx

@@ -1,12 +1,11 @@
 import { NextraLogo, VercelLogo } from '@components/icons'
+import cn from 'clsx'
 import type { Metadata, Viewport } from 'next'
 import { Footer, Layout, Link, Navbar } from 'nextra-theme-docs'
 import { Banner, Head } from 'nextra/components'
 import { getPageMap } from 'nextra/page-map'
 import type { FC, ReactNode } from 'react'
 import './globals.css'
-import cn from 'clsx'
-import 'nextra-theme-docs/style.css'
 
 export const viewport: Viewport = Head.viewport
 

docs/app/page.css

@@ -8,14 +8,12 @@
   margin: 8rem 0 0;
   padding: 4rem 0;
   background-color: #f3f4f6;
-  border-bottom: 1px solid #e5e7eb;
 }
 .features-container .content-container {
   margin-top: -8rem;
 }
 .dark .features-container {
   background-color: #000;
-  border-bottom: 1px solid rgb(38, 38, 38);
 }
 .headline {
   display: inline-flex;

docs/app/page.tsx

@@ -39,7 +39,7 @@ const IndexPage: FC = () => {
           </Link>
         </p>
       </div>
-      <div className="features-container">
+      <div className="features-container x:border-b bordered">
         <div className="content-container">
           <Features>
             <Feature
@@ -220,15 +220,15 @@ const IndexPage: FC = () => {
                 <br />
                 zero-config needed
               </h3>
-              <p className="z-[2]">
+              <p className="z-2">
                 Nextra indexes your content automatically at build-time and
                 performs incredibly fast full-text search via{' '}
                 <Link href="https://github.com/cloudcannon/pagefind">
                   Pagefind
                 </Link>
                 .
               </p>
-              <div className="absolute size-full inset-0 max-sm:hidden bg-[linear-gradient(to_right,white_250px,_transparent)] dark:bg-[linear-gradient(to_right,#202020_250px,_transparent)] z-[1]" />
+              <div className="absolute size-full inset-0 max-sm:hidden bg-[linear-gradient(to_right,white_250px,_transparent)] dark:bg-[linear-gradient(to_right,#202020_250px,_transparent)] z-1" />
               <video
                 autoPlay
                 loop

docs/package.json

@@ -21,11 +21,11 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
+    "@tailwindcss/postcss": "^4.0.0-beta.2",
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.23",
-    "autoprefixer": "^10.4.16",
     "pagefind": "^1.1.1",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^4.0.0-beta.2"
   },
   "browserslist": [
     ">= .25%",

docs/postcss.config.mjs

@@ -3,7 +3,6 @@
 /** @type {import('postcss').Postcss} */
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 }

examples/blog/app/layout.jsx

@@ -10,7 +10,7 @@ export default async function RootLayout({ children }) {
   const banner = (
     <Banner storageKey="4.0-release">
       🎉 Nextra 4.0 is released.{' '}
-      <a href="#" className="_text-primary-600">
+      <a href="#" className="x:text-primary-600">
         Read more →
       </a>
     </Banner>

examples/blog/app/posts/page.jsx

@@ -17,7 +17,7 @@ export default async function PostsPage() {
     <div data-pagefind-ignore="all">
       <h1>{metadata.title}</h1>
       <div
-        className="_not-prose"
+        className="not-prose"
         style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem' }}
       >
         {Object.entries(allTags).map(([tag, count]) => (

examples/swr-site/app/[lang]/remote/graphql-eslint/[[...slug]]/page.tsx

@@ -55,11 +55,11 @@ export default async function Page(props) {
   )
   const data = await response.text()
   const rawJs = await compileMdx(data, { filePath })
-  const { default: MDXContent, toc, metadata } = evaluate(rawJs)
+  const { default: MDXContent, toc, metadata } = evaluate(rawJs, components)
 
   return (
     <Wrapper toc={toc} metadata={metadata}>
-      <MDXContent components={components} />
+      <MDXContent />
     </Wrapper>
   )
 }

examples/swr-site/app/[lang]/remote/graphql-yoga/[[...slug]]/page.tsx

@@ -82,10 +82,10 @@ export default async function Page(props) {
   const data = await response.text()
   const rawJs = await compileMdx(data, { filePath })
 
-  const { default: MDXContent, toc, metadata } = evaluate(rawJs)
+  const { default: MDXContent, toc, metadata } = evaluate(rawJs, components)
   return (
     <Wrapper toc={toc} metadata={metadata}>
-      <MDXContent components={components} />
+      <MDXContent />
     </Wrapper>
   )
 }

examples/swr-site/app/[lang]/styles.css

@@ -1,6 +1,8 @@
-@import 'nextra-theme-docs/dist/style.css' layer(nextra-base);
+@import 'tailwindcss';
+@import 'nextra-theme-docs/style.css' layer(nextra-base);
 
-@tailwind utilities;
+@theme {
+}
 
 body {
   --bg-dot-color: #d1d1d1;

examples/swr-site/app/_components/authors.tsx

@@ -26,10 +26,7 @@ export const TopContent: FC<{
         </time>{' '}
         {dictionary.by}{' '}
         {authors.map(author => (
-          <span
-            key={author.name}
-            className="[&:not(:last-child)]:after:content-[',_']"
-          >
+          <span key={author.name} className="not-last:after:content-[',_']">
             <a
               href={author.link}
               target="_blank"

examples/swr-site/content/en/docs/getting-started.mdx

@@ -184,12 +184,12 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 
 <details>
   <summary>Renders properly</summary>
-  <div className="_flex _justify-center">content</div>
+  <div className="flex justify-center">content</div>
 </details>
 
 <details>
   <summary>Renders on next line</summary>
-  <div className="_flex _justify-center">content</div>
+  <div className="flex justify-center">content</div>
 </details>
 
 Then you can import `useSWR` and start using it inside any function components:

examples/swr-site/content/en/examples/basic.mdx

@@ -4,6 +4,6 @@ title: Basic Usage
 
 <iframe
   src="https://codesandbox.io/embed/swr-basic-p7dg6?codemirror=1&fontsize=14&autoresize=1"
-  className="_w-full _h-[calc(100dvh-var(--nextra-navbar-height))] mt-6"
+  className="mt-6 h-[calc(100dvh-var(--nextra-navbar-height))] w-full"
   title="SWR - Basic Usage"
 />

examples/swr-site/nextra-remote-filepaths/graphql-eslint.json

@@ -11,4 +11,4 @@
     "getting-started/parser.mdx",
     "index.mdx"
   ]
-}
+}

examples/swr-site/package.json

@@ -26,10 +26,9 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.2.13",
-    "autoprefixer": "^10.4.16",
+    "@tailwindcss/postcss": "^4.0.0-beta.2",
     "pagefind": "^1.1.1",
-    "postcss-import": "^16.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^4.0.0-beta.2"
   },
   "browserslist": [
     ">= .25%",

examples/swr-site/postcss.config.js

@@ -1,8 +1,6 @@
 /** @type {import('postcss').Postcss} */
 export default {
   plugins: {
-    'postcss-import': {},
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 }

packages/nextra-theme-blog/package.json

@@ -34,16 +34,14 @@
     "next-view-transitions": "^0.3.0"
   },
   "devDependencies": {
-    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.2.23",
     "next": "^15.0.2",
     "nextra": "workspace:*",
     "postcss": "^8.4.33",
-    "postcss-import": "^16.0.0",
-    "postcss-lightningcss": "^1.0.0",
     "react": "18.3.1",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.0-beta.2",
     "vitest": "^2.0.3"
   },
   "sideEffects": false

packages/nextra-theme-blog/src/components/go-back.tsx

@@ -12,7 +12,7 @@ export function GoBack() {
   if (!isNestedPage) return null
 
   return (
-    <Button onClick={router.back} className="print:_hidden _underline">
+    <Button onClick={router.back} className="x:print:hidden x:underline">
       Back
     </Button>
   )

packages/nextra-theme-blog/src/components/layout.tsx

@@ -8,7 +8,7 @@ export const Footer: FC<{
   children = `CC BY-NC 4.0 ${new Date().getFullYear()} © Shu Ding.`
 }) => {
   return (
-    <small className="_mt-32 _block" data-pagefind-ignore="all">
+    <small className="x:mt-32 x:block" data-pagefind-ignore="all">
       {children}
     </small>
   )
@@ -23,7 +23,7 @@ export const Layout: FC<{
     <ThemeProvider attribute="class" {...nextThemes}>
       {banner}
       <article
-        className="_container _px-4 _prose max-md:_prose-sm dark:_prose-invert"
+        className="x:container x:px-4 x:prose x:max-md:prose-sm x:dark:prose-invert"
         dir="ltr"
         data-pagefind-body
       >

packages/nextra-theme-blog/src/components/meta.tsx

@@ -21,24 +21,24 @@ export const Meta: FC<BlogMetadata & { children: ReactNode }> = ({
   return (
     <div
       className={
-        '_mb-8 _flex _gap-3 ' +
-        (readingTimeText ? '_items-start' : '_items-center')
+        'x:mb-8 x:flex x:gap-3 ' +
+        (readingTimeText ? 'x:items-start' : 'x:items-center')
       }
     >
-      <div className="_not-prose _grow dark:_text-gray-400 _text-gray-600">
-        <div className="_flex _flex-wrap _items-center _gap-1">
+      <div className="x:grow x:dark:text-gray-400 x:text-gray-600">
+        <div className="x:flex x:flex-wrap x:items-center x:gap-1">
           {author}
           {author && date && ','}
 
           {children}
 
           {(author || date) && (readingTime || tags?.length) && (
-            <span className="_px-1">•</span>
+            <span className="x:px-1">•</span>
           )}
           {readingTimeText || tagsEl}
         </div>
         {readingTime && (
-          <div className="_mt-1 _flex _flex-wrap _items-center _gap-1">
+          <div className="x:mt-1 x:flex x:flex-wrap x:items-center x:gap-1">
             {tagsEl}
           </div>
         )}