diff --git a/site/src/pages/[...framework]/examples/_Countdown/react/Component.tsx b/site/src/pages/[...framework]/examples/_Countdown/react/Component.tsx
index 50e27d69..dd6747de 100644
--- a/site/src/pages/[...framework]/examples/_Countdown/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Countdown/react/Component.tsx
@@ -13,7 +13,7 @@ export default function Countdown({ seconds }: Props) {
 		<NumberFlowGroup>
 			<div
 				style={{ fontVariantNumeric: 'tabular-nums', '--number-flow-char-height': '0.85em' }}
-				className="~text-xl/4xl flex items-baseline font-semibold"
+				className="~text-3xl/4xl flex items-baseline font-semibold"
 			>
 				<NumberFlow trend={-1} value={hh} format={{ minimumIntegerDigits: 2 }} />
 				<NumberFlow
diff --git a/site/src/pages/[...framework]/examples/_Countdown/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Countdown/svelte/Component.svelte
index 8be01d2b..f498746f 100644
--- a/site/src/pages/[...framework]/examples/_Countdown/svelte/Component.svelte
+++ b/site/src/pages/[...framework]/examples/_Countdown/svelte/Component.svelte
@@ -15,7 +15,7 @@
 <NumberFlowGroup>
 	<div
 		style="font-variant-numeric: tabular-nums; --number-flow-char-height: 0.85em"
-		class="~text-xl/4xl flex items-baseline font-semibold"
+		class="~text-3xl/4xl flex items-baseline font-semibold"
 	>
 		<NumberFlow trend={-1} value={hh} format={{ minimumIntegerDigits: 2 }} />
 		<NumberFlow
diff --git a/site/src/pages/[...framework]/examples/_Countdown/vue/Component.vue b/site/src/pages/[...framework]/examples/_Countdown/vue/Component.vue
index c5e19a1c..3f8f6ce2 100644
--- a/site/src/pages/[...framework]/examples/_Countdown/vue/Component.vue
+++ b/site/src/pages/[...framework]/examples/_Countdown/vue/Component.vue
@@ -13,7 +13,7 @@ const ss = computed(() => seconds % 60)
 	<NumberFlowGroup>
 		<div
 			style="font-variant-numeric: tabular-nums; --number-flow-char-height: 0.85em"
-			class="~text-xl/4xl flex items-baseline font-semibold"
+			class="~text-3xl/4xl flex items-baseline font-semibold"
 		>
 			<NumberFlow :trend="-1" :value="hh" :format="{ minimumIntegerDigits: 2 }" />
 			<NumberFlow
diff --git a/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx b/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx
index 80e2a207..494404e4 100644
--- a/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx
@@ -18,7 +18,7 @@ export default function MotionExample({ value }: Props) {
 		<motion.span
 			className={clsx(
 				value > 0 ? 'bg-emerald-400' : 'bg-red-500',
-				'~text-base/2xl inline-flex items-center px-[0.3em] text-white transition-colors duration-300'
+				'inline-flex items-center px-[0.3em] text-2xl text-white transition-colors duration-300'
 			)}
 			style={{ borderRadius: 999 }}
 			layout={canAnimate}
diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts
index 5da88b3f..5f5e063b 100644
--- a/site/tailwind.config.ts
+++ b/site/tailwind.config.ts
@@ -11,6 +11,9 @@ const sans = ['Inter', '_font_fallback_732902278794', 'sans-serif']
 
 export default {
 	presets: [reset],
+	future: {
+		hoverOnlyWhenSupported: true
+	},
 	content: {
 		files: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 		transform: {