Creating Notifications Widget with Tailwind (+ Light/Dark Theme)

Ever since Tailwind became the standard styling tool for Next.js, no one has ventured further to test new things with it than Diegão 😂
This time, we'll see in practice how to build a notifications widget just like the one we use on the Rocketseat platform. Of course, using TailwindCSS. Additionally, we'll also explore some patterns we can use within React code.
So, let's code?
Follow Rocketseat on social media:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[@mzallan]

Opa, sou programador javascript e percebo que o conteúdo de utilização de Containers(Docker) é bem escasso aqui no KZbin, seria legal fazer uma API dessas, bem simples mesmo, com backend e frontend e um banco simples, e por fim conseguir ter todo o sistema em container rodando simultaneamente via Docker Compose.

[@dieegosf]

Ok, vou preparar, mas geralmente não curto muito usar containers pro código front-end principalmente

[@indianoverdan1572]

Doideira como os professores da Rocketseat ensinam bem, eu entro me sentindo leigo e realmente saio entendendo sobre

[@dieegosf]

Obrigado

[@R6videos6R]

Também não conhecia o divide, sensacional

[@evertonvargas4712]

eu sempre aprendo algo novo, hoje aprendi sobre o divide, achei muito legal essa class

[@void-inc]

Aula linda slc

[@cssgabriel]

Muito bom mesmo!!

[@alyssonjuniordepaula4173]

MASSA!!!

[@fernandonandoz]

Daora esse video!

[@Dajuhf]

Não conhecia esse Tailwind, muito massa!

[@Matheus_1582]

Estude a documentação do Tailwindcss ....voce vai entender tudo.... É como dizem na programação sempre existe uma documentação por tras de tudo...

[@eltonsantosoficial]

Pow faz o botao alternando entre tema light e dark para ficar completo, please

[@felipemoreira4286]

em 2017, usava o bootstrap assim, e a galera não entendi o motivo. O Tailwind veio pra ficar, e agora muito mais moderno e com novas funcionalidades, dando mais liberdade ao dev tambem! Muito bom! Eu gostaria de ver você criando um tema vindo de uma api como vc armagenaria isso e disponibilizaria de acordo com o login de cada usuario. Gosto de ver vc pensando e resolvendo essas abordagens. Obrigado pelo excelente conteudo!

[@denysantos9012]

Congratulations, galera mas no caso do modo dark eu gosto de (nos meus projeto pessoais) colocar a opçao de o usuario mudar de acordo com o que ele quer Coloco o icone de moon e de sun, dependendo o modo que estiver e uso um estado global com useContext para compartilha-lo em toda a aplicação

[@rodolfoduarte5366]

Muito massa mesmo

[@LivesDoVini]

é impressionante o quão produtivo é fazer um projeto com tailwind, nem parece eu odiei da primeira vez que usei KKKKKKK

[@dev-muca]

Literalmente eu na primeira vez que usei kkkkk, só uso Tailwind pra fazer meus projetos com Next/react agora kk

[@pabloalan1656]

@LivesDoVini o mesmo aconteceu comigo man 😄

[@eliseuchimbaia8496]

- Sugestão para novos videos : modal quando clicamos em um botão e uma Above page. Acho que falei certo.

[@VictorSilvaDev]

Top

[@eduardojpanzo]

autenticação e privatização de routas - a maneira certa

[@brunomelo4570]

tailwindcss muito delicinha

[@paulospiguel]

Fala mano. Diz uma coisa, qual estratégia usaria para salvar uns produtos de um ecommerce como favorito usaria um noSQL (redis/mongo) para guardar essas coisas, fazia somente no local storage, usava uma tabela relacional atrelada ao usuário logado ou não fazia (favoritas um produto é frescura). Deixa a dica que te deixo like em todo os seu vídeos😂😂

[@lucaslicar3713]

Eu nunca usei tailwind mas acredito que seja bem produtivo pelo que falam. Mas eu não entendo como ficar escrevendo um monte de classe assim pode ser produtivo e organizado? e se o projeto for muito grande?

