uabarahona / blazor-tailwindcss-template

This template demostrates the integration of tailwindcss with blazor and covers important features like hot-reload and css isolation

Hi 👋, I'm Juan Barahona

A passionate Software Engineer who likes make things better and better

• ✍ I’m currently contributing to ASP.NET

• 🏆 My last win was getting Azure Developer Associate

• 💬 Ask me about C#, Java, ASP.NET

• 📫 Reach me at [email protected]

Blogs posts

• One interview, Many learnings
• bitsize #1: What is an asynchronous operation?
• bitsize #1: What is an asynchronous operation?
• Introduction to Software Development

Connect with me:

blazor-tailwindcss-template's Issues

Thank you!

Truely I was looking for this since weeks and you made it!
Thank you 1000 times!

Just in case here is my project config I have all NPM shit in a folder NpmJS, and I differ between publish and build.
Maybe this helps someone else who has the same problem

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <IsWebConfigTransformDisabled>true</IsWebConfigTransformDisabled>
    <StaticWebAssetBasePath>_content</StaticWebAssetBasePath>
    <NodeFiles>NpmJS\</NodeFiles>
  </PropertyGroup

  <ItemGroup>
    <Content Remove="$(NodeFiles)**" />
    <None Remove="$(NodeFiles)**" />
    <None Include="$(NodeFiles)**" Exclude="$(NodeFiles)node_modules\**" />
  </ItemGroup>

  <ItemGroup>
    <styles Include="$(NodeFiles)src\app.css" />
    <Watch Include="@(styles)" />
  </ItemGroup>

  <Target Name="DeleteExistingBuild" BeforeTargets="ComputeFilesToPublish">
    <RemoveDir Directories="$(PublishDir)" />
    <Message Importance="high" Text="Cleared publish folder" />
  </Target>

  <Target Name="NpmInstall" Inputs="$(MSBuildProjectDirectory)\NpmJS\package-lock.json" Outputs="$(BaseIntermediateOutputPath)\NpmJS\package-lock.json">
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec Command="npm install" WorkingDirectory="$(MSBuildProjectDirectory)\NpmJS" />
    <Copy SourceFiles="$(MSBuildProjectDirectory)\NpmJS\package-lock.json" DestinationFolder="$(BaseIntermediateOutputPath)\NpmJS" SkipUnchangedFiles="true" />
  </Target>

  <Target Name="PostScopedCssCompile" AfterTargets="_GenerateScopedCssFiles" DependsOnTargets="NpmInstall">
    <Message Importance="high" Text="Building scoped css..." />
    <Exec Command="npx postcss @(_ScopedCssOutputs, ' ') --replace --config $(MSBuildProjectDirectory)\NpmJS" WorkingDirectory="$(MSBuildProjectDirectory)\NpmJS" EnvironmentVariables="TAILWIND_MODE=build" />
  </Target>

  <Target Name="PostStylesCssCompile" Inputs="@(styles)" Outputs="@(styles->'$(MSBuildProjectDirectory)\wwwroot\css\%(FileName)%(Extension)')" BeforeTargets="CoreBuild">
    <Message Importance="high" Text="(CoreBuild) Building styles css" />
    <Exec Command="npx postcss @(styles->'src\%(FileName)%(Extension)', ' ') --dir $(MSBuildProjectDirectory)\wwwroot\css --config $(MSBuildProjectDirectory)\NpmJS" WorkingDirectory="$(MSBuildProjectDirectory)\NpmJS" EnvironmentVariables="TAILWIND_MODE=build" />
  </Target>

  <Target Name="PostStylesCssPublish" Inputs="@(styles)" Outputs="@(styles->'$(PublishDir)\wwwroot\css\%(FileName)%(Extension)')" AfterTargets="ComputeFilesToPublish">
    <Message Importance="high" Text="(ComputeFilesToPublish) Building styles css" />
    <Exec Command="npx postcss @(styles->'src\%(FileName)%(Extension)', ' ') --dir $(PublishDir)\wwwroot\css --config $(MSBuildProjectDirectory)\NpmJS" WorkingDirectory="$(MSBuildProjectDirectory)\NpmJS" EnvironmentVariables="TAILWIND_MODE=build" />
  </Target>
</Project>

`styles.css` changes triggers true hot reload instead of full rebuild

Description

Right now, changes on styles.css will trigger a full reload when executing the project with dotnet watch, ideally it should execute a true hot reload.

Taks

• changes on styles.css executes true hot reload
• changes on any .razor files triggers a hot reload on styles.css
  • JIT-compiler emits only the necessary css for the directives used on .razor files, any time a new directive is added we should trigger a hot reload on styles.css

Awesome!

Thank you very much for your efforts and sharing this tools.
I hope you had a time to finish this ASAP.
Wish you al the best.

Visual Studio/Dotnet cli template

How do I use the template in Visual Studio?