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..99e2625ce --- /dev/null +++ b/src/app/(docs)/docs/installation/framework-guides/dotnet.tsx @@ -0,0 +1,201 @@ +import { shell, Page, Step, Tile, css, js, 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 including: MVC, Razor Pages and WebForms.

+ + ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + dotnet new blazor --empty -n my-app + `, + }, + }, + { + title: 'Install the Tailwind integration plugin', + body: ( + <> +

The Tailwind integration is composed by 2 packages:

+
    +
  1. Tailwind.Hosting: Add support for HotReload when you execute dotnet watch
    2. +
  2. + Tailwind.Hosting.Build: + Integrates with the MsBuild compiler, so it will automatically setup the tailwindcss as well generate publish ready output on + dotnet publish +
    3. +
+ + + This packages uses the .NET conventions by default, consider have a look in the + official plugin repo + for a detailed set of options that you customise. + + + ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + dotnet add package Tailwind.Hosting + dotnet add package Tailwind.Hosting.Build + `, + }, + }, + { + title: 'Enable Hot Reload', + body: ( + <> +

In order to support dontet watch you need to add the following settings to your launch profile.

+ + ), + code: { + name: "Properties/launchSettings.json", + lang: "js", + code: js` + { + "$schema": "https://json.schemastore.org/launchsettings.json", + "profiles": { + "http": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "http://localhost:5164", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development", + // [!code highlight:2] + "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting" + } + }, + "https": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7207;http://localhost:5164", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development", + // [!code highlight:2] + "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting" + } + } + } + }` + }, + }, + { + title: 'Create a new CSS file', + body: ( +

+ Create a new stylesheet at wwwroot/styles.css +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + touch wwwroot/styles.css + `, + }, + }, + { + title: 'Import Tailwind CSS', + body: ( +

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

+ ), + code: { + name: "wwwroot/styles.css", + lang: "css", + code: css` + @import "tailwindcss"; + ` + } + }, + { + title: 'Link to the ouput CSS file', + body: ( + <> +

By default the compiler will generate an wwwroot/app.css that is already linked in .NET Template, + you find it in your Components/App.razor

+ + + ), + 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: 'Windows users with .NET 9 installed', + body: ( + <> +

At this moment the there's a bug in .NET 9 compiler for windows that prevents wwwroot/app.css to be rebuild

+

In order to solve the fingerprinting error, you must include the following lines to your .csproj

+ + ), + code: { + name: 'MyApp.csproj', + lang: 'xml', + code: html` + + + + + + `, + }, + }, + { + title: 'Start the application', + body: ( +

+ Build the project and start the application with dotnet watch or from your IDE start button. +

+ ), + code: { + name: 'Terminal', + lang: 'shell', + code: shell` + dotnet watch + `, + }, + }, +]; diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts index 14f5a4b35..52669c785 100644 --- a/src/app/(docs)/docs/installation/framework-guides/index.ts +++ b/src/app/(docs)/docs/installation/framework-guides/index.ts @@ -26,6 +26,7 @@ const guides: Guide[] = await create({ astro: () => import("./astro"), qwik: () => import("./qwik"), rspack: () => import("./rspack"), + dotnet: () => import("./dotnet"), }); async function create(list: Record Promise>): Promise { 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..217a612c1 --- /dev/null +++ b/src/docs/img/guides/dotnet-white.react.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/docs/img/guides/dotnet.react.svg b/src/docs/img/guides/dotnet.react.svg new file mode 100644 index 000000000..294577643 --- /dev/null +++ b/src/docs/img/guides/dotnet.react.svg @@ -0,0 +1,6 @@ + + + + + +