Skip to content

Commit 9eece98

Browse files
marshalhayesmarshalhayes
committed
improve framework guide for .NET
1 parent 24e566d commit 9eece98

File tree

1 file changed

+78
-40
lines changed
  • src/app/(docs)/docs/installation/framework-guides

1 file changed

+78
-40
lines changed

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

Lines changed: 78 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {shell, Page, Step, Tile, css, html} from "./utils";
1+
import {shell, Page, Step, Tile, css, xml, html} from "./utils";
22
import Logo from "@/docs/img/guides/dotnet.react.svg";
33
import LogoDark from "@/docs/img/guides/dotnet-white.react.svg";
44

@@ -49,7 +49,7 @@ export let steps: Step[] = [
4949
{
5050
title: 'Import Tailwind CSS',
5151
body: (
52-
<p>Add an <code>@import</code> to <code>./src/styles.css</code> that imports Tailwind CSS.</p>
52+
<p>Add an <code>@import</code> to <code>Styles/main.css</code> that imports Tailwind CSS.</p>
5353
),
5454
code: {
5555
name: "Styles/main.css",
@@ -59,53 +59,91 @@ export let steps: Step[] = [
5959
`
6060
}
6161
},
62+
{
63+
title: 'Configure the project',
64+
body: (
65+
<>
66+
<p>Add a file called <code>Tailwind.targets</code> at the root of the project.</p>
67+
<p>This file declares MSBuild targets that download the Tailwind CLI, and build the stylesheets as part of <code>dotnet build</code>.</p>
68+
</>
69+
),
70+
code: {
71+
name: "Tailwind.targets",
72+
lang: "xml",
73+
code: `<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
74+
<PropertyGroup>
75+
<!-- Specify which version of Tailwind to download -->
76+
<TailwindVersion>v4.0.14</TailwindVersion>
77+
78+
<!-- Provide the path to the input & output stylesheets -->
79+
<InputStyleSheetPath>Styles/main.css</InputStyleSheetPath>
80+
<OutputStyleSheetPath>wwwroot/main.build.css</OutputStyleSheetPath>
81+
82+
<!-- Provide the path to where Tailwind should be downloaded to -->
83+
<!-- This should be a path that is writable by the current user, as well as one that is accessible in CI/CD pipelines -->
84+
<!-- On Linux and MacOS, use $XDG_CACHE_HOME or $HOME/.cache ($HOME/.cache/Tailwind/<TailwindVersion>) -->
85+
<TailwindDownloadPath Condition="$([System.OperatingSystem]::IsLinux()) Or $([System.OperatingSystem]::IsMacOS())">$([System.IO.Path]::Combine($([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))), 'Tailwind'))</TailwindDownloadPath>
86+
87+
<!-- On Windows, use local app data (%LOCALAPPDATA%\\Tailwind\\<TailwindVersion>) -->
88+
<TailwindDownloadPath Condition="$([System.OperatingSystem]::IsWindows())">$([System.IO.Path]::Combine($([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))), 'Tailwind'))</TailwindDownloadPath>
89+
</PropertyGroup>
90+
91+
<!-- This line supports hot reload by instructing dotnet watch to be aware of modifications to the input stylesheet -->
92+
<ItemGroup>
93+
<Watch Include="$(InputStyleSheetPath)"/>
94+
</ItemGroup>
95+
96+
<Target Name="DownloadTailwind">
97+
<PropertyGroup>
98+
<!-- Determine which version of Tailwind to use based on the current OS & architecture -->
99+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsLinux()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-linux-x64</TailwindReleaseName>
100+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsLinux()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Armv7">tailwindcss-linux-armv7</TailwindReleaseName>
101+
102+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsMacOS()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-macos-x64</TailwindReleaseName>
103+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsMacOS()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-macos-arm64</TailwindReleaseName>
104+
105+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsWindows()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == X64">tailwindcss-windows-x64.exe</TailwindReleaseName>
106+
<TailwindReleaseName Condition="$([System.OperatingSystem]::IsWindows()) And $([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture) == Arm64">tailwindcss-windows-arm64.exe</TailwindReleaseName>
107+
</PropertyGroup>
108+
109+
<!-- Download the file -->
110+
<DownloadFile DestinationFolder="$([System.IO.Path]::Combine('$(TailwindDownloadPath)', '$(TailwindVersion)'))"
111+
DestinationFileName="$(TailwindReleaseName)"
112+
SourceUrl="https://github.com/tailwindlabs/tailwindcss/releases/download/$(TailwindVersion)/$(TailwindReleaseName)"
113+
SkipUnchangedFiles="true"
114+
Retries="3">
115+
<Output TaskParameter="DownloadedFile" PropertyName="TailwindCliPath"/>
116+
</DownloadFile>
117+
118+
<!-- On unix systems, make the file executable -->
119+
<Exec Condition="$([System.OperatingSystem]::IsLinux()) Or $([System.OperatingSystem]::IsMacOS())" Command="chmod +x '$(TailwindCliPath)'"/>
120+
</Target>
121+
122+
<!-- When building the project, run the Tailwind CLI -->
123+
<!-- This target can also be executed manually. For example, with dotnet watch: \`dotnet watch msbuild /t:Tailwind\` -->
124+
<!-- In order to use hot reload, run both \`dotnet watch run\` and \`dotnet watch msbuild /t:Tailwind\` -->
125+
<Target Name="Tailwind" DependsOnTargets="DownloadTailwind" BeforeTargets="Build">
126+
<PropertyGroup>
127+
<TailwindBuildCommand>'$(TailwindCliPath)' -i '$(InputStyleSheetPath)' -o '$(OutputStyleSheetPath)'</TailwindBuildCommand>
128+
</PropertyGroup>
129+
130+
<Exec Command="$(TailwindBuildCommand)" Condition="'$(Configuration)' == 'Debug'"/>
131+
<Exec Command="$(TailwindBuildCommand) --minify" Condition="'$(Configuration)' == 'Release'"/>
132+
</Target>
133+
</Project>`
134+
}
135+
},
62136
{
63137
title: 'Configure your csproj',
64138
body: (
65139
<p>
66-
Open the <code>my-app.csproj</code> file and add the following targets.
140+
Open the <code>my-app.csproj</code> file and import the <code>Tailwind.targets</code> file.
67141
</p>
68142
),
69143
code: {
70144
name: 'my-app.csproj',
71145
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-
`,
146+
code: `<Import Project="Tailwind.targets" />`,
109147
},
110148
},
111149

0 commit comments

Comments
 (0)