From d5dcaee576a37ec055ac6627b997144183ba00a5 Mon Sep 17 00:00:00 2001
From: jaydixit01 <jayddixit1@gmail.com>
Date: Mon, 4 Aug 2025 11:42:13 -0400
Subject: [PATCH 1/2] chore: fixed issue #2304 by adding better documentation
 to the font-weight section for inherited fonts

---
 src/docs/font-weight.mdx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/docs/font-weight.mdx b/src/docs/font-weight.mdx
index 5f4a8a2bc2..52442bb3da 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" />

From 1946c34e4bc2e93f67a2c6e7ac56300813ebfed7 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 12 Sep 2025 15:56:26 +0200
Subject: [PATCH 2/2] Solve it similarily to other examples

---
 src/docs/font-weight.mdx | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/docs/font-weight.mdx b/src/docs/font-weight.mdx
index 52442bb3da..ef47cee7ea 100644
--- a/src/docs/font-weight.mdx
+++ b/src/docs/font-weight.mdx
@@ -4,7 +4,6 @@ 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,25 +81,14 @@ Use utilities like `font-thin` and `font-bold` to set the font weight of an elem
 
 ### Using a custom value
 
-<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>
+<UsingACustomValue
+  element="p"
+  utility="font"
+  value="1000"
+  name="font weight"
+  variable="font-weight"
+  dataType="weight"
+/>
 
 ### Responsive design