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>
This commit is contained in:
Kristjan Broder Lund
2025-11-13 09:36:45 +00:00
committed by GitHub
parent 4c03d3b8b6
commit 9ccc8fb795

View File

@@ -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>