Tailwind CSS v4.1 documentation and blog post (#2189)

Co-authored-by: Dan Hollick <[email protected]>
Co-authored-by: Daniel Hollick <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>
Co-authored-by: Adam Wathan <[email protected]>

Author: 4 people

package.json

@@ -15,7 +15,7 @@
     "@heroicons/react": "^2.2.0",
     "@next/mdx": "15.3.0-canary.23",
     "@shikijs/transformers": "^1.29.1",
-    "@tailwindcss/postcss": "^4.1.1",
+    "@tailwindcss/postcss": "4.1.1",
     "@types/mdx": "^2.0.13",
     "clsx": "^2.1.1",
     "dedent": "^1.5.3",
@@ -28,11 +28,11 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "shiki": "^1.29.1",
-    "tailwindcss": "^4.1.1"
+    "tailwindcss": "4.1.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tailwindcss/node": "^4.1.1",
+    "@tailwindcss/node": "4.1.1",
     "@types/hast": "^3.0.4",
     "@types/node": "^22.13.13",
     "@types/react": "^19.0.12",

pnpm-lock.yaml

@@ -104,6 +104,7 @@ export default {
     ["vertical-align", "/docs/vertical-align"],
     ["white-space", "/docs/white-space"],
     ["word-break", "/docs/word-break"],
+    ["overflow-wrap", "/docs/overflow-wrap"],
     ["hyphens", "/docs/hyphens"],
     ["content", "/docs/content"],
   ] as const,
@@ -129,9 +130,19 @@ export default {
   ] as const,
   Effects: [
     ["box-shadow", "/docs/box-shadow"],
+    ["text-shadow", "/docs/text-shadow"],
     ["opacity", "/docs/opacity"],
     ["mix-blend-mode", "/docs/mix-blend-mode"],
     ["background-blend-mode", "/docs/background-blend-mode"],
+    ["mask-clip", "/docs/mask-clip"],
+    ["mask-composite", "/docs/mask-composite"],
+    ["mask-image", "/docs/mask-image"],
+    ["mask-mode", "/docs/mask-mode"],
+    ["mask-origin", "/docs/mask-origin"],
+    ["mask-position", "/docs/mask-position"],
+    ["mask-repeat", "/docs/mask-repeat"],
+    ["mask-size", "/docs/mask-size"],
+    ["mask-type", "/docs/mask-type"],
   ] as const,
   Filters: [
     [

public/og-background.jpg

@@ -119,23 +119,23 @@ After about five false starts, we finally figured out an approach we liked, and
   {
     <div className="flex flex-col justify-center gap-8 sm:flex-row sm:gap-16">
       <div className="flex shrink-0 flex-col items-center">
-        <p className="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
           <>shadow-cyan-500/50</>
         </p>
         <button className="rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/50 focus:outline-none">
           <>Subscribe</>
         </button>
       </div>
       <div className="flex shrink-0 flex-col items-center">
-        <p className="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
           <>shadow-blue-500/50</>
         </p>
         <button className="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-blue-500/50 focus:outline-none">
           <>Subscribe</>
         </button>
       </div>
       <div className="flex shrink-0 flex-col items-center">
-        <p className="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
           <>shadow-indigo-500/50</>
         </p>
         <button className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/50 focus:outline-none">

src/app/(docs)/docs/index.tsx

@@ -74,7 +74,9 @@ export function CodeExampleWrapper({ className, children }: { className?: string
 export function CodeExampleStack({ children }: { children: React.ReactNode }) {
   return (
     <div data-stack>
-      <div className="not-prose rounded-xl dark:outline dark:-outline-offset-1 dark:outline-white/10">{children}</div>
+      <div className="not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1">
+        {children}
+      </div>
     </div>
   );
 }

src/app/opengraph-image.jpg

@@ -37,7 +37,7 @@ function htmlSnippet({
     parts.push("></iframe>");
   } else {
     parts.push(">\n");
-    parts.push("  <!-- ... -->\n");
+    parts.push(elementName === "p" ? "  Lorem ipsum dolor sit amet...\n" : "  <!-- ... -->\n");
     parts.push(`</${elementName}>`);
   }
 

src/blog/tailwindcss-v3/index.mdx

@@ -54,7 +54,7 @@ function VersionPicker() {
         className="flex items-center gap-0.5 rounded-2xl bg-gray-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-gray-950 tabular-nums hover:bg-gray-950/7.5 data-active:bg-gray-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5"
         aria-label="Select version of library"
       >
-        v4.0
+        v4.1
         <ChevronDownIcon className="size-4 fill-gray-400" />
       </MenuButton>
       <MenuItems
@@ -63,7 +63,7 @@ function VersionPicker() {
       >
         <MenuItem disabled>
           <div className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10">
-            v4.0
+            v4.1
             <CheckIcon className="size-4" />
           </div>
         </MenuItem>

src/blog/tailwindcss-v4-1/card.jpg

@@ -16,7 +16,7 @@ export function Stripes({
         border === "x" && "border-x",
         border === "y" && "border-y",
         noColor === false && "text-black/10 dark:text-white/12.5",
-        "bg-[size:8px_8px] bg-left-top",
+        "bg-[size:8px_8px] bg-top-left",
         "bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)]",
       )}
     >

src/blog/tailwindcss-v4-1/index.mdx

@@ -12,8 +12,11 @@ export const description =
   rows={[
     ["items-start", "align-items: flex-start;"],
     ["items-end", "align-items: flex-end;"],
+    ["items-end-safe", "align-items: safe flex-end;"],
     ["items-center", "align-items: center;"],
+    ["items-center-safe", "align-items: safe center;"],
     ["items-baseline", "align-items: baseline;"],
+    ["items-baseline-last", "align-items: last baseline;"],
     ["items-stretch", "align-items: stretch;"],
   ]}
 />
@@ -22,7 +25,7 @@ export const description =
 
 ### Stretch
 
-Use `items-stretch` to stretch items to fill the container's cross axis:
+Use the `items-stretch` utility to stretch items to fill the container's cross axis:
 
 <Figure>
 
@@ -52,7 +55,7 @@ Use `items-stretch` to stretch items to fill the container's cross axis:
 
 ### Start
 
-Use `items-start` to align items to the start of the container's cross axis:
+Use the `items-start` utility to align items to the start of the container's cross axis:
 
 <Figure>
 
@@ -82,7 +85,7 @@ Use `items-start` to align items to the start of the container's cross axis:
 
 ### Center
 
-Use `items-center` to align items along the center of the container's cross axis:
+Use the `items-center` utility to align items along the center of the container's cross axis:
 
 <Figure>
 
@@ -112,7 +115,7 @@ Use `items-center` to align items along the center of the container's cross axis
 
 ### End
 
-Use `items-end` to align items to the end of the container's cross axis:
+Use the `items-end` utility to align items to the end of the container's cross axis:
 
 <Figure>
 
@@ -142,7 +145,7 @@ Use `items-end` to align items to the end of the container's cross axis:
 
 ### Baseline
 
-Use `items-baseline` to align items along the container's cross axis such that all of their baselines align:
+Use the `items-baseline` utility to align items along the container's cross axis such that all of their baselines align:
 
 <Figure>
 
@@ -170,6 +173,69 @@ Use `items-baseline` to align items along the container's cross axis such that a
 
 </Figure>
 
+### Last baseline
+
+Use the `items-baseline-last` utility to align items along the container's cross axis such that all of their baselines align with the last baseline in the container:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
+      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
+        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
+          <img
+            className="size-[2rem] rounded-full"
+            src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
+            alt=""
+          />
+          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Spencer Sharp</div>
+          <p className="text-sm sm:col-start-2">Working on the future of astronaut recruitment at Space Recruit.</p>
+        </div>
+        <a
+          href="#"
+          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
+        >
+          spacerecruit.com
+        </a>
+      </div>
+      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
+        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
+          <img
+            className="size-[2rem] rounded-full"
+            src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Alex Reed</div>
+          <p className="text-sm sm:col-start-2">A multidisciplinary designer.</p>
+        </div>
+        <a
+          href="#"
+          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
+        >
+          alex-reed.com
+        </a>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-baseline-last] -->
+<div class="grid grid-cols-[1fr_auto] items-baseline-last">
+  <div>
+    <img src="img/spencer-sharp.jpg" />
+    <h4>Spencer Sharp</h4>
+    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
+  </div>
+  <p>spacerecruit.com</p>
+</div>
+```
+
+</Figure>
+
+This is useful for ensuring that text items align with each other, even if they have different heights.
+
 ### Responsive design
 
 <ResponsiveDesign property="align-items" defaultClass="flex items-stretch" featuredClass="items-center" />