Executando verificação de segurança...
3

.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é mesmo webformíss

Setapí da integração

A integração consiste em 2 pacote:

  1. Tailwind.Hosting: Faz o suporte pro HotReload quando fizer dotnet watch ou dotnet run
  2. Tailwind.Hosting.Build: Integra com o compilador pra automágicamente baixa o tailwinderson e gerar o minificado quando fizer um dotnet 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!

Carregando publicação patrocinada...