diff --git a/exampleSite/content/blog/v0.10.md b/exampleSite/content/blog/v0.10.md
index 0e1d330..ba3607b 100644
--- a/exampleSite/content/blog/v0.10.md
+++ b/exampleSite/content/blog/v0.10.md
@@ -14,15 +14,25 @@ Hextra v0.10.0 is a big release packed with new capabilities, architectural upgr
 
 <!--more-->
 
-It also includes contributions from 10 [new contributors](#contributors) and addresses some long-standing requests. To upgrade to v0.10.0, update the Hugo module:
+It also includes contributions from 10 [new contributors](#contributors) and addresses long-standing community requests.
+
+## Upgrade Guide
+
+> [!IMPORTANT]
+> **Breaking Changes**: This release includes several breaking changes. Please review the checklist and [Migration Guide](#migration-guide) before upgrading.
+
+Before upgrading to v0.10.0, ensure you have:
+
+- Hugo v0.146.0+ (extended version) installed
+- Reviewed custom CSS for class name changes (see [CSS Class Prefix Changes](#css-class-prefix-changes) and [Tailwind CSS v4](#tailwind-css-v4))
+- Ensured build environment has internet access for asset downloads
+
+Once ready, update the Hugo module:
 
 ```bash
 hugo mod get -u github.com/imfing/hextra@v0.10.0
 ```
 
-> [!IMPORTANT]
-> **Breaking Changes**: This release includes several breaking changes that may affect your site. Please review the [Migration Guide](#migration-guide) section before upgrading.
-
 ## New Features
 
 ### Dropdown Menu Support in Navbar
@@ -139,6 +149,8 @@ params:
 - **Image accessibility**: Prevented duplicate alt text rendering
 - **Link rendering**: Improved base URL handling for complex site structures
 
+---
+
 ## Migration Guide
 
 ### Breaking Changes
@@ -205,14 +217,14 @@ Hextra v0.10.0 now downloads KaTeX and Mermaid assets from CDN during build time
 
 #### Tailwind CSS v4
 
-**Impact**: Sites with extensive custom CSS targeting Hextra Tailwind classes
+**Impact**: Sites with extensive custom CSS targeting Hextra Tailwind classes `hx-*`
 
 While Hextra handles the Tailwind CSS v4 migration internally, sites with heavy customizations may need further adjustments.
 
 **What's changed:**
 
 - Internal CSS compilation now uses Tailwind CSS v4.x
-- Utitlity classes now prefix with `hx:` rather than `hx-`
+- Utility classes now prefix with `hx:` rather than `hx-`
 
 ## Contributors
 
diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md
index df7dd49..fc5a2e1 100644
--- a/exampleSite/content/docs/advanced/customization.md
+++ b/exampleSite/content/docs/advanced/customization.md
@@ -61,6 +61,22 @@ Hextra provides CSS variables to customize the width of pages, navbar, and foote
 }
 ```
 
+### Tailwind Theme Variables
+
+Starting with Hextra v0.10.0, which is built on Tailwind CSS v4, you can customize the theme by overriding CSS variables inside the `@layer theme` block.
+
+This lets you customize the global look and feel without having to modify every individual class.
+
+```css {filename="assets/css/custom.css"}
+@layer theme {
+  :root {
+    --hx-default-mono-font-family: "JetBrains Mono", monospace;
+  }
+}
+```
+
+Check out [Tailwind Theme Variables documentation](https://tailwindcss.com/docs/theme#default-theme-variable-reference) for details.
+
 ### Further Theme Customization
 
 The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element: