Integrating Tailwind into an ASP.NET Core Project
Gem Cloud
Posted on April 21, 2022
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!
💖 💪 🙅 🚩
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.