Skip to content

Commit d43512a

Browse files
marshalhayesmarshalhayes
committed
add framework guide for .NET
1 parent 3ca812f commit d43512a

File tree

4 files changed

+171
-0
lines changed

4 files changed

+171
-0
lines changed

‎src/app/(docs)/docs/installation/framework-guides/dotnet.tsx

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import {shell, Page, Step, Tile, css, html} from "./utils";
2+
import Logo from "@/docs/img/guides/dotnet.react.svg";
3+
import LogoDark from "@/docs/img/guides/dotnet-white.react.svg";
4+
5+
export let tile: Tile = {
6+
title: ".NET",
7+
description: "An open-source, cross-platform framework for building modern apps and powerful cloud services.",
8+
Logo,
9+
LogoDark
10+
};
11+
12+
export let page: Page = {
13+
title: "Install Tailwind CSS with .NET",
14+
description: "Setting up Tailwind CSS in a .NET project.",
15+
};
16+
17+
export let steps: Step[] = [
18+
{
19+
title: "Create your project",
20+
body: (
21+
<>
22+
<p>Start by creating a new .NET Blazor project if you don’t have one set up already.</p>
23+
<p>The steps in this guide will work not only for Blazor, but for any .NET Web project.</p>
24+
</>
25+
),
26+
code: {
27+
name: "Terminal",
28+
lang: "shell",
29+
code: shell`
30+
dotnet new blazor --empty -n my-app
31+
`,
32+
},
33+
},
34+
{
35+
title: 'Create a new CSS file',
36+
body: (
37+
<p>
38+
Create a new stylesheet at <code>Styles/main.css</code>
39+
</p>
40+
),
41+
code: {
42+
name: "Terminal",
43+
lang: "shell",
44+
code: shell`
45+
mkdir Styles && touch Styles/main.css
46+
`,
47+
},
48+
},
49+
{
50+
title: 'Import Tailwind CSS',
51+
body: (
52+
<p>Add an <code>@import</code> to <code>./src/styles.css</code> that imports Tailwind CSS.</p>
53+
),
54+
code: {
55+
name: "Styles/main.css",
56+
lang: "css",
57+
code: css`
58+
@import "tailwindcss";
59+
`
60+
}
61+
},
62+
{
63+
title: 'Configure your csproj',
64+
body: (
65+
<p>
66+
Open the <code>my-app.csproj</code> file and add the following targets.
67+
</p>
68+
),
69+
code: {
70+
name: 'my-app.csproj',
71+
lang: 'xml',
72+
code: `<Target Name="Download Tailwind">
73+
<PropertyGroup>
74+
<!-- Which version of the CLI to download -->
75+
<TailwindVersion>v4.0.2</TailwindVersion>
76+
77+
<!-- Determine which version of tailwind to use based on the current OS & architecture -->
78+
<!-- Linux -->
79+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Linux')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-linux-x64</TailwindReleaseName>
80+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Linux')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Armv7">tailwindcss-linux-armv7</TailwindReleaseName>
81+
82+
<!-- MacOS -->
83+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('OSX')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-macos-x64</TailwindReleaseName>
84+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('OSX')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-macos-arm64</TailwindReleaseName>
85+
86+
<!-- Windows -->
87+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Windows')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-windows-x64.exe</TailwindReleaseName>
88+
<TailwindReleaseName Condition="$([MSBuild]::IsOsPlatform('Windows')) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-windows-arm64.exe</TailwindReleaseName>
89+
</PropertyGroup>
90+
91+
<!-- Download the file -->
92+
<DownloadFile DestinationFolder="$(ProjectDir)/bin"
93+
DestinationFileName="$(TailwindReleaseName)"
94+
SourceUrl="https://github.com/tailwindlabs/tailwindcss/releases/download/$(TailwindVersion)/$(TailwindReleaseName)"/>
95+
<!-- On unix systems, make the file executable -->
96+
<Exec Condition="$([MSBuild]::IsOsPlatform('Linux')) Or $([MSBuild]::IsOsPlatform('OSX'))" Command="chmod +x $(ProjectDir)/bin/$(TailwindReleaseName)"/>
97+
</Target>
98+
99+
<!-- When building the project, run the tailwind CLI -->
100+
<Target Name="Tailwind" DependsOnTargets="Download Tailwind" BeforeTargets="Build">
101+
<PropertyGroup>
102+
<TailwindBuildCommand>$(ProjectDir)/bin/$(TailwindReleaseName) -i Styles/main.css -o wwwroot/main.build.css</TailwindBuildCommand>
103+
</PropertyGroup>
104+
105+
<Exec Command="$(TailwindBuildCommand)" Condition="'$(Configuration)' == 'Debug'" />
106+
<Exec Command="$(TailwindBuildCommand) --minify" Condition="'$(Configuration)' == 'Release'" />
107+
</Target>
108+
`,
109+
},
110+
},
111+
112+
{
113+
title: 'Link to the generated CSS file',
114+
body: (
115+
<p>
116+
Add a reference to the CSS file Tailwind generated to the <code>head</code> of
117+
the <code>Components/App.razor</code> file.
118+
</p>
119+
),
120+
code: {
121+
name: 'Components/App.razor',
122+
lang: 'html',
123+
code: html`
124+
<link rel="stylesheet" href="/main.build.css"/>
125+
`,
126+
},
127+
},
128+
129+
{
130+
title: 'Start using Tailwind in your project',
131+
body: (
132+
<p>Start using Tailwind’s utility classes to style your content.</p>
133+
),
134+
code: {
135+
name: 'Components/Pages/Home.razor',
136+
lang: 'html',
137+
code: `<h1 class="text-3xl font-bold underline">
138+
Hello world!
139+
</h1>`,
140+
},
141+
},
142+
143+
{
144+
title: 'Start the application',
145+
body: (
146+
<p>
147+
Build the project and start the application with <code>dotnet run</code>.
148+
</p>
149+
),
150+
code: {
151+
name: 'Terminal',
152+
lang: 'shell',
153+
code: shell`
154+
dotnet run
155+
`,
156+
},
157+
},
158+
];

‎src/app/(docs)/docs/installation/framework-guides/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const guides: Guide[] = await create({
1515
solidjs: () => import("./solidjs"),
1616
sveltekit: () => import("./sveltekit"),
1717
angular: () => import("./angular"),
18+
dotnet: () => import("./dotnet"),
1819
"ruby-on-rails": () => import("./ruby-on-rails"),
1920
"react-router": () => import("./react-router"),
2021
phoenix: () => import("./phoenix"),

‎src/docs/img/guides/dotnet-white.react.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/docs/img/guides/dotnet.react.svg

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)