Add logical sizing and typography utilities documentation

package.json

@@ -16,7 +16,7 @@
     "@mdx-js/loader": "^3.1.1",
     "@next/mdx": "16.1.6",
     "@shikijs/transformers": "^1.29.2",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "0.0.0-insiders.d52c94f",
     "clsx": "^2.1.1",
     "dedent": "^1.6.0",
     "fathom-client": "^3.7.2",
@@ -28,7 +28,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shiki": "^1.29.2",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "0.0.0-insiders.d52c94f"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

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

@@ -75,6 +75,12 @@ export default {
     ["height", "/docs/height"],
     ["min-height", "/docs/min-height"],
     ["max-height", "/docs/max-height"],
+    ["inline-size", "/docs/inline-size"],
+    ["min-inline-size", "/docs/min-inline-size"],
+    ["max-inline-size", "/docs/max-inline-size"],
+    ["block-size", "/docs/block-size"],
+    ["min-block-size", "/docs/min-block-size"],
+    ["max-block-size", "/docs/max-block-size"],
   ] as const,
   Typography: [
     ["font-family", "/docs/font-family"],
@@ -84,6 +90,7 @@ export default {
     ["font-weight", "/docs/font-weight"],
     ["font-stretch", "/docs/font-stretch"],
     ["font-variant-numeric", "/docs/font-variant-numeric"],
+    ["font-feature-settings", "/docs/font-feature-settings"],
     ["letter-spacing", "/docs/letter-spacing"],
     ["line-clamp", "/docs/line-clamp"],
     ["line-height", "/docs/line-height"],

src/docs/block-size.mdx

@@ -0,0 +1,190 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "block-size";
+export const description = "Utilities for setting the block size of an element.";
+
+<ApiTable
+  rows={[
+    ["block-<number>", "block-size: calc(var(--spacing) * <number>);"],
+    ["block-<fraction>", "block-size: calc(<fraction> * 100%);"],
+    ["block-auto", "block-size: auto;"],
+    ["block-px", "block-size: 1px;"],
+    ["block-full", "block-size: 100%;"],
+    ["block-screen", "block-size: 100vh;"],
+    ["block-dvh", "block-size: 100dvh;"],
+    ["block-dvw", "block-size: 100dvw;"],
+    ["block-lvh", "block-size: 100lvh;"],
+    ["block-lvw", "block-size: 100lvw;"],
+    ["block-svh", "block-size: 100svh;"],
+    ["block-svw", "block-size: 100svw;"],
+    ["block-min", "block-size: min-content;"],
+    ["block-max", "block-size: max-content;"],
+    ["block-fit", "block-size: fit-content;"],
+    ["block-lh", "block-size: 1lh;"],
+    ["block-(<custom-property>)", "block-size: var(<custom-property>);"],
+    ["block-[<value>]", "block-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `block-<number>` utilities like `block-24` and `block-64` to set an element to a fixed block size based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-96">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-96</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-80">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-80</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-64">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-64</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-48">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-48</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-40">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-40</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-32">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-32</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-24">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-24</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:block-96,block-80,block-64,block-48,block-40,block-32,block-24] -->
+<div class="block-96 ...">block-96</div>
+<div class="block-80 ...">block-80</div>
+<div class="block-64 ...">block-64</div>
+<div class="block-48 ...">block-48</div>
+<div class="block-40 ...">block-40</div>
+<div class="block-32 ...">block-32</div>
+<div class="block-24 ...">block-24</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `block-full` or `block-<fraction>` utilities like `block-1/2` and `block-2/5` to give an element a percentage-based block size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white block-96">
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-full">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-full</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-9/10">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-9/10</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-3/4">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-3/4</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/2">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/2</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/3">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/3</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:block-9/10,block-3/4,block-1/2,block-1/3,block-full] -->
+<div class="block-full ...">block-full</div>
+<div class="block-9/10 ...">block-9/10</div>
+<div class="block-3/4 ...">block-3/4</div>
+<div class="block-1/2 ...">block-1/2</div>
+<div class="block-1/3 ...">block-1/3</div>
+```
+
+</Figure>
+
+### Matching viewport
+
+Use the `block-screen` utility to make an element span the entire block size of the viewport:
+
+```html
+<!-- [!code classes:block-screen] -->
+<div class="block-screen">
+  <!-- ... -->
+</div>
+```
+
+### Matching dynamic viewport
+
+Use the `block-dvh` utility to make an element span the entire block size of the viewport, which changes as the browser UI expands or contracts:
+
+```html
+<!-- [!code classes:block-dvh] -->
+<div class="block-dvh">
+  <!-- ... -->
+</div>
+```
+
+### Matching large viewport
+
+Use the `block-lvh` utility to set an element's block size to the largest possible size of the viewport:
+
+```html
+<!-- [!code classes:block-lvh] -->
+<div class="block-lvh">
+  <!-- ... -->
+</div>
+```
+
+### Matching small viewport
+
+Use the `block-svh` utility to set an element's block size to the smallest possible size of the viewport:
+
+```html
+<!-- [!code classes:block-svh] -->
+<div class="block-svh">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="block" value="32rem" name="block size" variable="block-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="block-size" defaultClass="block-1/2" featuredClass="block-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="block" />

src/docs/border-color.mdx

@@ -21,6 +21,8 @@ export const description = "Utilities for controlling the color of an element's
       ["border-y", (value) => `border-block-color: ${value}`],
       ["border-s", (value) => `border-inline-start-color: ${value}`],
       ["border-e", (value) => `border-inline-end-color: ${value}`],
+      ["border-bs", (value) => `border-block-start-color: ${value}`],
+      ["border-be", (value) => `border-block-end-color: ${value}`],
       ["border-t", (value) => `border-top-color: ${value}`],
       ["border-r", (value) => `border-right-color: ${value}`],
       ["border-b", (value) => `border-bottom-color: ${value}`],
@@ -239,6 +241,13 @@ Use utilities like `border-s-indigo-500` and `border-e-lime-100` to set the `bor
 
 </Figure>
 
+Use the `border-bs-*` and `border-be-*` utilities to set the `border-block-start-color` and `border-block-end-color` logical properties, which map to either the top or bottom border based on the writing mode:
+
+```html
+<!-- [!code classes:border-bs-indigo-500] -->
+<div class="border-bs-indigo-500 ..."></div>
+```
+
 ### Divider between children
 
 Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color between child elements:

src/docs/border-width.mdx

@@ -29,6 +29,14 @@ export const description = "Utilities for controlling the width of an element's
     ["border-e-<number>", "border-inline-end-width: <number>px;"],
     ["border-e-(length:<custom-property>)", "border-inline-end-width: var(<custom-property>);"],
     ["border-e-[<value>]", "border-inline-end-width: <value>;"],
+    ["border-bs", "border-block-start-width: 1px;"],
+    ["border-bs-<number>", "border-block-start-width: <number>px;"],
+    ["border-bs-(length:<custom-property>)", "border-block-start-width: var(<custom-property>);"],
+    ["border-bs-[<value>]", "border-block-start-width: <value>;"],
+    ["border-be", "border-block-end-width: 1px;"],
+    ["border-be-<number>", "border-block-end-width: <number>px;"],
+    ["border-be-(length:<custom-property>)", "border-block-end-width: var(<custom-property>);"],
+    ["border-be-[<value>]", "border-block-end-width: <value>;"],
     ["border-t", "border-top-width: 1px;"],
     ["border-t-<number>", "border-top-width: <number>px;"],
     ["border-t-(length:<custom-property>)", "border-top-width: var(<custom-property>);"],
@@ -266,6 +274,13 @@ Use utilities like `border-s` and `border-e-4` to set the `border-inline-start-w
 
 </Figure>
 
+Use the `border-bs-<number>` and `border-be-<number>` utilities to set the `border-block-start-width` and `border-block-end-width` logical properties, which map to either the top or bottom border based on the writing mode:
+
+```html
+<!-- [!code classes:border-bs-4] -->
+<div class="border-bs-4 ..."></div>
+```
+
 ### Between children
 
 Use utilities like `divide-x` and `divide-y-4` to add borders between child elements:

src/docs/font-feature-settings.mdx

@@ -0,0 +1,56 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "font-feature-settings";
+export const description = "Utilities for controlling advanced typographic features.";
+
+<ApiTable
+  rows={[
+    ["font-features-[<value>]", "font-feature-settings: <value>;"],
+    ["font-features-(<custom-property>)", "font-feature-settings: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `font-features-[<value>]` utility to enable OpenType features in fonts that support them:
+
+```html
+<!-- [!code classes:font-features-["smcp"]] -->
+<p class="font-features-['smcp'] ...">
+  This text uses small caps.
+</p>
+```
+
+### Enabling multiple features
+
+You can enable multiple OpenType features by separating them with commas:
+
+```html
+<!-- [!code classes:font-features-["smcp","onum"]] -->
+<p class="font-features-['smcp','onum'] ...">
+  This text uses small caps and oldstyle numbers.
+</p>
+```
+
+### Using CSS variables
+
+Use the `font-features-(<custom-property>)` syntax to apply font feature settings from a CSS variable:
+
+```html
+<!-- [!code classes:font-features-(--my-features)] -->
+<p class="font-features-(--my-features) ...">
+  <!-- ... -->
+</p>
+```
+
+### Responsive design
+
+<ResponsiveDesign
+  property="font-feature-settings"
+  defaultClass="font-features-['tnum']"
+  featuredClass="font-features-['smcp']"
+  element="p"
+/>