Recriei a interface do Spotify usando Tailwind

Links importantes 👇
• Assine Rocketseat ONE com 60% de desconto! São 18 formações para levar você ao próximo nível na programação
• Oferta de aniversário na Faculdade de Tecnologia Rocketseat escolha a pós graduação ideal para a sua carreira

Desde que o Tailwind virou a ferramenta padrão de estilização do Next.Js, gostar ou odiar Tailwind é quase um assunto delicado

Acontece que independente da sua opinião a respeito disso, essa é a nossa realidade no momento 😅

E pra colocar na prática e mostrar um pouco das possibilidades que esse novo padrão pode fazer para o nosso código, Diegão decidiu voltar às raízes e clonar a interface do Spotify (versão web) usando Tailwind.

E aí, bora codar?

-----

Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[tascintra]

32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando <Play fill='bg-black' />

[gabrielantunes]

Fazer responsivo é uma boa hein. Queria ver como iria ficar a organização do Tailwind a medida que vamos adicionando transições, animações e responsividade.

[onildo_costa]

Cara, o Diego consegue fazer tudo parecer tão fácil. Incrível isso bixo.

[teliiz]

Em uma hora o cara faz o layout do Spotify, em uma hora não consigo nem iniciar um projeto kkkk

[maykbrito]

O vídeo nem começou e eu já tô no hype!! Diegão é MONSTEEERRRR

[odeisouza]

Para fazer o nav possuir o texto _Playlist <número>_ com o valor do número incremental, da para usar o emmet: nav>a{Playlist $}*5
Você troca o 5 no final para quantas tags anchor você irá querer

[aryelramos]

Perfeito, assisti como se fosse um filme. Devia virar playlist, seria um boracodar em react...

[fabioreichertleite]

para preencher o botão de play de preto com o lucida se faz assim>
<Play color="#000" fill="#000"/> e tirei o text-color do button

[caiovitor]

Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.

[rafaelful]

Muito bom! Para melhorar as classes repetitivas, eu criaria uma classe no style "scoped" e usaria o @apply, sendo assim, o código fica mais limpo e fácil para manutenção.


Ex:

<Style>

.titleSectionAlbuns {

@apply text-md font-semibold;

}

</style>


E por aí vai...

[wChickenLittle]

Responsividade e adição da troca de temas light/dark seria show também :D

[renatoteex]

Soltaaaa o brabooo!! Queremos continuação!! Me abriu muito a mente sua explicação, a didática é boa demais!

[wandersonbarbosa]

Olha fiz todos os passos e gostei bastante do resultado, eu gostaria mesmo que continuássemos a melhora-lo tipo uma parte 2.

[hamiceis]

Já quero a parte 2, muito top o conteúdo Diego

[wsanada]

Muito prático! Gostaria de ver fazendo exatamente igual ou bem mais aproximado, com o gradient de fundo trocando as cores de acordo com o álbum, mudar header no scroll down, responsivo etc. Acho que é um exercício bem interessante e explora várias técnicas.

[jairodevjunior]

video mto massa, fazia tempo que nao codava com typescript e next, mto massa ver o quanto tudo mudou hehe. Vlwww Diegao e galera da Rocket, video bom demais!!!

[setentaxsete]

Primeira vez vendo o Tailwind. Muito bom e fácil de usar. Muito legal tb vendo vc criar a réplica do spotify. Show!

[juliocesarcandeia]

Gostei muito, faz mais vídeos neste estilo, tô começando ver front agr e achei muito bom!!!!

[aiandraalvesmeira]

Eu amo Taiilwind, meu novo queridinhoo. Arrasou com o vídeo!! E quem tem problema com toque no código, podemos componentizar e deixar o HTML mais limpo...

[matheusleao]

Diego consegue fazer com que as coisas pareçam fáceis hahah é absurdo. Parabéns pelo conteúdo