diff --git a/packages/website-astro/astro.config.mjs b/packages/website-astro/astro.config.mjs
index 0b5a8be6e8..2174f04ee5 100644
--- a/packages/website-astro/astro.config.mjs
+++ b/packages/website-astro/astro.config.mjs
@@ -9,6 +9,8 @@ import rehypeMermaid from "rehype-mermaid";
import remarkHeadingID from "remark-heading-id";
import { resolveSideBars } from "./sidebars";
+import tailwind from "@astrojs/tailwind";
+
const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
const grammarPath = resolve(import.meta.dirname, "../../grammars/typespec.json");
@@ -56,6 +58,7 @@ export default defineConfig({
plugins: [],
}),
react(),
+ tailwind({ applyBaseStyles: false }),
],
markdown: {
// @ts-expect-error wrong type
diff --git a/packages/website-astro/package.json b/packages/website-astro/package.json
index b3137b1ea9..83b628d0d2 100644
--- a/packages/website-astro/package.json
+++ b/packages/website-astro/package.json
@@ -20,6 +20,8 @@
"@astrojs/check": "^0.9.4",
"@astrojs/react": "^3.6.2",
"@astrojs/starlight": "^0.28.3",
+ "@astrojs/starlight-tailwind": "^2.0.3",
+ "@astrojs/tailwind": "^5.1.2",
"@docsearch/css": "^3.6.2",
"@docsearch/js": "^3.6.2",
"@expressive-code/core": "^0.35.6",
@@ -35,6 +37,7 @@
"react": "~18.3.1",
"react-dom": "~18.3.1",
"sharp": "^0.33.5",
+ "tailwindcss": "^3.4.14",
"typescript": "~5.6.3"
},
"devDependencies": {
diff --git a/packages/website-astro/src/components/editor-tabs.astro b/packages/website-astro/src/components/editor-tabs.astro
new file mode 100644
index 0000000000..6675bc2ee1
--- /dev/null
+++ b/packages/website-astro/src/components/editor-tabs.astro
@@ -0,0 +1,36 @@
+---
+import { Tabs } from "@astrojs/starlight/components";
+---
+
+
+
+
+
+
+
diff --git a/packages/website-astro/src/components/fluent-img.astro b/packages/website-astro/src/components/fluent-img.astro
index 55d39612c1..149e6063eb 100644
--- a/packages/website-astro/src/components/fluent-img.astro
+++ b/packages/website-astro/src/components/fluent-img.astro
@@ -7,7 +7,7 @@ export interface Props extends HTMLAttributes<"img"> {
name: FluentImageName;
}
-const { name, alt, ...rest } = Astro.props;
+const { name, class: cls, alt, ...rest } = Astro.props;
const srcLight = baseUrl(`/img/fluent/${name}-l-standard-128x128.png`);
const srcDark = baseUrl(`/img/fluent/${name}-d-standard-128x128.png`);
---
@@ -21,5 +21,5 @@ const srcDark = baseUrl(`/img/fluent/${name}-d-standard-128x128.png`);
}
-
-
+
+
diff --git a/packages/website-astro/src/components/header/header.astro b/packages/website-astro/src/components/header/header.astro
index b7dd79ad3b..ebc03280e3 100644
--- a/packages/website-astro/src/components/header/header.astro
+++ b/packages/website-astro/src/components/header/header.astro
@@ -1,6 +1,5 @@
---
import ThemePicker from "../theme-picker.astro";
-import { HeaderMenu } from "./menu";
import Link from "./link.astro";
import { Icon } from "@astrojs/starlight/components";
import Search from "./search.astro";
@@ -9,120 +8,230 @@ import Search from "./search.astro";