Integrating Tailwind into an ASP.NET Core Project

We use Visual Studio 2022 Community.
You can find out codes at Gem.NetTailwind

1. Create ASP.NET Core 6.0 empty web application:

and add razor page structure.

2. Add npm support to our project: The file "package.json" added into our project.

3. Install tailwind by "Package Manager Console":

PM> cd Gem.NetTailwind
PM> npm install -D tailwindcss cross-env
PM> npx tailwindcss init

The "node_modules" was installed.
The "tailwind.config.js" file was created.

4. To config the tailwind:

• update the tailwind.config.js file to include all your .razor and .cshtml files.
• create the Tailwind input stylesheet Styles\input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• Finally, update the package.json file to add this script section:

"scripts": {
    "tailwind": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/input.css -o ./wwwroot/css/output.css --watch"
  },

5. Add Tailwind.Extensions.AspNetCore into our project;

to install the Tailwind AspNetCore NuGet package.
to Program.cs and add this code before app.Run();
if (app.Environment.IsDevelopment())
{
app.RunTailwind("tailwind", "./");
// or
app.RunTailwind("tailwind", "../Client/");
}
add this using statement on Program.cs
using Tailwind;

6. Integrating NPM into an ASP.Net Core project to use the "MSBuild"

and modify your *.csproj file.

<PropertyGroup>
 ...
 <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
</PropertyGroup>
...
<!-- Check whether npm install or not! -->
<Target Name="CheckForNpm" BeforeTargets="NpmInstall">
 <Exec Command="npm -v" ContinueOnError="true">
  <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
 </Exec>
 <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
</Target>

<!-- install package.json package auto "node_modules" -->
<Target Name="NpmInstall" BeforeTargets="Compile" Inputs="package.json" Outputs="$(NpmLastInstall)">
<Exec Command="npm install" />
<Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
</Target>

Next step we will add Theme features into our project.
stay tune!