diff --git a/src/img/guides/dotnet.svg b/src/img/guides/dotnet.svg
new file mode 100644
index 000000000..56e77532c
--- /dev/null
+++ b/src/img/guides/dotnet.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/pages/docs/guides/dotnet.js b/src/pages/docs/guides/dotnet.js
new file mode 100644
index 000000000..fbbebbabf
--- /dev/null
+++ b/src/pages/docs/guides/dotnet.js
@@ -0,0 +1,204 @@
+import { DocumentationLayout } from '@/layouts/DocumentationLayout'
+import { FrameworkGuideLayout } from '@/layouts/FrameworkGuideLayout'
+import { Steps } from '@/components/Steps'
+
+let steps = [
+ {
+ 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: 'terminal',
+ code: 'dotnet new blazor --empty -n my-app\ncd my-app',
+ },
+ },
+ {
+ title: 'Create a new CSS file',
+ body: () => (
+
+ Create a new stylesheet at Styles/main.css
+
+ ),
+ code: {
+ name: 'Terminal',
+ lang: 'terminal',
+ code: 'mkdir Styles\ntouch Styles/main.css',
+ },
+ },
+ {
+ title: 'Add the Tailwind directives to your CSS',
+ body: () => (
+
+ Add the @tailwind directives for each of Tailwind’s layers to your{' '}
+ ./Styles/main.css file.
+
+ ),
+ code: {
+ name: 'Styles/main.css',
+ lang: 'css',
+ code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
+ },
+ },
+ {
+ title: 'Create the tailwind.config.js file',
+ body: () => (
+
+ Create a file at the root of the project called tailwind.config.js
+
+ ),
+ code: {
+ name: 'Terminal',
+ lang: 'terminal',
+ code: 'touch tailwind.config.js',
+ },
+ },
+ {
+ title: 'Configure the tailwind.config.js file',
+ body: () => (
+ <>
+
+ Add the paths to all of your template files in your tailwind.config.js file.
+
+ You may have to adjust the content paths if you're not using Blazor.
+
+ ),
+ code: {
+ name: 'tailwind.config.js',
+ lang: 'javascript',
+ code: ` /** @type {import('tailwindcss').Config} */
+ module.exports = {
+> content: [
+> "./Components/**/*.razor",
+> ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+ }`,
+ },
+ },
+ {
+ title: 'Configure your csproj',
+ body: () => (
+
+ Open the my-app.csproj file and add the following targets.
+
+ ),
+ code: {
+ name: 'my-app.csproj',
+ lang: 'xml',
+ code: `
+
+
+ v3.4.15
+
+
+
+ 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: 'razor',
+ code: '',
+ },
+ },
+ {
+ 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: 'terminal',
+ code: 'dotnet run',
+ },
+ },
+]
+
+export default function UsingDotnet({ code }) {
+ return (
+
+
+
+ )
+}
+
+export function getStaticProps() {
+ let { highlightedCodeSnippets } = require('@/components/Guides/Snippets.js')
+
+ return {
+ props: {
+ code: highlightedCodeSnippets(steps),
+ },
+ }
+}
+
+UsingDotnet.layoutProps = {
+ meta: {
+ title: 'Install Tailwind CSS with .NET',
+ description: 'Setting up Tailwind CSS in a .NET project.',
+ section: 'Getting Started',
+ },
+ Layout: DocumentationLayout,
+ allowOverflow: false,
+}
diff --git a/src/pages/docs/installation/framework-guides.js b/src/pages/docs/installation/framework-guides.js
index dde9608ec..1151de95b 100644
--- a/src/pages/docs/installation/framework-guides.js
+++ b/src/pages/docs/installation/framework-guides.js
@@ -29,6 +29,7 @@ import { ReactComponent as SvelteLogo } from '@/img/guides/svelte.svg'
import { ReactComponent as SymfonyLogo } from '@/img/guides/symfony.svg'
import { ReactComponent as SymfonyLogoWhite } from '@/img/guides/symfony-white.svg'
import { ReactComponent as ViteLogo } from '@/img/guides/vite.svg'
+import { ReactComponent as DotnetLogo } from '@/img/guides/dotnet.svg'
export default function FrameworkGuides() {
return (
@@ -85,6 +86,12 @@ export default function FrameworkGuides() {
description: 'The fastest way to build apps of all sizes with Svelte.js.',
logo: SvelteLogo,
},
+ {
+ name: '.NET',
+ slug: 'dotnet',
+ description: 'The free, open-source, cross-platform framework for building modern apps and powerful cloud services.',
+ logo: DotnetLogo
+ },
{
name: 'Angular',
slug: 'angular',