Vamos falar sobre bibliotecas e frameworks de UI e como

O problema que o material coloca

O material abre a restrição assim: Vamos falar sobre bibliotecas e frameworks de UI e como construímos nossas interfaces de usuários em aplicações de web. O que eu não acho que eu sou conhecido por tanto é minha história com outras frameworks de UI e, especificamente, a falta de cuidado que eu tive com a maioria delas. Quando eu voltei para o desenvolvimento de web e entrei no mundo do React, mundo.

Eu então comecei a jogar com coisas como material UI, Chakra por um pouco, que entrou em Radix e React Aria um monte, mas essa coisa continuou aparecendo chamada Tailwind. Eu não acho que vou estar interessado nisso. Depois eu usei em um time que eu estava trabalhando, porque outro um dos desenvolvedores gostou disso e, em geral, quando eu estou em um time, eu não me importo o suficiente com frameworks de UI para tomar uma posição forte e eu mas outros parceiros trazem as coisas que eles se importam e, caramba, eu me apaixonei com o Hale Windfast.

Era muito mais focado, era apenas CSS, mas mais fácil de escrever e mudou completamente minha compreensão do papel das bibliotecas no meu design de UI e eu queria falar um pouco sobre como eu mudei minha própria pensando sobre o que é uma biblioteca de ui, muito menos como sua função em uma base de código e como construímos ao redor deles. Quais são os tipos de bibliotecas de componentes? Coisas como Headless, UI, Radix, React, Aria e tem tantos outros que eu tenho certeza que estou esquecendo e desligando e eu me desculpo para todos eles, isso é menos sobre qualquer uma biblioteca específica, mais sobre os tipos de bibliotecas e como fazer boas decisões ao redor delas.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Como o fluxo aparece na pratica

No miolo do episódio, o mecanismo fica explícito: A terceira e uma que eu vejo as pessoas falando mais frequentemente é o estilo de sistemas, então, componentes ou bibliotecas que têm estilos construídos coisas como tailwind ui daizyui, mantine e você poderia argumentar que mui fica aqui, mas vamos entrar nisso em breve, então eu queria começar com a premissa de que estes são os três tipos de core de livrarias que existem ou, no mínimo, os três espaços que uma. Para rapidamente colocar algumas coisas nesses, como podemos colocar Tailwind aqui, mas também podemos colocar como Sass aqui. Headless ui react aria então react aria oh não react aria não é um desses isso é bootstrap é provavelmente a melhor coisa para aqui eu acho que é muito importante reconhecer onde as ferramentas que você está olhando usando e comparando caem em um gráfico como este também coloque tailwind eu acho que na verdade até que eu fique em algo mais interessante a coisa que eu continuo tendo que aparecer que me tem sido e.

Você vê por que eu me confundo quando as pessoas dizem que Tailwind é como Bootstrap, então você deveria usar minha UI em vez? Eu quero ter um sistema de estilo que eu tenho, eu quero construir meu próprio sistema de estilo usando Tailwind. Você vê aqui todos os justifies mapados para exatamente uma linha de CSS.

Bootstrap te dá componentes predesignadas, que se você estiver feliz, legal. E também há soluções como DaisyUI, que eu uso muito no stream, porque DaisyUI é construída em cima de Tailwind em vez de ser construída em cima de CSS tradicional, o que significa que você pode pegar um componente aqui, usar o botão deles e embaixo dele é um monte de classes Tailwind e você pode até ouvir olhar o HTML, eu achei que eles realmente derrubaram o CSS que ele cria para você. Geralmente, o legal da Ui da Daisy é que ao invés de ser construído em cima de CSS com tantos coisas caóticas, a Ui da Daisy é construída em cima de Tailwind.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Decisoes e trade-offs do episodio