[@valmirvirtuoso3796]

POde fazer um componente de Aside com tailwind?

[@SamuelGuedesDev]

Rapaz to ficando pra trás com tanta att, eu tava usando vite agora vou voltar para o npx

[@dieegosf]

Mas o NPX e o Vite não tem nenhuma relação. Se você diz quanto ao Next, na verdade são duas ferramentas, o Next é um framework enquanto o Vite é apenas um boilerplate pra criação de projetos React, ambos cumprem seu propósito :)

[@SamuelGuedesDev]

@@dieegosf É que eu não soube expressar minha dúvida. Eu estava usando o Vite porque achava que era melhor do que o NPX, mas agora parece que o NPX está melhor para criar projetos.

[@joeljuniormanuelfombe4063]

O segundo a comentar, deixe o like.

[@fabioribeirodecarvalho2382]

O q percebo é q quando não dividimos o componentes em pequenas e partes vira um macarrão de HTML com classes e acaba ficando uma dor de cabeça para manutenção...nao vejo MT esse tema na comunidade de como dividir ou não o componente em pequenas partes mas é isso

[@brunoperrone6098]

Parabéns pelo video, Diego. Porém quando você copiou a seção recentes e sobrescreveu a antigas no tema light, esqueceu de mudar a configuração da cor das fontes...

[@torqu4to]

Qual o nome desse icon theme ?

[@leonardoprimieri8987]

Trabalhar pra pegar gripe vindo de Londres também.

[@dieegosf]

White people problems

[@eltonsantosoficial]

Onde ta o codigo desse app? Eh pq acho q fiz um negocio errado aqui ai queria poder identificar meu erro

[@tiagogoncalves6021]

Trocar o tema do pc e já ser aplicado no tailwind é massa, porém como posso fazer para adicionar um botão pro usuário trocar quando quiser, salvando talvez no localstorage? O tailwind tem isso?

[@dieegosf]

Você usa a opção darkMode como class no config do Tailwind e depois cria um botão que troca a classe do body entre dark e vazia, bem simples.

[@elliasribeiro7907]

não manjo de Tailwind, por isso tenho uma duvida: Para aplicações gigantescas ainda é recomendado usar o Tailwind? porque dessa forma eu terei que mudar cada linha de estilo pra versão dark, onde com css eu poderia modificar as classes globais.

No caso você mudaria em componentes, não faria da mesma forma que o Diego fez duplicando os códigos, saca? Aí vai mudar apenas 1 vez pra cada componente que você for usar.

[@felipebrito7236]

O que ainda acha do stitches? tailwind é muito legal mas não troco o stitches por nada.

[@dieegosf]

Stitches está com algumas limitações com o Next13, recomendo, se estiver usando o app folder do Next 13, usar o vanilla-extract.style/

[@weslleyfillipe1532]

Quando vem o curso de tailwind pro ignite?

[@samueloliveira4465]

Mano eu tive contato com o Tailwind na NLW, mas eu realmente aprendi olhando na documentação, eu lembro do atributo CSS, entro no site do Tailwind e pesquiso lá, ai mostra de forma simples como faz, e realmente é bem fácil. Acredito que nem precise tanto assim de curso para aprender, se você já souber CSS consegue fazer tranquilo. Só nesse vídeo aqui você já viu praticamente tudo que foi necessário para eu fazer meu portfólio, só falta mesmo implementar o Dark.

[@dieegosf]

Em 1 semana, por aí

[@user-rk5qx9fm8x]

Qual o tema novo do vscode do Diego?

[@programandoficafacil]

plzzz

[@joseaugustofbneto2194]

uso tailwind, vejo varias videos aulas e peguei alguns projetos para estudo, vejo que 90% só utliza div, isso é uma boa prática ? ou devemos ir na sematica do html?

[@samuelleao]

O ideal é sempre utilizar a semântica do HTML, por vários motivos, mas um dos principais é acessibilidade. Infelizmente, quando algumas pessoas utilizam o Tailwind ou qualquer outra lib que resete os estilos nativos do navegador, acabam esquecendo do peso semântico das Tags, focando apenas no peso visual.

