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.
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 overwwwrootwithout 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+