As decisões práticas que aparecem no áudio: Esse bom design custa dinheiro, é uma coisa que você vai aprender rapidamente quando você começar a gerar empresas e construir coisas. Como a coisa que você recebe da Tailwind UI, você não instala o NPM, não instale o NPM no seu sistema de estilo por favor não instale o NPM no seu sistema de estilo, seu site merece melhor, eles só te dão o código de fonte, então quando eu uso Tailwind UI, eu vou por aqui, eu olho para esses nomes de classe e então eu copio e pastei as coisas na minha base de código e é assim que você usa Tailwind UI, é ótimo. Então aqui podemos colocar porque é especificamente um sistema de estilo mas mostra como combinar a UI do Headless e Tailwind, o que é realmente interessante, porque a UI do Tailwind é, argumentativamente, aqui, mas ela vive aqui.

Parece que, honestamente, se tivéssemos colocado Master em algum lugar, provavelmente iria aqui, porque está tentando ser uma combinação de um sistema de estilo e construir sua própria língua virtual de CSS. 100 e mais componentes sim, parece que o mantine definitivamente se encaixa aqui, então vou fazer algo importante, vamos labelar esta seção aqui, isto é, bibliotecas de componentes, a realidade mais fraca é que a maioria das empresas necessitam de uma biblioteca de componentes de alguma forma, seja uma que eles construíram sozinhos ou uma que eles instalaram no NPM de algum lugar, as bibliotecas de componentes. Para unificar uma linguagem de design em uma aplicação.

E mesmo se você não quiser construir sua própria biblioteca de componentes, eu acho que isso te dá mais controle e flexibilidade. Se você usar as bibliotecas de componentes que são construídas, são os sistemas de estilo que são construídos em cima de um melhor primitivo de CSS, então se você combina algo como Tailwind com TailwindUI ou usa Tailwind e HeadlessUI para construir sua própria coisa ou pegar DaisyUI, que eu acho que se encaixa aqui e aqui, está usando Tailwind, mas o que é o Tailwind é só aqui, mas usando Tailwind se encaixa. A algum ponto com as coisas que construímos e Tailwind está apenas nos dando esta uma coisa aqui e eu acho que é aqui que muita gente tem um empurramento sobre Tailwind vem de é que as pessoas acham que está aqui e ficam enganadas porque não gostam das coisas aqui não está aqui e ficam enganadas porque não fazem as coisas que estão aqui e estão acostumados a estar aqui e não veem nenhum motivo para sair acho que.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Armadilhas que o transcript revela

Onde o fluxo costuma quebrar, segundo a fonte: Para mim, não fazer isso seria o equivalente de um engenheiro de back-end não pensar em seus dados. Não houve problemas que tivemos no ping com Tailwind que não conseguimos resolver com Tailwind ou em torno de Tailwind muito facilmente. Simples coisas como resetar um subinput em um campo, em uma forma, em MUI, requer um conhecimento íntimo de react um conhecimento íntimo de formas e um conhecimento íntimo de comportamentos passados por um prop do MUI para que você possa realmente conseguir um refeitor para a entrada abaixo.

Quando eu tenho esses problemas eu vou para o meu time de desenvolvedores e designers que construem a biblioteca de componentes. Particularmente familiarizados com como construir essas coisas talvez para sua primeira app se você está bem com as coisas não funcionando exatamente como você as precisa instalar mui use isso por um pouco e assim que você começar a correr problemas e frustrações no seu próximo projeto, desligue há muito pouco necessário para qualquer outro do que um desenvolvedor de back-end que está tentando ignorar o front-end. Ele quer se concentrar em engenharia de backend.

Então, se nós estivéssemos fazendo Outro dos meus tipos de gráficos favoritos é o espectro. Se você realmente quiser, você pode fazer Tailwind mas é como se tomasse um bom pouco de esforço porque as coisas que ele oferece são sólidas Então Tailwind te dá um ponto de partida um pouco melhor em termos de como as coisas são mais feias, como se fosse mais fácil de consistência e então te dá uma capa muito mais alta. Algo como material UI te começa em um lugar um pouco melhor, mas capta muito difícil porque nesse ponto você está agonizando em mui e construindo sua própria coisa você pode fazer isso, não vou dizer que você não pode, vou apenas dizer que você seria muito melhor começando com quase qualquer outra coisa que não vai ser o melhor caminho para quais são seus objetivos.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Como levar isso para o seu contexto

