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 1/5] 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 From 9eece9864ff4f155943ed68fa32d422e8b4804a1 Mon Sep 17 00:00:00 2001 From: Marshal Hayes <17213165+marshalhayes@users.noreply.github.com> Date: Fri, 14 Mar 2025 01:35:24 -0500 Subject: [PATCH 2/5] improve framework guide for .NET --- .../installation/framework-guides/dotnet.tsx | 118 ++++++++++++------ 1 file changed, 78 insertions(+), 40 deletions(-) diff --git a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx index 4730d0853..800c61704 100644 --- a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx @@ -1,4 +1,4 @@ -import {shell, Page, Step, Tile, css, html} from "./utils"; +import {shell, Page, Step, Tile, css, xml, html} from "./utils"; import Logo from "@/docs/img/guides/dotnet.react.svg"; import LogoDark from "@/docs/img/guides/dotnet-white.react.svg"; @@ -49,7 +49,7 @@ export let steps: Step[] = [ { title: 'Import Tailwind CSS', body: ( -

Add an @import to ./src/styles.css that imports Tailwind CSS.

+

Add an @import to Styles/main.css that imports Tailwind CSS.

), code: { name: "Styles/main.css", @@ -59,53 +59,91 @@ export let steps: Step[] = [ ` } }, + { + 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: ` + + + v4.0.14 + + + Styles/main.css + wwwroot/main.build.css + + + + + $([System.IO.Path]::Combine($([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))), 'Tailwind')) + + + $([System.IO.Path]::Combine($([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))), 'Tailwind')) + + + + + + + + + + + tailwindcss-linux-x64 + tailwindcss-linux-armv7 + + tailwindcss-macos-x64 + tailwindcss-macos-arm64 + + tailwindcss-windows-x64.exe + tailwindcss-windows-arm64.exe + + + + + + + + + + + + + + + + + '$(TailwindCliPath)' -i '$(InputStyleSheetPath)' -o '$(OutputStyleSheetPath)' + + + + + +` + } + }, { title: 'Configure your csproj', body: (

- Open the my-app.csproj file and add the following targets. + Open the my-app.csproj file and import the Tailwind.targets file.

), 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 - - - - - -`, + code: ``, }, }, From b459db986e2659d76fb0a3ca43d4639afed35764 Mon Sep 17 00:00:00 2001 From: Marshal Hayes <17213165+marshalhayes@users.noreply.github.com> Date: Fri, 14 Mar 2025 01:45:59 -0500 Subject: [PATCH 3/5] fixup! improve framework guide for .NET --- src/app/(docs)/docs/installation/framework-guides/dotnet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx index 800c61704..86a00a74d 100644 --- a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx @@ -1,4 +1,4 @@ -import {shell, Page, Step, Tile, css, xml, html} from "./utils"; +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"; From 1b7197d3db82b56abcb30f458bb9e0026cdcbc41 Mon Sep 17 00:00:00 2001 From: Marshal Hayes <17213165+marshalhayes@users.noreply.github.com> Date: Sat, 15 Mar 2025 23:44:12 -0500 Subject: [PATCH 4/5] require parameters to be specified by user --- .../installation/framework-guides/dotnet.tsx | 89 ++++++++++++++----- 1 file changed, 68 insertions(+), 21 deletions(-) diff --git a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx index 86a00a74d..77b57de88 100644 --- a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx @@ -71,26 +71,59 @@ export let steps: Step[] = [ name: "Tailwind.targets", lang: "xml", code: ` + + + + + + + + + + + + + + + + + - - v4.0.14 + false - - Styles/main.css - wwwroot/main.build.css + false + true - + - - $([System.IO.Path]::Combine($([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))), 'Tailwind')) + + + + $([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))) - - $([System.IO.Path]::Combine($([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))), 'Tailwind')) + + $([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))) + + + + + + + + + + + + + + + + - - + + @@ -104,19 +137,22 @@ export let steps: Step[] = [ 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) - - + @@ -124,11 +160,16 @@ export let steps: Step[] = [ - '$(TailwindCliPath)' -i '$(InputStyleSheetPath)' -o '$(OutputStyleSheetPath)' + '$(TailwindCliPath)' -i '$(TailwindInputStyleSheetPath)' -o '$(TailwindOutputStyleSheetPath)' --cwd '$(ProjectDir)' + + + $(TailwindBuildCommand) --optimize + + + $(TailwindBuildCommand) --minify - - + ` } @@ -137,13 +178,19 @@ export let steps: Step[] = [ title: 'Configure your csproj', body: (

- Open the my-app.csproj file and import the Tailwind.targets file. + Specify the version and input & output stylesheets, and import the Tailwind.targets file.

), code: { name: 'my-app.csproj', lang: 'xml', - code: ``, + code: ` + latest + Styles/main.css + wwwroot/main.build.css + + +`, }, }, @@ -159,7 +206,7 @@ export let steps: Step[] = [ name: 'Components/App.razor', lang: 'html', code: html` - + `, }, }, From 3661f8e716b3e2714cbc6baf32f13bcb2777eeb4 Mon Sep 17 00:00:00 2001 From: Marshal Hayes <17213165+marshalhayes@users.noreply.github.com> Date: Mon, 17 Mar 2025 14:04:53 -0500 Subject: [PATCH 5/5] fix build on windows --- .../(docs)/docs/installation/framework-guides/dotnet.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx index 77b57de88..36b4b32d9 100644 --- a/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx @@ -102,7 +102,7 @@ export let steps: Step[] = [ $([MSBuild]::ValueOrDefault($([System.Environment]::GetEnvironmentVariable('XDG_CONFIG_HOME')), $([System.IO.Path]::Combine($([System.Environment]::GetEnvironmentVariable('HOME')), '.cache')))) - $([System.Environment]::GetFolderPath($([System.Environment]::SpecialFolder.LocalApplicationData))) + $(LOCALAPPDATA) @@ -160,7 +160,12 @@ export let steps: Step[] = [ - '$(TailwindCliPath)' -i '$(TailwindInputStyleSheetPath)' -o '$(TailwindOutputStyleSheetPath)' --cwd '$(ProjectDir)' + + $([MSBuild]::NormalizePath('$(TailwindCliPath)')) + $([MSBuild]::NormalizePath('$(TailwindInputStyleSheetPath)')) + $([MSBuild]::NormalizePath('$(TailwindOutputStyleSheetPath)')) + + "$(TailwindCliPath)" -i "$(TailwindInputStyleSheetPath)" -o "$(TailwindOutputStyleSheetPath)" $(TailwindBuildCommand) --optimize