document tab-* utilities

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,78 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, 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" />
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  element="pre"
+  utility="tab"
+  themeKey="tab-size"
+  name="tab size"
+  customName="github"
+  customValue="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>