Traduzindo o trecho para um time que não viu o vídeo: Eu acho que isso resumiu este ponto particular que eu queria fazer, que Tailwind expande imensamente a área de qualidade de design que você pode criar, mas você está criando. Talvez material ui seja uma solução ok, mas se seu objetivo é construir algo e movê-lo para o direito o quanto mais você puder em tempo material ui não vai te ajudar a chegar lá tudo material ui vai fazer é te tirar dessa área, uma vez que você está fora dessa área, é muito limitado com o quanto mais além de que vai te ajudar, acho que há mais um sub-bate importante para ir aqui e alguém acabou de chamar isso em. Eu quero ser muito claro sobre a diferença entre essas coisas.

Para fazer um look modal e funcionar da maneira certa com acessibilidade. Espero que isso ajude a clarificar a diferença entre eles, mas algo como TailwindUI, por exemplo, em seu código, este não tem it maybe if i use react it will no it won't on some of the examples in tailwind ui Eu não sei se eles vão mostrar aqui, talvez eles tenham um drop-down ou algo assim. Sim eles fazem isso aqui você vê menu e transição sendo importados da ui do Headless porque essas componentes incluem comportamentos que não incluem estilos, então quando você faz menu como div você está usando o menu o ajudante de javascript que a equipe Tailwind escreveu como parte da ui do Headless para fazer isso aparecer corretamente na dom como um elemento nav menu como se estes botões se comportam.

Parece quase que isso na verdade chakra é exatamente como mantine não mantine é muito mais como componentes totalmente fechados, como se tivesse mais de 100 componentes, isso não é isso, que chakra tem como 20 componentes no máximo, se me lembro bem, sim, eles não têm quase nada ah, é meio que todos os três, porque ele tem sua sintaxe estranha como css plus para suas definições de margem e tipo, ele meio que tem. Eu tentei, ou eu não tentei Mantine, eu tentei Chakra um pouco e sentiu como outro sistema de componentes para aprender e outra solução de CSS para aprender e outro sistema de estilo para aprender. E neste espectro, Tailwind é bem baixo, é bem próximo de ser só CSS eu até diria que Bootstraps não é muito mais longe, Bootstraps é um pouco mais longe mas algo como Chakra só fica aqui em cima, ao lado de MUI, como quando você aprende Chakra ou MUI, você está aprendendo Chakra e MUI quando você aprende Tailwind você está se melhorando em CSS, se seu objetivo é evitar CSS, se você quer desenhar uma linha aqui e.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Sinais de que a aplicacao funcionou

Para fechar o ciclo com evidência do próprio material: E eu acho que o que você coloca na lista de tabas é inferido como as crianças que as tabas vão chamar com, mas há uma maneira para eu colocar um valor custom aqui em vez de um índice talvez eu queira passar como um id e ter o id colocado aqui em vez de se eu fizer isso, não há maneira que seria segura de escrever porque a definição não é inteligente o suficiente para ir dessa forma, mas Não. Você precisa entender Chakra profundamente para usar Chakra. O lock-in aqui é absurdo não apenas como lock-in base de código, mas lock-in do cérebro você começa a usar seu cérebro da forma chacra, não da forma do browser com tailwind você só usa as coisas que você usa quando você adiciona um novo nome de classe em tailwind ou na sua ui quando você está usando tailwind o compiler tailwind vê isso e adiciona esse tailwind para o css que é compilado é hora do rato de.

Vamos falar sobre bibliotecas e frameworks de UI e como construímos nossas interfaces de usuários em aplicações de web. O que eu não acho que eu sou conhecido por tanto é minha história com outras frameworks de UI e, especificamente, a falta de cuidado que eu tive com a maioria delas. Quando eu voltei para o desenvolvimento de web e entrei no mundo do React, mundo.

Eu então comecei a jogar com coisas como material UI, Chakra por um pouco, que entrou em Radix e React Aria um monte, mas essa coisa continuou aparecendo chamada Tailwind. Eu não acho que vou estar interessado nisso. Depois eu usei em um time que eu estava trabalhando, porque outro um dos desenvolvedores gostou disso e, em geral, quando eu estou em um time, eu não me importo o suficiente com frameworks de UI para tomar uma posição forte e eu mas outros parceiros trazem as coisas que eles se importam e, caramba, eu me apaixonei com o Hale Windfast.

