programsolutions/blazor-tailwindcss-template

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

ℹ️ A nuget package covering this use case has been released on https://github.com/Practical-ASP-NET/Tailwind.Extensions.AspNetCore feel free to take a look.

Blazor + Tailwind

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

BlazorTailwindIntegration.mp4

Description

The main goal of this template is to provide an clean integration with tailwindcss thus it will not modify anything from the official blazor template. Once integration is done there will be additional work to bring tailwindcss templates to blazor :D

⚠️ I have not tested using hot-reload on VS, so this currently works using dotnet-watch

Features

• css-isolation works with tailwindcss and @apply directives
• hot-reload considers tailwind compilation
• <styles> gets compiled and copied over wwwroot without unused styles when release mode
• change tailwindcss to use JIT compiler
• only changed files gets re-compiled
• make true hot-reload work on sytles.css
• have the post-css hot reload windows close along with donet-watch
• approach clean up (clean the code and make them more understadable)
• convert template to a real dotnet template
• create nuget package to add tailwindcss support for already created projects
• improve performance and make compilation faster

Requirements

• .NET 6 Preview 6
• Node.js 14+