.NET Tailwindcss para devs chorume: O Setapí definitivo
Fala galera, finalmente decidi divulgar esse projeto depois de 1 ano que fiz.
Se você é um dev .NET que só quer usar o tailwindcss sem ter que instalar node
ou aquele tal de postcss
, Eis que lhe trago a Forma definitiva pra usar Tailwind com .NET
FAQ
- Ai só sei rodar se apertar no butãozinho, funciona no Baçaceira Studius? Sim
- Funciona no Raíderson? Sim
- Funciona no CLI? É claro!
Requisítos
Só .NET mais nada!
Como usar
Você pode criar um novo projeto, mas dá pra integrar fácilmente num que já existe
Vou fazer com .Net 8 usando o template Blazor
dotnet new blazor --empty -o BlazorWind -f net8.0
Dá pra adaptar pro
mvc
,razors
ou até mesmowebformíss
Setapí da integração
A integração consiste em 2 pacote:
Tailwind.Hosting
: Faz o suporte pro HotReload quando fizerdotnet watch
oudotnet run
Tailwind.Hosting.Build
: Integra com o compilador pra automágicamente baixa o tailwinderson e gerar o minificado quando fizer umdotnet publish
dotnet add package Tailwind.Hosting
dotnet add package Tailwind.Hosting.Build
Só mais uma coisa, pra ativar o HotReload vc tem que adicionar isso aqui noProperties/launchSettings.json
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Tailwind.Hosting"
}
Configuração do tailwind
Essa parte tem a ver com o tailwind em sí, então é só seguir oque diz lá nas doc dele.
Mas a partir do v4
você só tem que adicionar o seguinte no arquivowwwroot/styles.css
:
@import "tailwindcss";
Por padrão eu deixei as convensões do .NET, então o arquivo que vc importa no html é o app.css
, mas se quiser tem como configurar tudo a partir do .csproj
:
<PropertyGroup Label="Tailwind.Hosting.Build Props">
<TailwindVersion>latest</TailwindVersion>
<TailwindWatch>true</TailwindWatch>
<TailwindInputCssFile>wwwroot/styles.css</TailwindInputCssFile>
<TailwindOutputCssFile>wwwroot/app.css</TailwindOutputCssFile>
<TailwindConfigFile>tailwind.config.js</TailwindConfigFile>
<TailwindMinifyOnPublish>true</TailwindMinifyOnPublish>
<TailwindExcludeInputFileOnPublish>true</TailwindExcludeInputFileOnPublish>
</PropertyGroup>
Eu to pensando tbm em deixar de procrastinar e lançar o pango que é um Shadcn/Ui pra Blazor que eu tbm ja fiz a mais de um ano mas fico com preguiça de terminar. Então fortalece o engajamento ai e dá uma estrela la no projeto
Dá upvote lá no reddit tbm pra ajudar!