Tailwind Plus adiciona suporte a Vanilla JavaScript
(tailwindcss.com)- Os blocos de UI do Tailwind Plus agora podem funcionar totalmente apenas com Vanilla JavaScript
- Agora é possível usar componentes interativos sem frameworks como React ou Vue
- Uma nova biblioteca baseada em custom elements chamada @tailwindplus/elements foi disponibilizada
- Foi destacada a usabilidade com compatibilidade com diversas plataformas e frameworks
- Todos os clientes do Tailwind Plus já podem usar esse recurso imediatamente
Suporte a Vanilla JavaScript chega ao Tailwind Plus
Muitos blocos de UI do Tailwind Plus, como dialogs, dropdowns e command palettes, na prática exigiam JavaScript para serem realmente utilizáveis. Antes, quem não usava React ou Vue precisava escrever JavaScript manualmente para adicionar interatividade a esses blocos de UI.
Agora, porém, todos os blocos de UI passam a funcionar imediatamente até mesmo nos exemplos em HTML puro, com funcionalidade completa, acessibilidade e elementos interativos. Em outras palavras, sem depender de frameworks JavaScript, já é possível usar blocos de interface como dropdowns, command palettes, dialogs e drawers em qualquer projeto.
@tailwindplus/elements: a biblioteca central
A responsável por essa mudança é a biblioteca @tailwindplus/elements. Esse pacote, exclusivo para clientes do Tailwind Plus, é uma coleção de custom elements headless.
- Os custom elements podem ser aplicados em qualquer lugar com a simples adição de uma única tag
<script>ao HTML - Interações complexas, gerenciamento de foco, acessibilidade por teclado e atribuição de propriedades ARIA são tratados automaticamente
- O estilo pode ser livremente personalizado com classes utilitárias do Tailwind CSS ou com CSS escrito manualmente
Principais exemplos de uso
- Dropdown: estruturado com custom elements como
<el-dropdown>e<el-menu>, funcionando sem JavaScript adicional - Select: é possível implementar componentes avançados de seleção com elementos como
<el-select>,<el-options>e<el-option> - Command palette: funcionalidades completas são implementadas com estruturas como
<el-command-palette>e<el-command-list>
Esses custom elements tratam automaticamente propriedades ARIA, movimentação de foco e navegação por teclado, oferecendo forte suporte à acessibilidade na web.
Integração com frameworks e dependência mínima de plataforma
- Pode ser integrado a ambientes que usam apenas HTML, além de Svelte, Rails (Ruby on Rails), React e vários outros
- Exemplo com Svelte: é fornecido um exemplo adicionando binding bidirecional a
<el-autocomplete> - Exemplo com Rails: ao enviar um formulário, o valor de
<el-select>é enviado ao servidor como em um controle de formulário nativo - Exemplo com React: diferentemente de Headless UI e React Aria, pode ser usado sem dependência de framework
Padrões web modernos e compatibilidade com navegadores
- Elements aproveita ativamente recursos modernos da plataforma web, como Web Components e Custom Elements, para oferecer uma composição leve e uma experiência nativa
- Quando necessário, polyfills também são incluídos automaticamente no bundle, garantindo a mesma faixa de suporte a navegadores do Tailwind CSS v4
- À medida que os padrões web se tornarem mais disseminados, a tendência é que o tamanho do Elements também diminua naturalmente
Verdadeira universalidade: "HTML é o mínimo denominador comum"
HTML é o "mínimo denominador comum" de todos os frameworks web, e com Elements os blocos de UI baseados em HTML do Tailwind Plus funcionam de forma consistente em qualquer ambiente
- São fornecidos exemplos reais de uso e código em Svelte, Rails, React e outros contextos
Lançamento e acesso
- Assinantes do Tailwind Plus já podem usar imediatamente todos os blocos de UI atualizados e o Elements
- Estão disponíveis exemplos de demonstração por categoria de UI, como dropdowns e command palettes, além da documentação oficial do Elements
- É possível personalizar da forma desejada conforme as necessidades do projeto
Encerrando
Agora, usuários do Tailwind Plus podem implementar com facilidade uma UI poderosa e acessível em qualquer ambiente que desejarem, sem precisar escrever JavaScript complexo.
1 comentários
Comentários no Hacker News
Ao ver nomes de classes Tailwind longos e hierárquicos como ``, dá a sensação de que agora é preciso aprender não só CSS, mas também mais um sistema de hierarquia
Sempre fico impressionado quando abro um projeto grande em Tailwind e vejo uma lista gigantesca de classes em uma única linha
Antes do Tailwind, praticamente todo web designer que eu encontrava acabava criando um sistema desse tipo do seu próprio jeito Em teoria, CSS é poderoso o bastante e isso tudo seria perfeitamente possível sem Tailwind Mas, na prática, existe uma grande desvantagem no CSS: para extrair todo o potencial dele, é preciso projetar separadamente um modelo semântico, e muitos designers tendem a se concentrar mais em transmitir atmosfera e emoção do que em estrutura documental ou arquitetura da informação Marcar esses conceitos emocionais com regras lógicas é muito difícil, ou até impossível Tailwind só formalizou algo que todo mundo já fazia: em vez de modelar abstrações sobre “significado”, aplicar diretamente regras utilizáveis como
bolderedFico me perguntando como alguém consegue olhar para esse tipo de código e dizer: “uau, isso sim é código limpo!” Não sei como Tailwind acabou ficando tão popular, e acho que aprender CSS puro é realmente uma boa ideia O CSS de hoje em dia está muito melhor mesmo
Em projetos reais, as classes acabam sendo agrupadas para facilitar a leitura Por exemplo:
Acaba sendo escrito assim Hoje eu classifico manualmente, mas queria que existisse alguma ferramenta para automatizar esse formato
Parece que o Tailwind começou originalmente a partir da ideia de um framework CSS no estilo utility class, algo como “Bourbon on Steroids” Só que as pessoas aceitaram o código de exemplo com muito mais naturalidade do que o esperado, e passaram a simplesmente empilhar aquilo do jeito que estava Em 2018, experimentei usar Tailwind em um novo projeto grande, e antes eu montava classes em cima dos utilitários do Tailwind, como
.buttone.button-primary, o que facilitava a manutenção e deixava o HTML mais limpo Mas, quando a equipe usou de fato, empilhar diretamente as classes utilitárias padrão acabou sendo muito mais rápido e fácil Se você não se importar tanto com a elegância do código, o design fica consistente e dá para implementar exatamente como no Photoshop Referência ao BourbonÉ uma abordagem usando Web Components baseados em padrões web Como há suporte nativo do navegador, funciona sem framework JS Fico feliz de ver mais desenvolvedores usando bastante Web Components O que são Web Components? (MDN)
É uma mudança esperada há muito tempo Antes, quando eu não me preocupava com compatibilidade, brincava com Web Components em projetos pessoais, e agora é muito bom ver bibliotecas mainstream adotando isso
Faz 12 anos que eu falo da necessidade de Web Components, mas nos ecossistemas de frameworks como React, Angular e Svelte a reação sempre foi morna Web Components com JS/TS com escopo definido e um bundler (algo como vite ou rollup) já são suficientes, não é preciso overhead desnecessário como Shadow DOM ou rerenderização completa
Quando eu mexia com Polymer lá por 2014, o termo “transclusion” me chamou atenção Na época parecia algo fascinante, mas agora mal lembro o que significa
Tentei aplicar Web Components em hooks para código de anúncios da empresa e, pessoalmente, achei meio decepcionante É fácil disparar a execução do código, mas a API em si não é lá muito boa
Ao olhar o mundo dos componentes UI populares, eu sempre me perguntava por que a base não era toda “headless” Web Components já existem há muito tempo, então acho curioso que esse tipo de abordagem não tenha se tornado comum Bibliotecas por framework (como SHADCN e outras) acabam criando documentação separada conforme a compatibilidade de versão e ficam presas a ambientes específicos, de modo que na prática nem parecem tão completas assim Parece melhor construir sobre uma base Headless UI e, se necessário, criar wrappers específicos para cada framework Claro que sei que há questões bem mais complexas envolvidas, mas é o tipo de mundo que eu gostaria de ver
Às vezes imagino que, se alguém financiasse suficientemente bem a equipe do Tailwind, o mundo seria muito melhor porque poderíamos ter todo o ecossistema Tailwind de graça, sem preocupação com dinheiro É uma pena ver tantas oportunidades de integração profunda com lugares diversos, como o Tailwind Plus, serem perdidas Isso me lembra o caso da antiga 37signals, que recebeu investimento de Jeff Bezos e ficou livre de preocupação com VC
A equipe do Tailwind já está em uma situação muito mais bem-sucedida do que se imagina O desejo de construir mais coisas e expandir não vem de necessidade financeira, mas de ambição natural Minha impressão é que Tailwind (open source) é só uma parte do negócio, e eles também querem criar outros projetos que gerem receita Dá até para comparar com Laravel
Sinceramente, hoje em dia dá para gerar componentes Tailwind facilmente com IA, então sinto menos vontade de comprar componentes pagos como os do Tailwind Plus Na época do Tailwind UI eu realmente paguei, mas hoje prefiro pedir diretamente a uma IA como Claude para criar a UI para mim, o que também evita preocupações com licença Fico curioso para ver que modelo de negócio vai funcionar daqui para frente
Sobre a 37signals, pessoalmente às vezes penso que talvez tivesse sido melhor se os fundadores trabalhassem tendo que prestar contas a alguém
Na prática, “toda a experiência Tailwind” já é oferecida de graça Fico em dúvida sobre o que exatamente significaria essa integração profunda que está faltando Tailwind Plus (produto comercial) é só uma coleção pronta de templates e componentes pré-construídos É conveniente para desenvolvedores que querem começar rápido, mas no fim tudo pode ser feito manualmente só com Tailwind
Fico curioso sobre que integrações específicas você quer dizer
Melhor não se empolgar demais agora Antes eles também davam suporte a Vue, mas agora parece que isso foi praticamente abandonado
Isso é justamente suporte a Vue Existem frameworks demais, então criar wrappers customizados para todos é quase impossível Usando Web Components, você desenvolve uma vez e roda em qualquer ambiente; no fim, basta que o framework ofereça bom suporte a Web Components (ou seja, a HTML)
O suporte do Vue a Web Components é muito bom, e o React 19 finalmente também começou a suportar bem É verdade que o ecossistema de Web Components é uma bagunça, mas fornecer “componentes reutilizáveis em todos os frameworks” desse jeito é o verdadeiro killer app de Web Components Surpreende que isso não esteja sendo divulgado como “agora há suporte para todos os frameworks”, e sim como “para JavaScript vanilla”
Eles também mantinham uma biblioteca de design no Figma, mas ela sumiu Para quem precisa colaborar com designers, isso é realmente uma pena
O nome diz tudo: a proposta é tailwindcss
Achei interessante esse caso de uso de custom elements, mas no Tailwind isso ser um recurso pago parece meio absurdo Intuitivamente, eu esperaria algo como custom elements gratuitos e integração com frameworks sendo a parte paga Política de preços do Tailwind Plus
É pago porque desenvolver essa biblioteca custou algo em torno de $250,000 Seria impossível simplesmente oferecê-la de graça e manter tudo depois, e engenheiros talentosos merecem ser remunerados de forma justa
Tailwind Plus é uma coleção paga de componentes UI e templates O TailwindCSS em si, como o Bootstrap, é apenas uma ferramenta de estilização
Outro recurso pago conhecido é algo como SSO Não é intuitivamente óbvio por que isso é pago, mas é uma estratégia deliberada para adiar o momento da decisão de adoção
Vender esse tipo de coisa parece um pouco estranho No mundo do desenvolvimento web, onde o padrão costuma ser o gratuito, pode soar esquisito ter que pagar assinatura para usar um framework para sempre Seria como se o Postgres cobrasse uma mensalidade de uso Mas, olhando a política de preços, na verdade é uma compra única vitalícia Fico curioso para saber o quanto esse modelo funciona bem
Parece que o Alpine.js sumiu dos custom block elements do tailwindcss plus Fiquei decepcionado ao ver que o alpinejs não aparece mais nos exemplos de código Agora foi substituído por algo como:
Quem usava Alpine sente falta de não poder mais simplesmente copiar e colar os exemplos
Eu realmente gostaria que esse recurso fosse aberto também para usuários gratuitos do Tailwind Parece muito interessante e eu gostaria de testar, mas é uma pena que nem sequer dê para experimentar de graça Ainda assim, sei que financiamento para open source nunca é simples, então deixo meu agradecimento ao Tailwind Espero um dia poder doar para projetos open source e me tornar alguém que também contribui
Dizem que dá para criar em Elements coisas como uma paleta de comandos avançada com ``, mas na prática isso só foi possível porque eles adicionaram diretamente esse recurso naquele componente
Usando Tailwind mais recentemente, passei a reconhecer sua conveniência e a vantagem de abstrair a dificuldade de projetar sistemas de design Mas, no longo prazo, investir diretamente no próprio sistema de design e na própria biblioteca de componentes acaba sendo uma solução muito mais sólida em termos de DX, flexibilidade, linguagem estética e dependências