Não se preocupe com o tamanho da aula, quando o professor tem didática (o seu caso), a aula pode ter 5 horas que mesmo assim vai parecer 5 minutos. Obrigado pelo conteúdo excelente e muito explicativo.
Sobre o botão do header, eu adicionaria o after pelo tailwind mesmo, talvez algo nesse sentido: relative after:content[''] after:absolute after:left-[100%] after:w-[100vw] after:h-full after:bg-primary-blue
Sobre o botão azul do Header, fiz de uma forma (que não sei se é a mais correta) onde na tag header, deixei o "w-full" e dentro dessa tag, criei duas divs: uma div com o w-[80%] onde fica o logo, o menu e a busca com a cor laranja e o h-full outra div com o w-[20%] onde fica o user icon e o botão de acessar a conta com a cor azul e o h-full dessa forma achei menos trabalhoso e um pouco mais organizado
Eu também era dos que odiavam o Tailwind. Até perceber que a razão pela qual eu odiava não fazia o menor sentido. Eu prezo por um código limpo, não repetitivo... e na minha cabeça ao criar um estilo de botão eu teria que ficar replicando as classes sempre que fosse usar. Isso não faz sentido, pois quando trabalhamos com React o correto é a componentização. Logo as classes de um botão jamais seriam repetidas, pois criaríamos um botão reutilizável. Depois que percebi isso minha opinião sobre Tailwind mudou completamente.
Obrigado pelo vídeo. Sobre o botão azul, apenas retirei da div atual e deixei dentro da div header. Assim, ele já foi puxado(ou empurrado) pro fundo. Daí tirei o espaço que havia colocado depois do input de Buscar pra ficar melhor visualmente. Espero ter ajudado.
Nossa ajudou demais.. trabalho com design e front desde 2002 kkkk tava apanhando pra aceitar o TailwindCSS viu.. tmb tive péssima experiencia com projeto que veio malfeito Next com styledComponents, uso bastante Hugo e Nuxt. Mas com esse video seu deu um salto quantico aqui pra resolver varias duvidas. Obrigado.
Cara. primeiramente: Deus te abençoe e te ilumine sempre. Meu muito obrigado pelo video. estava muito perdido no uso do tailwind e no framework do next. agora sim entendi. muito obrigado mesmo. faça mais vídeos desse. já ganhou mais um inscrito.
Uma sugestão sobre o botão azul, você poderia ter usado o :after e fazer o posicionamento absoluto, sem ter que criar uma div, e sobre o alinhamento da imagem da Mulher, você poderia ter colocado uma classe Flex e um space-between que ele iria fazer o espaçamento. O vídeo está sensacional
Hahahaha, to assistindo o começo e eu também era assim. não aguentava nem ouvir falar de Tailwind. Depois que comecei a utilizar, não quero saber de outra coisa. Apesar de odiar um canavial de classes no meu componente, eu amo desenvolver com tailwind
Dahora mano eu fiz igualzinho a você já vai ficar no meu portifólio, mas, eu gostaria que você fizesse outro vídeo mostrando como se faz a responsividade usando Tailwind, pq usando CSS puro fica facinho de fazer a responsividade com Tailwind me parece bem mais trabalhoso
Fiquei aguardando você criar âncora no menu para as seções abaixo, fez isso em outro vídeo ou não fez essa feature? Tô tendo dificuldade com isso no next 14 rsrs
Cara no min 37 tu usou um container para centralizar todos os elemento do projecto como tu faz la no curso onde tens uma classe -container no sass, aqui tu pode fazer também nas configs do tailwindcss function px(pixles) { return `${pixles / 16}rem`; } export default { theme: { container: { center: true, padding: "1rem", screens: { lg: px(1280), xl: px(1280), "2xl": px(1280), } } } }
pra mostrar esses dados do que vc está usando no tailwind, por exemplo: vc define h-9 e mostra ao lado o tamanho em rem e px, tem algum outro plugin além do Tailwind CSS InteliSense? valeu pela aula!
Uma pergunta que não tem muito a haver com aula Como eu faço para deixar o terminal com essa borda um pouco "dourada" como mostra no começo do vídeo? É algo do Mac ou funciona em outros sistemas? ( ex: Linux )
No Windows você pode tentar utilizar o terminal Hyper e nele é possível instalar temas chegando a algo bem próximo do que você quer, e no Linux também é totalmente possível, até mesmo no terminal do próprio sistema.
Não se preocupe com o tamanho da aula, quando o professor tem didática (o seu caso), a aula pode ter 5 horas que mesmo assim vai parecer 5 minutos. Obrigado pelo conteúdo excelente e muito explicativo.
concordo plenamente
Sobre o botão do header, eu adicionaria o after pelo tailwind mesmo, talvez algo nesse sentido:
relative after:content[''] after:absolute after:left-[100%] after:w-[100vw] after:h-full after:bg-primary-blue
Sobre o botão azul do Header, fiz de uma forma (que não sei se é a mais correta) onde na tag header, deixei o "w-full" e dentro dessa tag, criei duas divs:
uma div com o w-[80%] onde fica o logo, o menu e a busca com a cor laranja e o h-full
outra div com o w-[20%] onde fica o user icon e o botão de acessar a conta com a cor azul e o h-full
dessa forma achei menos trabalhoso e um pouco mais organizado
Eu também era dos que odiavam o Tailwind. Até perceber que a razão pela qual eu odiava não fazia o menor sentido. Eu prezo por um código limpo, não repetitivo... e na minha cabeça ao criar um estilo de botão eu teria que ficar replicando as classes sempre que fosse usar. Isso não faz sentido, pois quando trabalhamos com React o correto é a componentização. Logo as classes de um botão jamais seriam repetidas, pois criaríamos um botão reutilizável. Depois que percebi isso minha opinião sobre Tailwind mudou completamente.
Obrigado pelo vídeo. Sobre o botão azul, apenas retirei da div atual e deixei dentro da div header. Assim, ele já foi puxado(ou empurrado) pro fundo. Daí tirei o espaço que havia colocado depois do input de Buscar pra ficar melhor visualmente. Espero ter ajudado.
Show de bola garoto! O melhor e mais completo que vi até agora.
Nossa ajudou demais.. trabalho com design e front desde 2002 kkkk tava apanhando pra aceitar o TailwindCSS viu.. tmb tive péssima experiencia com projeto que veio malfeito Next com styledComponents, uso bastante Hugo e Nuxt. Mas com esse video seu deu um salto quantico aqui pra resolver varias duvidas. Obrigado.
Cara. primeiramente: Deus te abençoe e te ilumine sempre. Meu muito obrigado pelo video. estava muito perdido no uso do tailwind e no framework do next. agora sim entendi. muito obrigado mesmo. faça mais vídeos desse. já ganhou mais um inscrito.
to começando a acostumar e aprender tailwind agora, realmente é ótimo, muito bom video, obrigado, por favor continue postando haha!
Uma sugestão sobre o botão azul, você poderia ter usado o :after e fazer o posicionamento absoluto, sem ter que criar uma div, e sobre o alinhamento da imagem da Mulher, você poderia ter colocado uma classe Flex e um space-between que ele iria fazer o espaçamento. O vídeo está sensacional
Ele fez isso, o que acontece é que a imagem PNG não está recortada até as bordas.
Otimo video man, gostei muito de conhecer o Tailwind, me abriu novos horizontes.
Hahahaha, to assistindo o começo e eu também era assim. não aguentava nem ouvir falar de Tailwind. Depois que comecei a utilizar, não quero saber de outra coisa. Apesar de odiar um canavial de classes no meu componente, eu amo desenvolver com tailwind
Sensacional!!! Parabéns!!!
Top mano, parabéns.
19:28 não sabia dessa, vai facilitar muito agora
Obrigado pela aula, muito bom...
Bons estudos!
bem legal, sei que foi mais demonstrativo
algumas coisas eu faria diferente
que terminal massa, depois se puder fazer um video sobre qual é e qual Sistema operacional vc está usando.. vai matar eu de curiosidade !!!
macOS
Dahora mano eu fiz igualzinho a você já vai ficar no meu portifólio, mas, eu gostaria que você fizesse outro vídeo mostrando como se faz a responsividade usando Tailwind, pq usando CSS puro fica facinho de fazer a responsividade com Tailwind me parece bem mais trabalhoso
Conteúdo fodástico!
Excelente didática! Obrigado pelo vídeo!
Fiquei aguardando você criar âncora no menu para as seções abaixo, fez isso em outro vídeo ou não fez essa feature?
Tô tendo dificuldade com isso no next 14 rsrs
Boa Will... 🚀🚀 "Tailwind não é o Geralt mas tem suas bruxarias " 🤣 🔥
já pensou em usar o tailwind export do figma ? ja vem pronto so fazer leves ajustes...
Qual tema de icones você usa no vscode?
conteúdo tooop
Mano, você tem o Repositório deste projeto no Github???
Show!!!
muito bom o video, no aguardo de uma parte 2
Qual o tema que vc usa no vs code?
Cara gostei muito, me interessei no curso, ao olhar a grade notei que esta no next 13. Tem muita diferença para o next 14?
Cara que aula incrivel aprendi muito, eu consigo usar o tailwind para para desenvolver qualquer template?
Sim qualquer template. Existem casos onde você tem que extender/customizar algumas coisas do Tailwind mas nada muito absurdo de se fazer.
Olá, você pode disponibilizar o codigo por meio de um link do Github ?
Excelente conteúdo Will!
Pode disponibilizar o layout do figma?
Cara no min 37 tu usou um container para centralizar todos os elemento do projecto como tu faz la no curso onde tens uma classe -container no sass, aqui tu pode fazer também nas configs do tailwindcss function px(pixles) {
return `${pixles / 16}rem`;
}
export default {
theme: {
container: {
center: true,
padding: "1rem",
screens: {
lg: px(1280),
xl: px(1280),
"2xl": px(1280),
}
}
}
}
O mais brabo! 🔥
pra mostrar esses dados do que vc está usando no tailwind, por exemplo: vc define h-9 e mostra ao lado o tamanho em rem e px, tem algum outro plugin além do Tailwind CSS InteliSense?
valeu pela aula!
Cara, amei
Chegando agora 😊
Tem como mandar o link do figma?
Ajudaria muito né man.
Faça mais, por favor
Nice tutorial ,Thanks
Muito bom!
Uma pergunta que não tem muito a haver com aula
Como eu faço para deixar o terminal com essa borda um pouco "dourada" como mostra no começo do vídeo? É algo do Mac ou funciona em outros sistemas? ( ex: Linux )
No Windows você pode tentar utilizar o terminal Hyper e nele é possível instalar temas chegando a algo bem próximo do que você quer, e no Linux também é totalmente possível, até mesmo no terminal do próprio sistema.
Boraaaaaa
please can we have the figma file
Top 🤗
Responsivo?
Só faltou o arquivo figma.
Do jeito que você fez, se for a utilizar uma tela maior, aí quebra.
Cara, ja fiz de tudo aqui mas não consigo fazer o bg renderizar a minha imagem.
tailwind.config.js
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
backgroundImage: {
'img_bg_hero': "url('../assets/bg-hero.png')"
},
extend: {
colors: {
'primary_gray': '#E9EAEC',
'primary_yellow': '#FFCC00'
}
},
},
daisyui: {
themes: ["light"],
},
plugins: [require("daisyui")],
}
export default config
meu componente
import {ReactNode} from "react";
export function SectionRoot({children} : {children: ReactNode}) {
return (
{children}
)
}
consegue ver algo de errado nisso ai?
Eu também não consegui dessa forma. Eu fiz pelo style do react normal mesmo.
Muito muito top.
Muito bom!!
Muito bom!