Entregue aplicações web profissionais com autonomia e destrave a sua carreira para salários acima de 10 mil reais. Garanta sua vaga no Fullstack Master: go.devpleno.com/fsm

Cai nesse video de paraquedas, por causa do next13 com que agora é 0 runtime, logo styled-components tem que ficar utilizando 'use client' em tudo

Excelente abordagem, me ajudou aqui na minha decisão em utilizar o tailwind num projeto novo, obrigado pelo apoio

@DevPleno

2 жыл бұрын

Que bom que ajudou! :)

Muito legal! Você é fera Tulião!

@DevPleno

Жыл бұрын

Muito obrigado! 💙

Show de bola, muito boa abordagem :)

@DevPleno

2 жыл бұрын

Obrigado! :)

Valeuuuuuuuu, me ajudou demais no meu projeto!

@DevPleno

2 жыл бұрын

Que ótimo!

Muito legal. Para algo mais simples acho que o tw styled components atende bem. Muito bom!

@DevPleno

2 жыл бұрын

:)

agora entendi o hype do tailwind, mt brabo

@DevPleno

3 жыл бұрын

hehehehehe

Cara muito bom! Obrigado.

@DevPleno

Жыл бұрын

Estamos juntos! ❤

Consegui minimizar ainda mais o código eliminando a necessidade de definir className=. A sintaxe fica assim: basicamente criei um componente react q recebe as props, pega os nomes delas e coloca como className no return: function Div(props) { const classList = Object.keys(props).reduce((total, element) => { if (element === 'children') return total; return total + ' ' + element; }); return ( {props.children} ); } Ficou interessante, só q falta uma coisa pra melhorar, mexer no formatador das cores do vscode, para que as props desse componente (q depois viram classes) fiquem na cor de string assim como a string do className é.

@ursochurrasqueira

2 жыл бұрын

muito boa ideia, curti essa abordagem, lembra o Chakra-UI. uma sugestão, receber uma prop "as" pra que seja possível renderizar outras tags além da div (por consequência teria que mudar o nome do componente hehe)

@LeonardoLuzx

2 жыл бұрын

@@ursochurrasqueira entao mas agora encontrei problemas nisso, isso faz o render do styled components ficar mais pesado doq ja é. Agora tô só no tailwind com className mesmo, ta sendo ótimo.

minha mente explodiu quando chegou no tailwind-styled-components

@DevPleno

Жыл бұрын

hehehehe

Muito show

@DevPleno

3 жыл бұрын

Obrigado! :)

Muito top !!!

@DevPleno

9 ай бұрын

Obrigado!

Existem mais duas ferramentas que juntam o Tailwind com CSS-in-JS, tailwind-styled-components e twin.macro

@henriquedelben

Жыл бұрын

Olá amigo ! Sou iniciante e me vejo aqui com muitas opções de estilização com diferentes ferramentas, tailwind, styled-components, chakra, etc. Eu li em um forum que CSS-in-JS adiciona um overhead/atraso no desempenho da aplicação. Você acha que impacta muito? Não? Abc !

@rafaelmrantunes

Жыл бұрын

​@@henriquedelben Exatamente. Eu troquei Styled Components recentemente de um projeto inteiro por SCSS Modules. Minha dica é tu saber um pouco de tudo pra conseguir se virar, e conseguir julgar a melhor opção pra cada tipo de projeto. Se nem sempre seu foco no projeto é estilo e quer algo que seja rápido, Chakra ou Tailwind deve resolver. Mas eu sinto que as pessoas estão se distanciando cada vez mais do básico. Dá pra ser produtivo só com CSS ou SCSS.

@henriquedelben

Жыл бұрын

@@rafaelmrantunes valeu pela resposta, realmente não tem jeito, tem que aprender um pouco de tudo, rs !

E como faz pra configurar o ssr no next com esse tailwind-styled-components

Para facilitar o que é cada elemento no html nao poderia simplesmente acrescentar um id? Excelente video!

Que tema vv usa no vscode?

Olá, Amigo! Estou tendo problemas ao utilizar a extensão TailwindCss para habilitar o Intellisense esta lib que você utilzou no video, a tailwind-styled-components. Fui na documentação oficial da tailwind-styled-omponents, fiz toda a configuração recomendada(modificando o settings.json), mas mesmo assim não funciona. Você sabe alguma alternativa?

A sua abstração que juntou um componente em styled-components + um componente com tailwind-styled-components não funcionou. Pelo vídeo, as propriedades do Wrapper não persistiam no CustomWrapper quando você atualizava a página, gostaria de entender o porquê de você não ter corrigido isso. No mais, bom vídeo!

@jsprobr

2 жыл бұрын

Verdade não funcionou e não corrigiu, fiquei sem entender.

Acho bem melhor apenas um usar CSS-in-JS, como Emotion. Não consigo gostar dessa abordagem de utility classes.

@tadeu.garcia

3 ай бұрын

Também acho que fica muito bagunçado, parece que estamos voltando ao style inline.