From 9ccc8fb7959f89f677ed3923bd68f0c08c18d59b Mon Sep 17 00:00:00 2001
From: Kristjan Broder Lund <MiniGod@users.noreply.github.com>
Date: Thu, 13 Nov 2025 09:36:45 +0000
Subject: [PATCH] docs: format code blocks correctly (#24672)

### What does this PR do?

The code blocks were not properly formatted, and did not render
correctly

`main`:
<img width="699" height="196" alt="image"
src="https://github.com/user-attachments/assets/c08bc29e-9481-47ae-bafe-dd94b22d0c09"
/>

this pr:
<img width="691" height="306" alt="image"
src="https://github.com/user-attachments/assets/947fb9d7-04f3-42e8-aafe-0d70127fefd1"
/>

### How did you verify your code works?

ran docs locally with mint

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Michael H <git@riskymh.dev>
---
 docs/bundler/html-static.mdx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/bundler/html-static.mdx b/docs/bundler/html-static.mdx
index 8dd8ecb955..135b7f41ac 100644
--- a/docs/bundler/html-static.mdx
+++ b/docs/bundler/html-static.mdx
@@ -237,13 +237,27 @@ Then, reference TailwindCSS in your HTML via `<link>` tag, `@import` in CSS, or
 
 <Tabs>
   <Tab title="index.html">
+
     ```html title="index.html" icon="file-code"
-    {/* Reference TailwindCSS in your HTML */}
+    <!-- Reference TailwindCSS in your HTML -->
     <link rel="stylesheet" href="tailwindcss" />
     ```
+
+  </Tab>
+  <Tab title="styles.css">
+
+    ```css title="styles.css" icon="file-code"
+    @import "tailwindcss";
+    ```
+
+  </Tab>
+  <Tab title="app.ts">
+
+    ```ts title="app.ts" icon="/icons/typescript.svg"
+    import "tailwindcss";
+    ```
+
   </Tab>
-  <Tab title="styles.css">```css title="styles.css" icon="file-code" @import "tailwindcss"; ```</Tab>
-  <Tab title="app.ts">```ts title="app.ts" icon="/icons/typescript.svg" import "tailwindcss"; ```</Tab>
 </Tabs>
 
 <Info>Only one of those are necessary, not all three.</Info>