[diário de estudo] o react e o tailwind

olá! tudo bem? 👋

pega um café e o seu patinho de borracha que esse post contém: recomeços e crises de estilização

para dar o pontapé nos estudos, eu resolvi iniciar com um projeto que eu já havia feito alguns anos atrás enquanto testo algumas ferramentas novas. dessa forma, eu consigo trabalhar dentro de um território familiar, mas com algumas coisas novas para explorar.

a primeira coisa nova que eu testei foi iniciar o projeto usando o vite. até agora, eu sempre usei o create react app para criar os projetos react, e fiquei até um pouco maravilhada como realmente criar um projeto com o vite é muito mais rápido.

o grande desafio apareceu mesmo com o tailwind! até então, a minha zona de conforto é muito com o styled-components. gosto muito como ele funciona e também a liberdade que ele dá para estilização, enquanto a componentização dá uma facilidade que o css puro com o react fica meio chato. já o tailwind trabalha um pouco parecido com o bootstrap, setando as estilizações pelas classes.

o tailwind não é difícil de trabalhar, mas ainda estou descobrindo como ainda ter a minha liberdade de criar e personalizar os elementos usando apenas as estruturas do tailwind. para isso, eu foquei em um componente só e criei uma tela de login que acabou ficando assim:

esse foi o resultado depois de algumas horas tentando desvendar a documentação do tailwind (que ainda estou tentando me encontrar nos elementos) e de adaptação de componentes estilizados que a documentação oferece. o lado bom de trabalhar com ferramentas como o tailwind e o bootstrap é que há uma certa agilidade na hora de criar os elementos visuais, pois eles já vem prontos de certa forma, porém em outro lado quando queremos adaptar ou ter mais liberdade nas estilizações precisamos nos manter dentro dos padrões do que ele permite (principalmente se você não quer misturar ou adicionar o seu próprio css, como é o meu caso).

a próxima etapa será criar os elementos estáticos da aplicação que serão apenas exibidos em tela em certos momentos; e então replicar uma parte do login para a tela de cadastro.

até a próxima 🦖