Merge branch 'v4-beta-docs'

Author: adamwathan

src/components/ClassTable.js

@@ -49,6 +49,7 @@ export const ClassTable = memo(
     transformValue,
     custom,
     scroll,
+    showHeading = true,
   }) => {
     utilities = Object.fromEntries(Object.entries(utilities).filter(filterRules))
     let classes = Object.keys(utilities)
@@ -69,10 +70,12 @@ export const ClassTable = memo(
     }, [isCollapsed])
 
     return (
-      <div ref={ref} className="mt-10 relative">
-        <Heading level={2} id="class-reference" className="relative scroll-mt-[var(--scroll-mt)]">
-          <span className="sr-only">Quick reference</span>
-        </Heading>
+      <div ref={ref} className={clsx('relative', showHeading && 'mt-10')}>
+        {showHeading && (
+          <Heading level={2} id="class-reference" className="relative scroll-mt-[var(--scroll-mt)]">
+            <span className="sr-only">Quick reference</span>
+          </Heading>
+        )}
         <div className="overflow-x-auto flex -mx-4 sm:-mx-6 md:mx-0">
           <div
             id="class-table"

src/layouts/ContentsLayout.js

@@ -231,7 +231,7 @@ export function ContentsLayout({ children, meta, classes, tableOfContents, secti
         description={meta.description}
         repo={meta.repo}
         badge={{ key: 'Tailwind CSS version', value: meta.featureVersion }}
-        section={section}
+        section={section ?? meta.section}
       />
       <ContentsContext.Provider value={{ registerHeading, unregisterHeading }}>
         {classes ? (

src/layouts/SidebarLayout.js

@@ -95,7 +95,7 @@ function Nav({ nav, children, fallbackHref, mobile = false }) {
   }, [router.pathname])
 
   return (
-    <nav ref={scrollRef} id="nav" className="lg:text-sm lg:leading-6 relative">
+    <nav ref={scrollRef} id="nav" className="lg:text-sm lg:leading-6 relative pb-20">
       <div className="sticky top-0 -ml-0.5 pointer-events-none">
         {!mobile && <div className="h-10 bg-white dark:bg-slate-900" />}
         <div className="bg-white dark:bg-slate-900 relative pointer-events-auto">
@@ -525,6 +525,46 @@ export function SidebarLayout({
             <Nav nav={nav} fallbackHref={fallbackHref}>
               {sidebar}
             </Nav>
+
+            <div className="fixed bottom-0 left-[max(0px,calc(50%-45rem))] right-auto w-[19rem] pl-8 pr-6">
+              <Link
+                href={'/docs/v4-beta'}
+                className="group relative px-4 py-3 bg-slate-800 hover:bg-slate-900 text-white rounded-lg font-medium text-sm grid overflow-hidden border border-white/10 shadow-lg"
+              >
+                <div className="grid gap-1 z-20">
+                  <p>v4.0 Beta Documentation →</p>
+                  <p className="text-[0.8125rem] text-gray-300">Preview the next Tailwind CSS.</p>
+                </div>
+                <div className="absolute h-full w-1/2 right-0 top-0 overflow-hidden">
+                  <div className="absolute h-full w-full bg-gradient-to-r from-slate-800 group-hover:from-slate-900 z-10" />
+                  <svg
+                    className="absolute -top-4 -right-12"
+                    width="165"
+                    height="96"
+                    viewBox="0 0 165 96"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M93.0301 63.4105L93.0301 68.4739L93.0301 71.0057L93.0301 73.5374M93.0301 63.4105L98.1919 64.0006L118.345 66.3044C117.631 66.8832 116.863 67.5034 116.066 68.1028C106.209 75.5238 98.2194 77.4462 93.1673 73.6427C93.1209 73.6078 93.0752 73.5727 93.0301 73.5374M93.0301 63.4105C91.1447 65.8643 90.3565 68.0662 90.6924 69.9794C90.9258 71.3089 91.702 72.499 93.0301 73.5374M134.46 56.3822C134.54 52.8176 132.712 49.5452 128.943 46.7081C119.773 39.8039 107.225 41.5196 93.991 51.4832C85.6034 57.798 81.6091 63.8977 82.1263 69.2752M134.46 56.3822C134.347 61.4664 130.353 67.1449 122.574 73.0019C121.155 74.07 119.744 75.0435 118.345 75.9219C108.076 82.3698 98.4237 83.6975 90.6924 79.7446C89.6313 79.2021 88.6064 78.5601 87.6211 77.8183C84.2507 75.2809 82.4268 72.4 82.1263 69.2752M134.46 56.3822L134.462 62.5849C134.523 67.7552 130.527 73.5562 122.574 79.5439C109.312 89.5281 96.7642 91.2438 87.6211 84.3603C84.1199 81.7244 82.2875 78.7178 82.0982 75.4522L82.1263 69.2752M100.498 56.3823C99.6746 57.0024 98.9058 57.6225 98.1919 58.2013L106.218 59.132L123.507 61.1366C124.092 60.3785 124.571 59.6441 124.944 58.9349C125.631 57.6314 125.96 56.4127 125.932 55.287C125.89 53.6019 125.046 52.1251 123.397 50.8837C118.318 47.0595 110.328 48.982 100.498 56.3823Z"
+                      stroke="#626973"
+                      strokeWidth="0.5"
+                    />
+                    <path
+                      d="M60.6665 50.0558L55.0653 45.8389M60.6665 50.0558L66.103 45.9629V42.1073M60.6665 50.0558V46.2002M55.0653 45.8389L47.2127 51.7508M55.0653 45.8389V41.9832M47.2127 51.7508L41.0624 47.1205L41.0624 43.2649M47.2127 51.7508V47.8952M41.0624 43.2649L48.915 37.3529L43.5884 33.3427L36.3673 27.9061L31.0681 23.9166M41.0624 43.2649L47.2127 47.8952M41.0624 43.2649L46.4059 39.2419L31.0681 27.7722L31.0681 23.9166M31.0681 23.9166L36.3673 19.9271L75.4382 9.48809L82.1651 14.5525M82.1651 14.5525L82.1652 18.4082L47.1721 27.7722M82.1651 14.5525L75.4382 16.3501L44.0277 24.7434L43.5884 25.0742L47.1721 27.7722M71.0452 29.8699L65.1145 25.4049L54.5711 33.3427L47.1721 27.7722M71.0452 29.8699L60.4469 37.849L66.103 42.1073M71.0452 29.8699V32.1251V33.7255L63.1771 39.9045L66.103 42.1073M66.103 42.1073L60.6665 46.2002M60.6665 46.2002L60.4469 46.0348L55.0653 41.9832M55.0653 41.9832L54.5711 42.3553L48.915 46.6136L47.2127 47.8952"
+                      stroke="#626973"
+                      strokeWidth="0.5"
+                    />
+                    <path
+                      d="M79.8241 57.5565C79.813 56.0436 79.0577 54.543 77.5518 53.4092C74.4766 51.0941 69.3697 51.1354 66.2396 53.4919C64.5949 54.7302 63.7916 56.3851 63.8458 58.0128M79.8241 57.5565V57.6245M79.8241 57.5565C79.8243 57.5792 79.8243 57.6018 79.8241 57.6245M63.8458 58.0128C63.8948 59.4828 64.643 60.9305 66.1023 62.0291C69.1775 64.3443 74.3119 64.2823 77.4419 61.9258C79.0163 60.7405 79.8127 59.1787 79.8241 57.6245M63.8458 58.0128L63.8458 61.8684C63.8948 63.3384 64.643 64.7861 66.1023 65.8848C69.1775 68.2 74.3119 68.1379 77.4419 65.7814C79.0392 64.5789 79.8357 62.9888 79.8241 61.4121L79.8241 57.6245"
+                      stroke="#626973"
+                      strokeWidth="0.5"
+                    />
+                  </svg>
+                </div>
+              </Link>
+              <div className="h-6 bg-gradient-to-t from-white to-white/60 dark:from-slate-900 dark:to-slate-900/60" />
+            </div>
           </div>
           <div className="lg:pl-[19.5rem]">{children}</div>
         </div>

src/pages/blog/tailwindcss-v4-beta/card.jpg

@@ -0,0 +1,34 @@
+import { adamwathan } from '@/authors'
+import card from './card.jpg'
+
+
+export const meta = {
+  title: "Tailwind CSS v4.0 Beta 1",
+  description: `After a long alpha period, we're excited to release the first public beta of Tailwind CSS v4.0.`,
+  date: '2024-11-21T18:30:00.000Z',
+  authors: [adamwathan],
+  image: card,
+}
+
+{/*excerpt*/}
+
+About eight months ago we [open-sourced our progress](https://tailwindcss.com/blog/tailwindcss-v4-alpha) on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I'm excited to finally tag the first public beta release.
+
+{/*/excerpt*/}
+
+![Tailwind CSS v4.0-beta](./card.jpg)
+
+About eight months ago we [open-sourced our progress](https://tailwindcss.com/blog/tailwindcss-v4-alpha) on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I'm excited to finally tag the first public beta release.
+
+As I talked about when we published the first alpha, Tailwind CSS v4.0 is an all-new engine built for performance, and designed for the modern web.
+
+- **Built for performance** — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
+- **Unified toolchain** — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
+- **CSS-first configuration** — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
+- **Designed for the modern web** — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, `@starting-style`, popovers, and more.
+
+There's so much more to say, but everything you need to get started is in the new beta documentation we published today:
+
+[Get started with Tailwind CSS v4.0 Beta 1 →](/docs/v4-beta)
+
+Start building and help us bullet-proof this thing for the stable release early in the new year.