Para `tailwind-vs-ui-kits-decisao`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Recortes adicionais da fonte

Estes trechos reforçam o raciocínio sem resumir genérico:

Vamos falar sobre bibliotecas e frameworks de UI e como construímos nossas interfaces de usuários em aplicações de web. O que eu não acho que eu sou conhecido por tanto é minha história com outras frameworks de UI e, especificamente, a falta de cuidado que eu tive com a maioria delas. Quando eu voltei para o desenvolvimento de web e entrei no mundo do React, mundo.

Eu então comecei a jogar com coisas como material UI, Chakra por um pouco, que entrou em Radix e React Aria um monte, mas essa coisa continuou aparecendo chamada Tailwind. Eu não acho que vou estar interessado nisso. Depois eu usei em um time que eu estava trabalhando, porque outro um dos desenvolvedores gostou disso e, em geral, quando eu estou em um time, eu não me importo o suficiente com frameworks de UI para tomar uma posição forte e eu mas outros parceiros trazem as coisas que eles se importam e, caramba, eu me apaixonei com o Hale Windfast.

Era muito mais focado, era apenas CSS, mas mais fácil de escrever e mudou completamente minha compreensão do papel das bibliotecas no meu design de UI e eu queria falar um pouco sobre como eu mudei minha própria pensando sobre o que é uma biblioteca de ui, muito menos como sua função em uma base de código e como construímos ao redor deles. Quais são os tipos de bibliotecas de componentes? Coisas como Headless, UI, Radix, React, Aria e tem tantos outros que eu tenho certeza que estou esquecendo e desligando e eu me desculpo para todos eles, isso é menos sobre qualquer uma biblioteca específica, mais sobre os tipos de bibliotecas e como fazer boas decisões ao redor delas.

A terceira e uma que eu vejo as pessoas falando mais frequentemente é o estilo de sistemas, então, componentes ou bibliotecas que têm estilos construídos coisas como tailwind ui daizyui, mantine e você poderia argumentar que mui fica aqui, mas vamos entrar nisso em breve, então eu queria começar com a premissa de que estes são os três tipos de core de livrarias que existem ou, no mínimo, os três espaços que uma. Para rapidamente colocar algumas coisas nesses, como podemos colocar Tailwind aqui, mas também podemos colocar como Sass aqui. Headless ui react aria então react aria oh não react aria não é um desses isso é bootstrap é provavelmente a melhor coisa para aqui eu acho que é muito importante reconhecer onde as ferramentas que você está olhando usando e comparando caem em um gráfico como este também coloque tailwind eu acho que na verdade até que eu fique em algo mais interessante a coisa que eu continuo tendo que aparecer que me tem sido e.

Você vê por que eu me confundo quando as pessoas dizem que Tailwind é como Bootstrap, então você deveria usar minha UI em vez? Eu quero ter um sistema de estilo que eu tenho, eu quero construir meu próprio sistema de estilo usando Tailwind. Você vê aqui todos os justifies mapados para exatamente uma linha de CSS.

Bootstrap te dá componentes predesignadas, que se você estiver feliz, legal. E também há soluções como DaisyUI, que eu uso muito no stream, porque DaisyUI é construída em cima de Tailwind em vez de ser construída em cima de CSS tradicional, o que significa que você pode pegar um componente aqui, usar o botão deles e embaixo dele é um monte de classes Tailwind e você pode até ouvir olhar o HTML, eu achei que eles realmente derrubaram o CSS que ele cria para você. Geralmente, o legal da Ui da Daisy é que ao invés de ser construído em cima de CSS com tantos coisas caóticas, a Ui da Daisy é construída em cima de Tailwind.

Internalize com links reais do ecossistema CrazyStack: /blog, /curso-cursor-avancado-configuracoes-pro, /curso-claude-code-9-dicas-profissionais, /programa-crazystack e /checklist-independencia-cursor.