diff --git a/src/docs/font-weight.mdx b/src/docs/font-weight.mdx
index 5f4a8a2bc..52442bb3d 100644
--- a/src/docs/font-weight.mdx
+++ b/src/docs/font-weight.mdx
@@ -2,6 +2,8 @@ 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";
+import { CodeExample } from "@/components/code-example.tsx";
+
 
 export const title = "font-weight";
 export const description = "Utilities for controlling the font weight of an element.";
@@ -82,6 +84,24 @@ Use utilities like `font-thin` and `font-bold` to set the font weight of an elem
 
 <UsingACustomValue element="p" utility="font" value="1000" name="font weight" variable="font-weight" />
 
+If you want a child element (like a <code>&lt;th&gt;</code>) to inherit its font weight from a parent, use the <code>font-[weight:inherit]</code> syntax to avoid ambiguity:
+
+<div className="not-prose">
+  <CodeExample
+    example={{
+      lang: "html",
+      code: `<table class="font-bold">
+  <tbody>
+    <tr>
+      <th class="font-[weight:inherit]">Lorem ipsum dolor sit amet...</th>
+      <td>Lorem ipsum dolor sit amet...</td>
+    </tr>
+  </tbody>
+</table>`,
+    }}
+  />
+</div>
+
 ### Responsive design
 
 <ResponsiveDesign element="p" property="font-weight" defaultClass="font-normal" featuredClass="font-bold" />