format

Author: kentcdodds

app/routes/_marketing+/index.tsx

@@ -50,7 +50,7 @@ export default function Index() {
 					</a>
 					<h1
 						data-heading
-						className="animate-slide-top text-foreground xl:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards] font-title"
+						className="animate-slide-top text-foreground xl:animate-slide-left font-title mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
 					>
 						<a href="https://www.epicweb.dev/stack">The Epic Stack</a>
 					</h1>

app/styles/tailwind.css

@@ -4,7 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 .font-title {
-	font-family: "Poppins", sans-serif;
+	font-family: 'Poppins', sans-serif;
 }
 
 :root {

docs/fonts.md

@@ -6,23 +6,27 @@ easy to do so.
 
 ## Using Custom Fonts
 
-For custom fonts, Epic Stack uses [`fontless`](https://github.com/unjs/fontaine/tree/main/packages/fontless) for automatic font optimization. This provides zero-runtime font loading with proper fallbacks to reduce Cumulative Layout Shift (CLS).
+For custom fonts, Epic Stack uses
+[`fontless`](https://github.com/unjs/fontaine/tree/main/packages/fontless) for
+automatic font optimization. This provides zero-runtime font loading with proper
+fallbacks to reduce Cumulative Layout Shift (CLS).
 
 ## How it works
 
 Simply use font families in your CSS and `fontless` handles the rest:
 
 ```css
 .font-title {
-  font-family: "Poppins", sans-serif;
+	font-family: 'Poppins', sans-serif;
 }
 
 .body-text {
-  font-family: "Inter", sans-serif;
+	font-family: 'Inter', sans-serif;
 }
 ```
 
 The plugin will:
+
 - Detect font-family declarations in your CSS
 - Resolve fonts from providers (Google Fonts, Bunny Fonts, etc.)
 - Generate optimized `@font-face` declarations
@@ -32,5 +36,7 @@ The plugin will:
 ## Troubleshooting
 
 ### Fonts not loading in development
-This is expected behavior. Fonts are only generated in the build files. To see fonts in development mode, build the application first and then run `npm run dev`.
 
+This is expected behavior. Fonts are only generated in the build files. To see
+fonts in development mode, build the application first and then run
+`npm run dev`.

server/index.ts

@@ -28,7 +28,7 @@ const viteDevServer = IS_PROD
 				server: {
 					middlewareMode: true,
 				},
-				// We tell Vite we are running a custom app instead of 
+				// We tell Vite we are running a custom app instead of
 				// the SPA default so it doesn't run HTML middleware
 				appType: 'custom',
 			}),

vite.config.ts

@@ -3,8 +3,8 @@ import {
 	type SentryReactRouterBuildOptions,
 	sentryReactRouter,
 } from '@sentry/react-router'
-import { fontless } from 'fontless'
 import tailwindcss from '@tailwindcss/vite'
+import { fontless } from 'fontless'
 import { reactRouterDevTools } from 'react-router-devtools'
 import { defineConfig } from 'vite'
 import { envOnlyMacros } from 'vite-env-only'