[@joseaugustofbneto2194]

@@samuelleao entendi, mais a questão da acessibilidade não é o desenvolverdor que tem q pensar nisso, independente do semântica do html, o curso que fiz de ui e ux, mostra que quem faz a acessibilidade é o desenvolvedor independente da semântica, e a questão da mesma utilizadar as tags no lugar certo é mais voltada a ajudar os robôs dos mecanismos de busca a entender melhor o conteúdo da página. isso q vi no curso, outros curso do youtube mostra ao contratio disso kkkk, mais vlw pela ajuda

[@samuelleao]

Rapaz, nesse quesito eu discordo em partes. Todas as facetas do produto precisam pensar em mecanismos de acessibilidade. Principalmente o desenvolvedor Front-End, pois é exatamente nesta camada que a experiência do usuário é concretizada. Como eu havia dito existe muitos motivos para desenvolver um HTML semântico, um dos principais é a acessibilidade, em outros contextos como em websites é a questão que você citou de mecanismos de busca. A um exemplo de acessibilidade por meio da semântica é por exemplo um botão que na verdade é uma div, o usuário não vai interpretar aquele botão por meio do Tab, bem como uma lista de itens, todos esses elementos são descritos pelos motores de acessibilidade para situar melhor o usuário que navegar por meio do teclado. Entende? Valeu, amigo. Abraços!

[@joseaugustofbneto2194]

@@samuelleao top demais mano, obrigado

[@johnvictorhl7214]

17:29 Como ele fez isso para apagar todo texto selecionado de uma vez sem ser que segurar Alt e ficar clicando onde ele queria o múltiplos seletores (não sei se é assim que se chama)?

[@shin9670]

essa seleção no VS Code é feita utilizando o atalho Ctrl + D

[@johnvictorhl7214]

@@shin9670 Mto obg

[@brenofreitas.]

Como que faz um botão para que ele mude o theme de light para dark, sem necessariamente mudar isso no sistema?

[@dieegosf]

Você usa a opção darkMode como class no config do Tailwind e depois cria um botão que troca a classe do body entre dark e vazia, bem simples.

[@brenofreitas.]

@@dieegosf Uow haha, o cara até por texto ensina muito! kkk Obrigado!

[@armandobretas4729]

muito top, só não acho legal essa sintaxe do tailwind, tirando isso ficou perfeito!

[@johnnyferreira6121]

Se o problema for com o tamanho gigantesco que podem ficar as classes, eu gosto de usar nesses casos a lib clsx para quebrar em n linhas.

[@_BruNNo]

navegador novo Diego?

[@alveselivelton]

O navegador que tava rodando o projeto é o navegador nativo do VS Code, se não me engano

[@dieegosf]

Arc Browser

[@Matheus_1582]

Que tal usar luvas de frio....esquenta mais...

[@dieegosf]

Mas daó é ruim pra digitar, só se for aquela com abertura nos dedos

[@Matheus_1582]

@@dieegosf esatamente...

[@arrozesss]

meus ouvidos sangram a cada "uidguet" pronunciado, mas excelente vídeo como sempre! eu ainda não testei o tailwind, tenho um pouco de receio porque o componente acaba ficando muito sujo cheio de estilização (sou fã de css modules), tem alguma dica de como deixar o código mais limpo?

[@dieegosf]

Perdão, não fiz fisk. Sobre o código organizado, talvez você pode usar algo como o: www.tailwind-variants.org/docs/variants#adding-variants

[@brunomelo4570]

@@dieegosf INGRES E ESPANHOL é FISK

[@arrozesss]

@@dieegosf passou-se 1 dia, desenvolvi um projeto com tailwind e curti demais! css nativo nunca mais, o workflow é muito mais fluido... acabei percebendo que apesar da estilização ficar no mesmo arquivo, ainda sim é bem legível.

[@BillRocha]

Tailwind não é profissional!

[@guilherme-qq7ts]

a Netflix e a Nasa usam 💀