From d43512ade112f269ce82de16de93920136fa23ce Mon Sep 17 00:00:00 2001
From: Marshal Hayes <17213165+marshalhayes@users.noreply.github.com>
Date: Fri, 31 Jan 2025 22:35:35 -0600
Subject: [PATCH] add framework guide for .NET
---
.../installation/framework-guides/dotnet.tsx | 158 ++++++++++++++++++
.../installation/framework-guides/index.ts | 1 +
src/docs/img/guides/dotnet-white.react.svg | 6 +
src/docs/img/guides/dotnet.react.svg | 6 +
4 files changed, 171 insertions(+)
create mode 100644 src/app/(docs)/docs/installation/framework-guides/dotnet.tsx
create mode 100644 src/docs/img/guides/dotnet-white.react.svg
create mode 100644 src/docs/img/guides/dotnet.react.svg
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..4730d0853
--- /dev/null
+++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx
@@ -0,0 +1,158 @@
+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 ./src/styles.css that imports Tailwind CSS.
+ ),
+ code: {
+ name: "Styles/main.css",
+ lang: "css",
+ code: css`
+ @import "tailwindcss";
+ `
+ }
+ },
+ {
+ title: 'Configure your csproj',
+ body: (
+
+ Open the my-app.csproj file and add the following targets.
+
+ ),
+ code: {
+ name: 'my-app.csproj',
+ lang: 'xml',
+ code: `
+
+
+ v4.0.2
+
+
+
+ tailwindcss-linux-x64
+ tailwindcss-linux-armv7
+
+
+ tailwindcss-macos-x64
+ tailwindcss-macos-arm64
+
+
+ tailwindcss-windows-x64.exe
+ tailwindcss-windows-arm64.exe
+
+
+
+
+
+
+
+
+
+
+
+ $(ProjectDir)/bin/$(TailwindReleaseName) -i Styles/main.css -o 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