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 Stylesinput.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!