diff --git a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx
new file mode 100644
index 000000000..36b4b32d9
--- /dev/null
+++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx
@@ -0,0 +1,248 @@
+import { shell, Page, Step, Tile, css, html } from "./utils";
+import Logo from "@/docs/img/guides/dotnet.react.svg";
+import LogoDark from "@/docs/img/guides/dotnet-white.react.svg";
+
+export let tile: Tile = {
+ title: ".NET",
+ description: "An open-source, cross-platform framework for building modern apps and powerful cloud services.",
+ Logo,
+ LogoDark
+};
+
+export let page: Page = {
+ title: "Install Tailwind CSS with .NET",
+ description: "Setting up Tailwind CSS in a .NET project.",
+};
+
+export let steps: Step[] = [
+ {
+ title: "Create your project",
+ body: (
+ <>
+ Start by creating a new .NET Blazor project if you don’t have one set up already.
+ The steps in this guide will work not only for Blazor, but for any .NET Web project.
+
+ ),
+ code: {
+ name: "Terminal",
+ lang: "shell",
+ code: shell`
+ dotnet new blazor --empty -n my-app
+ `,
+ },
+ },
+ {
+ title: 'Create a new CSS file',
+ body: (
+
+ Create a new stylesheet at Styles/main.css
+
+ ),
+ code: {
+ name: "Terminal",
+ lang: "shell",
+ code: shell`
+ mkdir Styles && touch Styles/main.css
+ `,
+ },
+ },
+ {
+ title: 'Import Tailwind CSS',
+ body: (
+ Add an @import to Styles/main.css that imports Tailwind CSS.
+ ),
+ code: {
+ name: "Styles/main.css",
+ lang: "css",
+ code: css`
+ @import "tailwindcss";
+ `
+ }
+ },
+ {
+ title: 'Configure the project',
+ body: (
+ <>
+ Add a file called Tailwind.targets at the root of the project.
+ This file declares MSBuild targets that download the Tailwind CLI, and build the stylesheets as part of dotnet build.
+
+ ),
+ code: {
+ name: "Tailwind.targets",
+ lang: "xml",
+ code: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ false
+
+ false
+ true
+
+
+
+
+
+
+ $([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache'))))
+
+
+ $(LOCALAPPDATA)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ tailwindcss-linux-x64
+ tailwindcss-linux-armv7
+
+ tailwindcss-macos-x64
+ tailwindcss-macos-arm64
+
+ tailwindcss-windows-x64.exe
+ tailwindcss-windows-arm64.exe
+
+ https://github.com/tailwindlabs/tailwindcss/releases/download/$(TailwindVersion)/$(TailwindReleaseName)
+ https://github.com/tailwindlabs/tailwindcss/releases/latest/download/$(TailwindReleaseName)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $([MSBuild]::NormalizePath('$(TailwindCliPath)'))
+ $([MSBuild]::NormalizePath('$(TailwindInputStyleSheetPath)'))
+ $([MSBuild]::NormalizePath('$(TailwindOutputStyleSheetPath)'))
+
+ "$(TailwindCliPath)" -i "$(TailwindInputStyleSheetPath)" -o "$(TailwindOutputStyleSheetPath)"
+
+
+ $(TailwindBuildCommand) --optimize
+
+
+ $(TailwindBuildCommand) --minify
+
+
+
+
+`
+ }
+ },
+ {
+ title: 'Configure your csproj',
+ body: (
+
+ Specify the version and input & output stylesheets, and import the Tailwind.targets file.
+
+ ),
+ code: {
+ name: 'my-app.csproj',
+ lang: 'xml',
+ code: `
+ latest
+ Styles/main.css
+ wwwroot/main.build.css
+
+
+`,
+ },
+ },
+
+ {
+ title: 'Link to the generated CSS file',
+ body: (
+
+ Add a reference to the CSS file Tailwind generated to the head of
+ the Components/App.razor file.
+
+ ),
+ code: {
+ name: 'Components/App.razor',
+ lang: 'html',
+ code: html`
+
+ `,
+ },
+ },
+
+ {
+ title: 'Start using Tailwind in your project',
+ body: (
+ Start using Tailwind’s utility classes to style your content.
+ ),
+ code: {
+ name: 'Components/Pages/Home.razor',
+ lang: 'html',
+ code: `
+ Hello world!
+
`,
+ },
+ },
+
+ {
+ title: 'Start the application',
+ body: (
+
+ Build the project and start the application with dotnet run.
+
+ ),
+ code: {
+ name: 'Terminal',
+ lang: 'shell',
+ code: shell`
+ dotnet run
+ `,
+ },
+ },
+];
diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts
index 14f5a4b35..a0c9e6b46 100644
--- a/src/app/(docs)/docs/installation/framework-guides/index.ts
+++ b/src/app/(docs)/docs/installation/framework-guides/index.ts
@@ -15,6 +15,7 @@ const guides: Guide[] = await create({
solidjs: () => import("./solidjs"),
sveltekit: () => import("./sveltekit"),
angular: () => import("./angular"),
+ dotnet: () => import("./dotnet"),
"ruby-on-rails": () => import("./ruby-on-rails"),
"react-router": () => import("./react-router"),
phoenix: () => import("./phoenix"),
diff --git a/src/docs/img/guides/dotnet-white.react.svg b/src/docs/img/guides/dotnet-white.react.svg
new file mode 100644
index 000000000..d00f10369
--- /dev/null
+++ b/src/docs/img/guides/dotnet-white.react.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/docs/img/guides/dotnet.react.svg b/src/docs/img/guides/dotnet.react.svg
new file mode 100644
index 000000000..624983c0b
--- /dev/null
+++ b/src/docs/img/guides/dotnet.react.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file