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!
Top comments (0)