@Crtykwod
Posted
Opa meu mano Paulo, já se passaram 17 dias, mas nunca é tarde, né?
Primeiro ponto, as cores não coincidem. As cores do "Purple 500" e o "Purple 100" do style-guide.md não são as mesmas do .purple-500 ou .purple-100 do tailwind, crie classes personalizadas para essas cores, para se manter fidedigno ao design original.
NÃO use height: 100vh; (h-screen) para o body em hipótese alguma!!! Isso vai impedir o seu site de ter scroll já que a altura dele sempre será do tamanho da viewport, então em telas com zoom ou tamanhos de fonte maiores, o conteúdo simplesmente será perdido. Ao invés disso, use min-height: 100vh (min-h-screen), o que significa algo como: "use pelo menos a tela toda, mas se precisar, pode ter mais."
Não use medidas fixas como no main: w-[1000px] -- Aliás, acabei de ver, aquilo não é uma <section>, é o seu <main>, o seu conteúdo principal, apenas as divs dentro dele que são <section>s -- Voltando, você pode checar depois no seu output.css, as classes pré-feitas usam rem como medida ao invés de px, isso porque px é um medida imutável, enquanto rem varia de acordo com o tamanho da fonte, é uma questão de acessibilidade, você pode ver nesse vídeo aqui: https://www.youtube.com/watch?v=UXu450EK4_w,
se preferir em inglês: https://www.youtube.com/watch?v=okw-whFWGEo
De mais grave é isso, ainda tem muita coisa para falar, mas é muito complicado analisar um código com tailwind, então se você quiser, eu posso dar fork no seu repositório e vou fazendo mudanças e fazendo um comentário nelas.
Espero que isso te ajude de alguma forma e eu te desejo todo o sucesso do mundo nessa jornada pelo frontend, Paulo!
