Uma visão geral sobre Alpine.js + Tailwind

Alpine.js é um framework reativo como o Vue e o React só que com um custo mínimo, zipado o alpine ocupa 4Kb. Para quem programa e utiliza Vue a sintaxe é praticamente a mesma, como o próprio autor aponta na documentação.

Recentemente comecei a trabalhar com o Tailwind, um framework css de "baixo nível" que utiliza classes como açucar sintático para o puro css. A primeira coisa que pensei quando conheci a ferramenta foi "por que alguém se submeteria a escrever tanta coisa no html?", veja, o código parece sujo no começo, mas os componentes pre-desenhados, o esquema de responsividade deles (melhor até que o do bootstrap), além do código estupidamente explicito, me ganhou. As telas realmente são feitas mais rapidamente e eu não tenho mais que parar, ir numa folha de estilo, procurar qual parte do código tá modificando aquilo, caçar se outra folha está sobrescrevendo o estilo, etc.

O Alpine.js é como o tailwind, deixa explícito o que está sendo feito, a curva de aprendizado é muito curta e é ótimo para ser utilizado em conjunto com o Tailwind. Abaixo o código de um simples todo list feito com o micro framework:

No exemplo são utilizados conceitos simples, o x-data="{ items: [], item: '' }" declara um escopo pro componente, como se fosse uma variável. O x-for cria o dom dinamicamente iterando sobre a variável items. O x-model conecta as modificações do input com a variável item e o @click ativa o evento que insere um valor no item.

Eu realmente estou gostando de trabalhar com ambas as ferramentas e acho que ambas me tiraram da zona de conforto das camadas de abstrações que outros frameworks oferecem, então você realmente aprende css e js utilizando o alpine + tailwind. O projeto que me fez conhecer essas tecnologias utiliza o Laravel (framework PHP) com o Livewire (uma abstração do laravel que componentiza código PHP), tailwind e alpine js, uma stack para ser comentada em outros posts.