Integrating Tailwind into an ASP.NET Core Project

gemcloud

Gem Cloud

Posted on April 21, 2022

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.

Image description

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

Image description

3. Install tailwind by "Package Manager Console":

PM> cd Gem.NetTailwind
PM> npm install -D tailwindcss cross-env
PM> npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • 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"
  },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
gemcloud
Gem Cloud

Posted on April 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related