Document tab-* utilities (#2485)

Direct link:
https://tailwindcss-com-git-feat-document-tab-utilities-tailwindlabs.vercel.app/docs/tab-size

This PR documents the `tab-*` utilities introduced by:
tailwindlabs/tailwindcss#20022

The syntax highlighting is done by the MDX pipeline we have (shiki) but
because if that the MDX looks a bit... insane. It did allow us to go
from MDX to JSX to MDX and back.

<img width="1694" height="1856" alt="image"
src="https://github.com/user-attachments/assets/fa13ffef-ec86-4e66-8dd2-fd8cc5901b14"
/>

Author: RobinMalfait

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

@@ -108,6 +108,7 @@ export default {
     ["text-overflow", "/docs/text-overflow"],
     ["text-wrap", "/docs/text-wrap"],
     ["text-indent", "/docs/text-indent"],
+    ["tab-size", "/docs/tab-size"],
     ["vertical-align", "/docs/vertical-align"],
     ["white-space", "/docs/white-space"],
     ["word-break", "/docs/word-break"],

src/docs/tab-size.mdx

@@ -0,0 +1,67 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "tab-size";
+export const description = "Utilities for controlling the size of tab characters.";
+
+<ApiTable
+  rows={[
+    ["tab-<number>", "tab-size: <number>;"],
+    ["tab-(<custom-property>)", "tab-size: var(<custom-property>);"],
+    ["tab-[<value>]", "tab-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `tab-<number>` utilities like `tab-2` and `tab-8` to control the size of tab characters:
+
+<Figure>
+
+<Example>
+  <div className="grid gap-6 sm:grid-cols-2">
+    <div className="tab-2">
+      <span className="mb-3 block font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tab-2</span>
+
+{/* prettier-ignore */}
+```jsx
+function indent() {
+	return 'tabbed';
+}
+```
+
+    </div>
+    <div className="tab-8">
+      <span className="mb-3 block font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tab-8</span>
+
+{/* prettier-ignore */}
+```jsx
+function indent() {
+	return 'tabbed';
+}
+```
+
+    </div>
+
+  </div>
+</Example>
+
+```html
+<!-- [!code classes:tab-2,tab-8] -->
+<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>
+<pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="pre" utility="tab" name="tab size" value="12px" variable="tab-size" />
+
+### Responsive design
+
+<ResponsiveDesign element="pre" property="tab-size" defaultClass="tab-4" featuredClass="tab-8" />

src/docs/theme.mdx

@@ -190,6 +190,14 @@ Defining new theme variables in these namespaces will make new corresponding uti
         Line height utilities like <code>leading-tight</code>
       </td>
     </tr>
+    <tr>
+      <td className="whitespace-nowrap">
+        <code>--tab-size-*</code>
+      </td>
+      <td>
+        Tab size utilities like <code>tab-github</code>
+      </td>
+    </tr>
     <tr>
       <td className="whitespace-nowrap">
         <code>--breakpoint-*</code>