Transcrições
1. Boas-vindas ao curso!: Quando se trata de construir sites, maioria de nós se enquadra em dois grupos, ou
somos um designer ou um desenvolvedor. Pessoalmente, eu não sou o melhor designer
lá fora , mas eu ainda preciso que meus sites fiquem bem, e é aqui que Tailwind entra. É também outros frameworks e bibliotecas disponíveis mas muitos deles aplicam sua própria maneira rígida de fazer as coisas. Podemos escrever o nosso HTML como faríamos normalmente,
e, em seguida, fazer uso dos nomes de classe cuidadosamente projetados. Todas as classes de utilidade para fornecer uma aparência limpa e profissional para todo
o seu projeto, tudo enquanto permanece dentro do nosso HTML. Isso é especialmente útil para quando um projeto cresce, em vez de pensar
consistentemente em novos nomes de classe e folhas de estilo em constante crescimento. Tailwind oferece um sistema de design consistente que toda a sua equipe pode usar. Comprar utilitários simples para controlar quase tudo, como espaçamento, cores, tipografia, design responsivo e layout. Como alguém que reconhecidamente não é o melhor designer lá fora, Tailwind realmente ajudou a dar ao meu site uma base profissional para construir. Atualmente, é a minha escolha ao iniciar um novo projeto. Permita-me focar no que faço de melhor. Como é que funciona? Uma vez que Tailwind é incluído em seu projeto e vamos abordar como fazer isso na classe, usá-lo em seu projeto é fácil. Começamos adicionando o nosso HTML da mesma forma que faríamos normalmente, adicionar o conteúdo à tela. Este exemplo mostra uma seção contendo algum texto dentro sem qualquer estilo que você veja no canto inferior direito. Isso parece muito chato na tela. Ficando aqui dentro de nosso HTML, Tailwind nos fornece essas classes de utilidade que podemos aplicar. Começando com estes wrapper seção eu adicionei três
dessas classes que são bastante descritivos para cada um faz. Cada classe faz uma coisa simples, e a primeira é bg-cinza-800. Isso define o fundo para ser cinza
e, em seguida, você sombra de 800. Também analisaremos as paletas de cores mais tarde no curso. P-seis é um valor padrão de seis e podemos aumentar ou diminuir esse número com mais ou menos espaço dentro. O centro de texto é usado para centralizar o texto contido dentro. Claro, o texto dentro agora é difícil ler, então vamos passar para o estilo dos elementos p. Novamente, adicionamos os atributos de classe que são elementos, e assim como o wrapper externo, novamente fazer uso da cor de cinza. Mas desta vez aplicamos o tom mais claro de 200. Texto-LG é para texto maior e meio de fonte é o peso da fonte que vamos aplicar. O resultado é uma seção de aparência limpa sem sequer escrever qualquer código CSS. Além disso, não queremos que todos os sites que criamos tenham a mesma aparência, e ainda podemos escrever nossos próprios estilos se quisermos. Tailwind tem muitas opções de personalização disponíveis para tornar nosso site mais exclusivo. Nesta aula você vai aprender sobre esses utilitários e muito mais que Tailwind tem para oferecer. Ao criar um projeto de administração de estilo Dashboard, exiba uma lista de produtos disponíveis em nossa loja. Como vemos aqui, ele será responsivo e
cuidará do layout de tela grande e pequeno. Esta classe é focada em iniciantes, embora você deva se sentir confortável com HTML e CSS antes de aprender Tailwind. Tailwind é uma grande habilidade para aprender, e estou ansioso para ensiná-los tudo sobre isso durante esta aula.
2. Pré-requisitos e ferramentas necessárias: Tailwind é uma estrutura CSS e, portanto, é essencial que você, pelo menos, entenda os conceitos básicos de HTML e CSS antes de fazer este curso. Se você já usou HTML e CSS no passado, seja durante o curso existente, um dos meus cursos, ou construiu qualquer projeto simples, você deve estar pronto para ir. Há muito pouco que você precisa para fazer esta aula. Se você já construiu qualquer tipo de site no passado, você provavelmente já tem essas habilidades que você vai precisar. Um editor de texto é essencial e usarei o Visual Studio Code. Você pode baixar isso, ou você pode usar qualquer outro que você preferir. Se você precisar fazer o download, o site está à direita, que é code.visualstudio.com. Está disponível gratuitamente para Mac, Windows e Linux. Se você ainda não tiver um, vá em frente e baixe isso. Um terminal também é necessário. Não se preocupe se você nunca usou um. Só precisamos de alguns comandos simples. O Visual Studio Code vem com um terminal já pré-construído, ou se você já tem um terminal autônomo que você prefere usar, isso é completamente bom também. Não há ferramentas adicionais que precisamos subscrever ou comprar. Quaisquer outras ferramentas ou software que
precisamos, vamos baixar conforme percorrermos o curso.
3. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante
não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para
processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas
soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo
pessoal e único. Você não precisa se perder
muito e se
desviar da aula
e pode até mesmo dar um passo atrás depois de
terminar a aula e voltar e fazer algumas mudanças no
projeto depois. Isso realmente lhe dará
uma boa chance de praticar o que aprendeu na aula. Lembre-se também de compartilhar
seu projeto aqui no Skillshare e só
vou dar uma olhada, mas também inspirará
outros estudantes. Para obter mais informações sobre o projeto da turma acesse a guia Projeto e Recursos, onde você pode não apenas
fazer o upload do seu projeto, mas também ver
outros projetos de classe. Com isso em mente, estou
ansioso para ver o que você cria e carrega
aqui no Skillshare.
4. Visão geral do Wireframe: Para ajudá-lo a entender melhor o que vamos construir através desta classe, criei um esboço wireframe que está disponível para você baixar. Se você quiser, pode ser útil baixar e manter ao seu lado como uma referência do que vamos construir durante esta aula. Wireframe mostra a aparência geral básica de como todo o projeto será definido. À esquerda, temos o tamanho completo, visualização de tela maior, que tem uma barra lateral à esquerda, e os detalhes do produto ao lado da direita. Em seguida, no lado direito desta imagem, temos uma pequena visualização de tela que tem o conteúdo empilhado, e também otimizado para telas menores. Tailwind também será usado para este layout responsivo, juntamente com o estilo geral também. Se você quiser usar isso como referência, você pode baixá-lo agora. Além disso, eu forneci as mesmas imagens que eu usei, e estas estão disponíveis para download com esta classe. Você pode fazer uso destes ou, se você preferir, você pode usar alguns dos seus próprios. Crie um estilo diferente de projeto. Se você quiser, vá em frente e baixe essas imagens, e também o wireframe. Em seguida, vamos dar uma olhada em como começar com este projeto e como também configurar cauda up.
5. Configuração do Tailwind: Tailwind oferece várias opções de configuração, dependendo do que usamos para construir nosso site e também quais recursos queremos oferecer suporte. Este vídeo vamos dar uma olhada em algumas das diferentes opções de configuração. Mas primeiro, precisamos criar um novo projeto. O projeto vai precisar de uma pasta de projeto e eu vou criar o meu na área de trabalho. Clique com o botão direito do mouse em “Nova pasta” e você pode colocar isso em
qualquer lugar em sua máquina que você preferir. O meu seria chamado de “Juice Bar Saudável”. Novamente, isso é opcional, você pode mudar o tema eo estilo do seu projeto, mas o meu vai ser baseado em uma barra de suco então, em seguida, diferentes tipos de smoothies. Também a partir do último vídeo que você deve ter baixado as imagens e o wireframe, você gostaria de usá-los. Eu vou para pode arrastar essas imagens para o projeto para uso posterior. Se você quiser usar o seu próprio, crie uma pasta de imagens
e, em seguida, você pode adicionar as diferentes imagens dentro daqui. O único que você não terá é esta foto minha, mas você pode baixar uma foto sua para usar neste projeto. Em seguida, abra o Editor de Texto ou o Código do Visual Studio. Arraste sobre a pasta do projeto para abrir isso. Então, como sempre estamos criando um novo site, precisamos criar um novo arquivo que é o nosso index.html. Você pode usar os atalhos Command ou Control N, que criarão uma nova página,
ou, se desejar, você pode passar o mouse sobre o título e barra lateral e usar esse ícone para criar uma nova página. Dê a isso um salvamento, e este é o index.html. Pouco antes de começarmos a escrever qualquer código se dermos uma olhada no wireframe, o que precisamos fazer é primeiro decidir o que vamos criar primeiro. Podemos ver por essas imagens que temos duas seções distintas. Temos essa área de barra lateral, e também temos essa área de conteúdo principal à direita. O mesmo com a tela menor temos a barra lateral que está no topo e, em seguida, a área de conteúdo principal logo abaixo. Temos duas seções distintas que precisamos criar. Voltar à nossa página de índice, se você estiver usando o Visual Studio Code, poderá fazer uso do comando Emmet incorporado, que é um atalho para criar nossa placa HTML. Este é HTML:5, aperte “Enter”, isso nos dará a estrutura básica que precisamos. O título do documento é Healthy Juice Bar. Como tínhamos visto antes dentro da seção do corpo temos nossas duas seções principais, e a primeira é os elementos de lado. Também ao lado disso estão a seção de conteúdo principal. Vamos começar a trabalhar dentro da seção de lado, vamos adicionar um pouco de conteúdo para trabalhar. Como você pode ver dentro da barra lateral no wireframe, temos um logotipo ou uma imagem na parte superior da barra lateral e, em seguida, o título logo abaixo. Isso é o mesmo para ambos os layouts. O lado, criar os elementos de imagem, e dentro da pasta de imagens fornecidas, temos uma imagem que é o logo.png, o texto antigo. Então, logo abaixo da nossa imagem, como acabamos de ver, criaremos um título de nível um para o título de lado. Este é o Healthy Juice Bar, ou o nome de sua escolha. Vamos abrir isto no navegador. Primeiro de tudo, salve este arquivo, e então eu vou copiar o caminho para isso, abrir o Google Chrome e, em seguida, colar isso dentro. Um olhar bastante padrão como esperado, temos a imagem e o nosso título. Agora o que vamos fazer é ir até
a documentação de Tailwind e ver como podemos configurar isso em nosso projeto. Para a instalação Tailwind, precisamos ir para “TailwindCSS.com”, e na página inicial, temos um link aqui para a documentação. A partir da documentação, a página que precisamos é este link de instalação apenas aqui. Esta página de instalação tem alguns guias diferentes sobre como
podemos configurar Tailwind usando diferentes estruturas e bibliotecas. Por exemplo, se você usar em um Vue ou React ou Gatsby, tenha alguns guias de instalação dedicados para eles. Nós vamos manter isso simples e apenas incluir Tailwind em um projeto HTML normal. Começando com a maneira mais simples que é usar um link CDN. À direita, vá até o link que está usando Tailwind via CDN. Isso vai nos dar um link folha de estilo que podemos usar para cair diretamente em nosso projeto. CDN é uma rede de distribuição de conteúdo e é uma forma de ter nosso conteúdo, no nosso caso, o arquivo CSS Tailwind, disponível em todo o mundo em vários servidores ou datacenters. Se apenas copiarmos este link e colarmos isso em uma nova guia, este é o arquivo CSS ao qual estamos vinculando. Claro, no momento parece um pouco bagunçado porque não está formatado. Vamos dar uma olhada melhor nisso no Editor de Texto muito em breve. Mas a coisa chave a observar aqui é que estamos vinculando a um arquivo CSS Tailwind, que está hospedado em um servidor externo, vez de baixar esse arquivo e incluí-lo em nosso projeto. Por enquanto, vamos copiar este link completo
da documentação e, em seguida, podemos colar isso dentro da seção principal da nossa página de índice. Dê um salvamento a isto. Agora, se formos para o nosso projeto, atualizamos o navegador, instantaneamente vemos uma pequena mudança no nosso conteúdo. Isso é bom porque agora significa que o arquivo CSS Tailwind agora entrou em vigor. A razão pela qual vemos uma mudança inicialmente é por causa de um conjunto de estilos base que Tailwind irá aplicar. Esses estilos básicos não são realmente destinados a adicionar estilo em nosso projeto, mas em vez disso, eles são um conjunto de estilos para tornar nosso site renderizado de forma mais consistente em diferentes navegadores. Se você já usou um arquivo CSS normalizado no passado, muito dele é baseado nisso. E quanto às aulas de utilidade Tailwind? Bem, estes também estão disponíveis com o link CDN também. Vamos agora dar uma olhada em alguns exemplos simples dentro daqui. Primeiro de tudo, vamos trabalhar na seção de lado e tudo o que
precisamos fazer é adicionar uma classe regular atributos. Em seguida, adicione a nossa primeira classe de utilidade que é p-4. Agora, se atualizarmos o navegador, podemos ver um valor de preenchimento de quatro, ele está sendo aplicado a esses elementos. Simples o suficiente, a próxima coisa a dar uma olhada é adicionar um fundo, e podemos fazer isso com bg, seguido pela cor que eu vou usar como cinza. Em seguida, a sombra de cinza, que é 800. Vamos dar uma olhada mais profunda em todos os tons e cores em um vídeo futuro, mas por enquanto, isso deve aplicá-lo à nossa seção lateral, dado que esta é a cor de fundo cinza escuro. A imagem, mova para baixo para os elementos da imagem e adicione nossa classe em. A imagem precisará de uma altura e uma largura. Usando Tailwind, isso é relativamente simples. Use h para altura, o valor de 32. Vamos dar uma olhada no que todos esses valores significam muito em breve. A largura, também podemos fazer com w e fazer o quadrado. Vamos manter isto como o mesmo valor. Refresque. O tamanho agora entrou em vigor. Uma vez que temos essa cor cinza de fundo escuro, também
precisamos adicionar algumas classes ao nosso H1, para fazer isso se destacar neste fundo escuro. A cor branca, podemos adicionar texto, traço, branco. Atualize, e isso instantaneamente entra em vigor. Também podemos transformar isso em maiúsculas com este utilitário. Teremos classes utilitárias disponíveis para quase qualquer tipo de propriedade CSS, que você deseja adicionar. Podemos definir a maneira da fonte e, neste caso, vamos para o nosso meio de fonte. Salvar. Eles devem ser um pouco mais ousados do que era antes. Temos muitos tamanhos e opções de texto diferentes. Para este título, eu vou para o texto para se destacar. último para o nível 1 será o rastreamento mais amplo. Isto irá adicionar algum espaço extra entre as nossas letras. Nós já podemos começar a ver adicionando alguns nomes de classe utilitário simples, podemos realmente fazer uma grande diferença para o estilo do nosso site. O link CDN, que criamos no topo, é ótimo para aprender tailwind, e será bom para a maioria deste curso, e também para alguns projetos mais simples também. Há também algumas desvantagens de usá-lo. Podemos ver alguns destes se voltarmos para a documentação Tailwind, podemos ver algumas das desvantagens aqui que temos ao usar o link CDN, como não podemos usar quaisquer diretivas como aplicar, que vamos dar uma olhada mais tarde no curso. Além disso, não podemos fazer algo chamado tremor de árvore, que é uma maneira de remover quaisquer estilos não utilizados de todas as compilações finais, significa que o tamanho do arquivo será maior. Para ajudar com isso, vamos instalar tailwind usando a CLI. Clique no link Tailwind CLI à direita. Para fazer isso, precisamos instalar node.js, e também precisamos fazer uso de alguns comandos de terminal. Isso muitas vezes pode assustar as pessoas, mas na verdade são apenas alguns passos simples que eu vou guiá-los através. Vamos começar instalando node.js, que está disponível no nodejs.org. Eu já tenho a configuração node.js no meu computador, mas se você ainda não tiver isso instalado, vá em frente e baixe a versão mais recente agora e volte uma vez que isso tenha sido feito. Uma vez feito isso, você pode abrir seu próprio terminal que você quer usar ou, no meu caso, eu vou mantê-lo simples. No Visual Studio Code, se formos para a opção de terminal, abra um novo terminal a partir daqui. Depois de abrir o terminal dentro do código do Visual Studio, ele deve abrir automaticamente dentro do diretório do projeto. Passo 1, é primeiro certificar-se de que instalamos com sucesso node.js. A maneira de fazer isso dentro do terminal, é escrever escrever o comando que é node-v. Se isso retornar um número de versão, isso significa que instalamos node.js com sucesso. A próxima coisa que precisamos fazer é executar a CLI Tailwind. Para isso, vamos voltar para os médicos. Podemos ver aqui que temos um comando, e precisamos copiar isso e adicionar isso dentro do terminal. Esta ferramenta MPX está disponível desde que acabamos de baixar node.js, que também vem empacotado com MPM nesta ferramenta MPX. Vamos pegar este comando completo. Copie isto e cole isto dentro do terminal. Aperte “Enter”. Podemos concordar em instalar no pacote Tailwind. Dê alguns momentos para preparar as coisas. Uma vez que isto termine, podemos ir para a barra lateral. Podemos ver que agora temos este arquivo tailwind.css. Este é o mesmo arquivo CSS que usamos anteriormente. Bem, eu vou ligar isso com o CDN. Agora podemos vê-lo mais claramente, uma vez que este é formatado dentro do editor. A primeira coisa que vemos no topo é o conjunto de estilos de base, que é usado para tornar nosso site de forma mais consistente em diferentes navegadores. Ele faz coisas como redefinir qualquer preenchimento e valores de margem, ele irá configurar famílias de fontes padrão, e geralmente dar uma aparência consistente para nossos elementos HTML. Mas e as classes de utilidade que acabamos de usar? Bem, vamos fazer uma busca. Um dos que usamos antes é esta cor de fundo de cinza. Vamos para o nosso arquivo CSS. Use Command ou Control F para usar o localizador. Vamos procurar o nosso LBG cinza 800. Mais abaixo o arquivo CSS ou 15.000 linhas nele, podemos ver que temos uma referência a essa classe. Isso está definindo nossa cor de fundo cinza. Logo acima, temos a sombra de 700, que é uma versão mais leve. Podemos ver, se rolarmos um pouco mais para cima, temos todas essas opções, que é da sombra cinza 50 até 900, que é a mais escura. Em seguida, temos as versões vermelhas com todos os mesmos valores de sombra. Você também vai encontrar muitas outras cores também. Se uma outra coisa que já usamos é a classe de altura, vamos fazer uma busca por h-32 e dar uma olhada para a primeira ocorrência. Para cada um desses valores, como 32 ou 28, todos
eles corresponderão a um único valor de altura, que é em gramas. No nosso caso, o H-32, que aplicamos à nossa imagem, aplicará oito aros de altura. Podemos aumentar ou diminuir esses valores para nos dar um valor de RAM diferente. Vamos ver mais uma. Nós também tivemos quatro médium apenas ouvir. Se procurarmos e pudermos ver o peso da fonte de 500 foi aplicado. Nós também temos luz extra, temos luz, normal, semi negrito, negrito, e também extra negrito também. Agora, temos nossa própria cópia do nosso arquivo Tailwind no projeto. O que precisamos fazer é substituir este link CDN. Remova isso e como nosso arquivo Tailwind está diretamente ao lado de nosso índice, podemos vincular a isso com o nome de tailwind.css. Diga isso. Atualize o navegador. Todos os nossos mesmos estilos de tailwind ainda são aplicados. Mas desta vez vamos substituir o link CDN por nossa própria versão local.
6. Configuração de servidor ativo: Constantemente adicionar coisas novas ao nosso projeto, salvar o arquivo, ir para o navegador e, em seguida, atualizar para ver quaisquer atualizações, pode ao longo do tempo se tornar realmente demorado. É por isso que eu queria mostrar-lhe rapidamente por plugin que está disponível a partir do Visual Studio Code que podemos usar para nos poupar algum tempo. Este plugin nos permitirá fazer alterações em nosso editor, clique em “Salvar” e, em seguida, um servidor ao vivo irá
manter constantemente nosso projeto atualizado dentro do navegador. Instalar isso é opcional e você não precisa configurá-lo se não quiser. Em vez disso, você pode simplesmente continuar atualizando o navegador após qualquer alteração do editor. Se você quiser instalar isso para economizar um pouco de tempo, o que você pode fazer é entrar no botão Extensões apenas aqui. Eu já tenho este plug-in configurado que você pode ver aqui. Se você não fizer isso, faça uma pesquisa na parte superior para o servidor ao vivo, e clique nesta opção, apenas aqui. Como o meu já está configurado e ativado, você pode ver o botão de desativação na parte superior. Esta é a primeira visita a este plugin. Você deve ver o botão Ativar apenas aqui. Em seguida, execute esta extensão e configure nosso projeto com o servidor live. Tudo o que precisamos fazer é clicar no botão “Go Live” na parte inferior. Isso deve então abrir isso
no navegador padrão e, em seguida, manter o controle de quaisquer alterações em nosso site. Por exemplo, se formos em frente e mudarmos nosso plano de fundo para vermelho, ele será salvo e isso será
atualizado automaticamente dentro do navegador sem a necessidade de atualizar. Vamos apenas restabelecer esta cor cinza do projeto. Esta é a sua ferramenta de estado que eu gosto de usar, e espero que você a ache útil também.
7. Mobile primeiro e a paleta de cores: Tal como acontece com muitas das estruturas modernas, Tailwind também tem o conceito de design móvel primeiro. Isso significa que começamos projetando para a exibição de tela pequena, para começar,
e, em seguida, à medida que temos mais espaço disponível na tela, podemos adicionar ou substituir qualquer um dos estilos existentes. Isso pode fazer sentido porque muito do estilo do curso permanecerá para todos os tamanhos de tela, como as cores e fontes e podemos apenas fazer algumas alterações de layout ou dimensionamento quando tivermos mais espaço disponível na tela. De volta ao arame. Olhando para a tela pequena à direita, é com
isso que vamos começar. O layout para isso realmente não precisa de muito trabalho, uma vez que muitos elementos do site tendem a fluir naturalmente dessa maneira de qualquer maneira. Já temos um logotipo no topo e também o título. Em seguida, passamos para o menu. De volta ao projeto. Uma vez que estamos lidando com a exibição de tela pequena, podemos encolher o navegador, ocupar apenas a largura mínima. O que vamos fazer é ir para a seção de lado, logo abaixo do título de nível 1. Aqui podemos criar nossos links dentro da lista não ordenada. Mas agora vamos criar nossos itens de lista. Temos seis links diferentes e estes vão ficar sem estilo por enquanto. O primeiro, novamente sem classes utilitárias para passar no link. Por enquanto, não temos páginas extras para vincular esses dois, então um href vazio está bom. O primeiro link é para produtos. O segundo item da lista, este vai ter o conteúdo dos pedidos. Número 3, este é para o inventário, e em seguida, temos os clientes. O número 5 é para a análise. O último vai ser para cupons. Salve isso e você pode até atualizar. Vou começar o servidor ao vivo. Podemos ver no topo, eu tenho seis links. Como mencionado antes, quando usamos HTML por conta própria, ele geralmente pode para muito bom para a exibição de tela pequena em termos de layout, só precisa adicionar algum estilo para torná-lo bom. Para que pareça bom, vamos precisar de alguns utilitários Tailwind. Para ver uma lista de todos os utilitários aos quais temos acesso, acesse a página inicial da Tailwind e clique no link da documentação. O Tailwind Docs é uma ótima referência para todas as classes de utilitários. Tenho usado Tailwind há algum tempo, e ainda o uso como referência. À esquerda, temos uma lista de todas as seções de utilitários que temos disponíveis, como se você quiser fazer uso da flexbox, que você será em breve, podemos usar utilitários de espaçamento, utilitários de dimensionamento, tipografia
diferente, como a fonte tamanhos, cores diferentes, a família de fontes, e também muitos efeitos e bordas diferentes que podemos adicionar. Claro, há muitas seções diferentes aqui, mas a que vamos focar é a paleta de cores. Vamos fazer uma pesquisa na parte superior para a paleta de cores. Este é o que precisamos aqui. Em seguida, role para baixo, podemos ver uma lista de todas as cores que temos disponíveis. Nós já usamos alguns desses em nosso projeto, como a cor cinza, e podemos ver que eles têm uma sombra de 50 até 900, assim como vimos dentro do CSS Tailwind. Você pode ver todas as cores diferentes que temos disponíveis para começar. Estes se adequarão a muitos casos de uso diferentes. Todas essas cores, que são as mesmas, podem ser aplicadas a muitas coisas diferentes. Primeiro, selecionamos uma cor como vermelho e a sombra de 400. Então, à direita, temos algumas aplicações para esta cor. Temos o prefixo BG, que usamos para definir a cor de fundo. Nós também temos os prefixos de texto na cor do texto, e também se queremos uma borda, podemos usar uma cor para isso também. Esta é uma boa maneira de manter as coisas consistentes em nossos projetos. Nós sempre temos acesso a todas essas cores e tons, e nós podemos então apenas usar um prefixo diferente para aplicá-lo a diferentes seções. Voltar ao projeto, vamos aplicar algumas cores aos nossos links e reduzir isso. Primeiro, vamos definir a cor do texto para cada um desses links. Precisamos saltar para o elemento a no atributo de classe. O primeiro, vamos começar com o prefixo do texto, a cor, tudo sobre a sombra. Há o nosso primeiro, e muitas vezes o que queremos
fazer com esses tipos de links é criar um estilo diferente ou um efeito diferente quando o usuário passa o mouse sobre o texto. Para isso, vou aplicar um efeito de pairar. A maneira de fazer isso é aplicar qualquer uma dessas classes de utilitários, exatamente como nós faria normalmente, mas nós adicionamos o prefixo de focagem seguido de dois-pontos. Por exemplo, se quiséssemos mudar o plano de fundo, usaríamos BG e definiríamos a cor que queremos aplicar. Eu tenho que ir para a série 700, salvar. Agora, quando passamos o mouse sobre os produtos, agora
podemos ver a mudança de cor de fundo. Também podemos adicionar o status de pairar quantos quisermos. Desde que mudamos a cor de fundo, eu também vou mudar a cor do texto também. Novamente, coloque no estado de foco seguido de dois-pontos, altere-o para ser o texto branco. Podemos tentar isso no navegador. Assim que você passar o mouse sobre isso, podemos ver uma mudança sutil na cor do texto. Feliz com isso por enquanto, que
possamos aplicar isso a todos os nossos links. Vamos apenas copiar esta seção de aula. Bem, primeiro link e coloque isso em todos os outros links. Certifique-se de que está em todos os seis. Podemos ver que isso agora se aplica dentro do navegador, bem
como este prefixo pairar. Assim como no CSS normal, também
podemos direcionar outros estados também. Em vez de passar o mouse, poderíamos mudar para outro estado, como ativo ou foco. Fazemos isso exatamente da mesma maneira. Pouco antes de passarmos para o próximo vídeo para olhar para algum espaçamento, há alguns elementos que primeiro precisamos adicionar a esta seção. Dentro do arame. Se vai olhar para os links no topo que você acabou de adicionar, ao lado do link pedidos vemos um número 5. Isto é para mostrar quantos pedidos temos atualmente disponíveis. Ele também tem este fundo círculo também. Então, após o último link, também
podemos ver este ícone de engrenagem, que é um link para as configurações. Vamos começar com o ícone de número, que vai logo após nosso link de pedidos. Coloque isso dentro e ainda dentro do nosso item de lista
e, em seguida, coloque o conteúdo como o número 5. Podemos ver isso na tela, mas isso é um pouco escuro demais, então precisamos adicionar algumas classes de utilidade. Para o texto, eu vou aplicar uma cor verde com a sombra de 900, e também uma cor de fundo verde também assim bg verde, e desta vez a sombra 100. O tamanho da fonte que podemos aplicar com traço sm, para dar-lhe o tamanho pequeno. Em seguida, para preencher a cor de fundo do verde. Vamos adicionar um valor de preenchimento, que será igual a 1,5. Estamos começando a chegar a algum lugar no navegador. Agora, se olharmos para isto, temos uma cor quadrada. Também precisaremos arredondar as bordas usando as classes utilitárias Tailwind. Nós, em primeiro lugar, temos a classe arredondada, e isso dá uma pequena borda arredondada. Também temos diferentes tamanhos arredondados. Por exemplo, podemos aplicar um arredondamento grande e isso é um pouco maior, mas também podemos fazer isso totalmente arredondado, com arredondamento completo. Isto é bom. A última coisa a fazer é colocar o ícone de engrenagem na parte inferior e isso está logo abaixo do nosso link de cupons. Além disso, verifique se isso está fora da lista não ordenada. Novamente, isso pode ser colocado dentro de um elemento span. Para o ícone de engrenagem, isso vai ser uma entidade HTML. Uma entidade HTML é uma forma de incluir um ícone em nossos projetos, e podemos aplicá-los usando determinados códigos. Se você não tem certeza sobre o uso de entidades HTML, uma pesquisa rápida do Google lhe dará muitos sites onde você pode descobrir os códigos disponíveis que você pode usar. Primeiro, o código que precisamos aplicar é o e comercial, o hash, o valor de 9881, seguido do ponto e vírgula. Se você ver agora um ícone de engrenagem na parte inferior aqui, e apenas fazer isso um pouco maior, podemos usar uma classe de utilitário Tailwind de texto e o tamanho deste texto será 2xl. Lá vamos nós. O conteúdo está agora no lugar, mas todo esse conteúdo que acabamos de adicionar, parece um pouco cheio demais. Este é o lugar onde os utilitários de espaçamento entram. Isto é o que veremos a seguir com mais detalhes.
8. Utilidades de espaçamento: Ao projetar ou construir qualquer site, espaçamento é sempre uma consideração importante, e com CSS regular temos margem e também preenchimento para ajudar a controlar isso. Como analisamos brevemente nos vídeos anteriores, a Tailwind também fornece algumas aulas úteis também. Começando com preenchimento, que é o espaçamento dentro de um elemento, podemos adicionar preenchimento para todos os quatro lados de um elemento usando P seguido de um valor. Veremos quais são esses valores em apenas um momento, mas abaixo disso, também
podemos ver que podemos aplicar preenchimento a um único site
também, seja na parte superior, direita ,
inferior ou esquerda. Como um pequeno atalho, também podemos aplicar estofamento em dois lados. Se você usou alguma coordenada no passado, você estará familiarizado com o eixo x e y. X é horizontalmente, então isso se aplica ao preenchimento à esquerda e à direita, e o eixo y adiciona o preenchimento tanto na parte superior quanto na parte inferior. A margem, isso funciona da mesma forma, mas usamos o prefixo m em vez do P. Novamente, podemos adicionar preenchimento a todos os lados ou controlá-los individualmente. Também para a esquerda e direita juntos, ou podemos agrupar a parte superior e inferior. Bem, e quanto a esses valores, como quatro? São pixels? M REM são algumas das unidades? Bem, tudo isso se relaciona com um valor REM que podemos ver no arquivo CSS. Podemos ver o que esses valores são exatamente, se entrarmos na barra lateral e, em seguida, abrir o arquivo CSS tailwind. A partir daqui, vamos procurar alguns dos nossos utilitários de espaçamento. Vamos para P-0, e vamos dar uma olhada para a primeira ocorrência. Percorra isso e o que estamos procurando é uma classe P-0 que acabamos de ver nos slides. Como esperado, isso se aplica um valor de preenchimento de zero. Depois de cada tamanho adicional temos um, temos dois, temos três, cada um destes adiciona um valor de preenchimento diferente em REM. Um quarto de REM, meio REM, três quartos e um REM é P-4. Todos eles vão abaixo dos incrementos de trimestre e eles vão todo o caminho para cima. Se deslocarmos até o último, este é o valor de 96, que se aplica ao preenchimento de 24 REM. Se você quiser saber exatamente o que qualquer um desses valores são, basta fazer uma pesquisa rápida dentro do arquivo. Na verdade, já usamos alguns desses valores de preenchimento dentro da nossa página de índice. Usamos um valor de preenchimento de quatro com os elementos de lado, e vamos em frente e adicionar um pouco mais de espaçamento neste projeto. O título, algum espaçamento na parte superior e inferior que vamos aplicar com margem y. este é um H1 e vamos colocar isso no final. Margem, o eixo y e, em seguida, o valor de quatro. Salve, e algum espaçamento agora se aplica na parte superior e inferior do nosso cabeçalho. O mesmo para cada um desses links. Esses links, nós também vamos usar um valor de preenchimento em vez de margem. Isso ocorre porque se passarmos o mouse sobre qualquer um desses links, podemos ver que temos um pequeno plano de fundo aplicado. Queremos que esse plano de fundo seja um pouco maior para cercar o texto, então vamos aplicar um valor de preenchimento de dois, p-2. Se passarmos o mouse sobre este link, podemos ver o preenchimento foi aplicado. Algumas coisas a observar aqui em primeiro lugar, o texto do produto foi empurrado para cima da esquerda. Bem, isso é bom por enquanto porque vamos mover
todo o texto para o centro desta seção muito em breve. Também muito em breve vamos aplicar algum espaço entre cada um desses links. Nós também podemos aplicar a classe utilitário arredondada para este link também. Podemos ver isso melhor se passarmos o mouse sobre e podemos ver as bordas arredondadas neste fundo. Agora, se aplicarmos isso a todos os seis links, copie o preenchimento e a classe arredondada, e adicione isso ao nosso segundo link. Só para o espaço, então deixamos isso, deixamos esse link, 4, 5 e 6. Vamos testar isto antes de seguirmos em frente. Ótima. Tudo isso está funcionando e a próxima coisa a fazer é adicionar o espaçamento vertical entre cada um desses links. Uma maneira de fazer isso é adicionar alguma margem a cada um desses links, ou mesmo mais fácil Tailwind fornece um utilitário chamado espaço entre. Temos muitos elementos filhos como este, como vários links. Nós geralmente queremos algum espaço entre cada um. Mas algumas das soluções comuns têm problemas. Por exemplo, podemos tentar adicionar alguma margem à parte inferior de cada link. Isso funciona, mas também observe a margem extra na parte inferior, o que talvez não queira. Margin top causa o mesmo problema, mas deixa o espaço extra na parte superior, o que também pode não ser desejado. E quanto a usar a margem? Por que utilitário? Bem, isso é provavelmente ainda pior porque ele também adiciona o espaço extra no início e no final, e também o espaço entre cada link é duplicado. Tailwinds utilitário de espaço resolve esses problemas adicionando apenas uma quantidade igual de espaçamento entre cada elemento. Este exemplo é espaçado verticalmente no eixo y, mas também podemos ter espaço em toda a página usando o espaço x. Em vez de usar várias classes e aplicá-las a cada um dos links, também
podemos adicionar um único espaço entre a classe e Isso vai para os pais. No nosso caso, será a lista não ordenada. Vamos localizar isso em outras listas. Apenas no topo, adicione a classe, adicione o utilitário de espaço e desde que queremos o espaço no eixo y, adicionamos espaço y e o valor que é quatro. Isso agora nos dá um espaço agradável igual entre cada um desses links. Como você pode imaginar, usaremos utilitários de espaçamento muito regularmente. Em seguida, vamos ver como podemos usar o CSS Flexbox com Tailwind.
9. Usando o CSS Flexbox: Este wireframe mostra que a grande mudança de layout ocorre com a barra lateral e o conteúdo principal. As telas pequenas geralmente são empilhadas verticalmente e a exibição de tela grande é lado a lado. Uma maneira comum de fazer isso é com o CSS Flexbox, e Tailwind também tem classes utilitárias para fazer isso também. As duas seções que vamos mudar é a seção de lado, e também construir para baixo ao lado desta é a seção principal. Podemos ver que ambas as seções são elementos filho para o corpo, então vamos aplicar a flexbox a esta seção. Vamos colocar uma aula, e isso vai conter duas classes. O primeiro é flex e o segundo é flex-col. O primeiro ou flex, isso aplicará o tipo de exibição de flex e, em seguida, flex-col. Esta é a mesma coisa que definir a direção flexível para ser coluna, que precisamos para o layout da tela pequena. Isso se aplicará ao lado na seção principal. Agora, se
salvarmos isso dentro do navegador, não vemos muita mudança no momento. Nós não vemos muita diferença, porque o conteúdo já está definido dessa maneira, mas vamos mudar isso de flex-col para flex-row em um vídeo posterior. Como mencionei no vídeo anterior, a próxima coisa a fazer para a exibição de tela pequena é colocar todo o conteúdo no centro. A maneira de fazer isso é ir para a seção de lado. Ele já tem a classe, então vamos adicionar mais alguns no final. Mais uma vez, fazendo uso do tipo de exibição de flex. Se salvarmos isso, o padrão para a flexbox é flex-row. Portanto, se formos para o navegador, podemos ver todo esse conteúdo é colocado em toda a página. Assim como acima com a seção do corpo, também
podemos inverter isso com flex-col e colocar o conteúdo como colunas. Para o centro do texto, podemos usar o centro de texto, e isso se aplicará ao nosso cabeçalho e também aos nossos links. O texto é centralizado, mas também precisamos centralizar a imagem também. Uma vez que a imagem é pai, que é o lado, está atualmente fazendo uso da flexbox. Se agora descermos para a imagem, também
podemos usar uma propriedade flex chamada self-center. Self-center é exatamente o mesmo que se tivéssemos nosso próprio arquivo CSS e definimos a imagem para ser alinhamento auto centro. Podemos ver isso se entrarmos nas ferramentas do desenvolvedor, clique com o botão direito do mouse e Inspecionar. Vamos passar o mouse sobre os elementos da imagem. Isso aplicou o valor de auto-alinhamento para ser central. Isso agora nos deixa com praticamente onde precisamos estar para
a exibição de tela pequena e também com a seção de lado. Vamos avançar mais para baixo para o conteúdo principal. Você pode ver que temos um nome de usuário, um avatar, o título Todos os produtos
e, em seguida, dois botões para trabalhar com os produtos. Flexbox também será útil para esta seção. Eu posso ir logo abaixo da seção de lado, e dar uma olhada no elemento principal. Abra isso e podemos colocar nosso novo conteúdo dentro. Para o avatar, você precisará de uma foto sua para incluir na pasta de imagens. Dentro do meu, eu tenho uma imagem chamada me.jpg. Se você não tem uma imagem pessoal para usar para o avatar, você pode usar apenas uma dessas imagens de smoothie como um suporte de lugar. Agora vamos criar a seção de avatar que será cercada em uma div. Esta div conterá a imagem do avatar. Saltando para a pasta de imagens, e a como mencionado foi me.jpg, o texto alt. Então, dentro dessas pequenas tags, vamos colocar nele o nome do usuário. Coloque isso, pressione Salvar, e há a imagem e também o texto logo abaixo. Para tornar esta seção mais parecida com um 1,2, precisamos também adicionar alguns utilitários Tailwind. Para o invólucro dentro do div, vamos colocar alguma margem no topo deste elemento ou quatro. Isso nos dará algum espaçamento no topo, e também podemos fazer uso da flexbox. Este flexbox fará com que
esses dois elementos apareçam instantaneamente em uma linha, uma vez que a direção flexível padrão é linha. Claro, a imagem também é muito grande, então podemos adicionar a classe. Podemos novamente fazer uso da largura e dos utilitários de altura dentro daqui, então a altura, o valor de oito, e também o mesmo para a largura, assim como usamos para o número de pedidos. Também podemos aplicar uma borda arredondada a esta imagem. No valor arredondado, você pode adicionar qualquer valor arredondado dentro daqui. Vou manter isto tão cheio para adicionar um círculo. Ao lado de volta ao pai, precisamos alinhar estes no centro
do conteúdo e também alinhá-los verticalmente também. Dentro da div e logo após o flex, defina o conteúdo justify para ser o centro. Isso colocará todo o conteúdo no centro da seção. Então também precisamos cuidar do alinhamento vertical. Podemos fazer isso usando items-center. Isso colocará o texto no centro da nossa imagem. Finalmente no texto, vamos apenas adicionar uma classe dentro daqui, e isso será para definir a cor do texto. Vamos para cinza-500, e também para dar algum espaço na imagem, defina a margem no eixo x para ser um valor de quatro. Bom. Descendo desta seção de avatar, vamos criar uma nova seção, que será um wrapper principal para todo o resto do conteúdo. Dentro da seção principal, e logo após a div final com um novo div elementos, e este vai ser o recipiente para todo o conteúdo, incluindo a tabela. Para manter as coisas organizadas, vamos apenas colocar um comentário rápido logo acima. Vamos dizer recipiente para todo o conteúdo principal, incluindo a tabela, e, em seguida, dentro desta div, coloque em uma nova div dentro. Isto também vai ser um contentor. Também adicionaremos um comentário na parte superior. Este contêiner será usado para alinhar o título Todos os produtos ao lado de todos os botões. O comentário vai dizer recipiente para alinhar os botões e cabeçalho. Primeiro de tudo, vamos colocar o caminho para dentro. Cabeçalho será um h2, e o texto de Todos os Produtos. Abaixo disso, uma div que irá conter os botões. O primeiro, coloque um novo elemento de botão, e este será o texto de Adicionar. Em seguida, também precisamos do ícone Plus. Mais uma vez, podemos fazer uso de uma entidade HTML. O símbolo mais, podemos usar o e comercial, o hash,
o valor de 43, um ponto e vírgula, e então isso irá adicionar este ícone mais dentro do botão. Temos este título Todos os Produtos no topo. Então esta div tem o primeiro botão de adicionar. Também ao lado disso, temos a opção de seleção. Logo após o botão, coloque em nossa seleção, e a seleção significa várias opções. A primeira opção vai ser aquela que o usuário vê pela primeira vez, e esta vai ser ações em massa. Duplicar isto. O segundo será para Editar, e o último será para Excluir um produto. Vamos dar uma chance a isso. Vemos o menu suspenso e também nosso botão Adicionar ao lado disso. Vamos agora voltar para o nosso HTML e aplicar algumas classes utilitárias para fazer isso parecer melhor. Primeiro de tudo, o wrapper de conteúdo principal, que é o que está no topo, podemos adicionar algum espaçamento à esquerda e à direita com px-2. Em seguida, também para aplicar algum espaço a esta seção de avatar, nós também podemos aplicar alguma margem para o topo. Vamos para oito. Em seguida, o wrapper div, que contém o cabeçalho e também os botões. Para pedir alguns alinhamentos a esta seção, podemos fazer uso da flexbox. Mude a direção para ser coluna flexível, e então podemos começar a alinhar nosso conteúdo, bem itens-center. Isso irá mover todo o conteúdo para o centro de sua seção quando tivermos a direção definida para coluna. Para adicionar algum espaçamento entre estes, vamos descer para o cabeçalho de nível 2 e aplicar alguma margem apenas na parte inferior do elemento com mb-4. Até a última seção e podemos começar a
trabalhar em nosso botão e também as entradas selecionadas. Primeiro de tudo, o botão, isso terá a cor do texto de cinza-100. Esta cor cinza claro não se destaca muito bem na cor de fundo branco, mas vamos mudar a cor de fundo para ser índigo, uma sombra de 500, e isso faz com que ela se destaque. Além disso, um estado de foco mudará novamente a cor de fundo para ser um tom mais claro de índigo. Vamos para 400. Bom. Também precisamos de algum preenchimento no interior deste e também para arredondar os cantos. O preenchimento à esquerda e à direita, valor 4, encolherá o texto para ser um tamanho pequeno. Então, finalmente, nas bordas arredondadas. Bom, isso parece muito melhor agora e para o seleto. Até a etiqueta de abertura. O nome e o ID realmente não importa no momento porque não estamos enviando nosso formulário para um servidor, mas vamos apenas definir o nome de massa e também o id para ser o mesmo. As classes, para combinar com o nosso botão, vamos manter o texto para ser um tamanho pequeno. Aplicar alguma margem esquerda para dar este espaçado longe do botão, um valor de preenchimento de quatro no eixo x, e então nós também vamos definir a borda para fazer isso se destacar. Para aplicar uma borda, usamos apenas a classe de utilitário de borda. Nós também podemos brincar com a cor também. Como olhamos anteriormente com os utilitários de cores, podemos usar o prefixo de borda
e, em seguida, você usa qualquer uma de nossas cores que você deseja. Vamos para cinza-300. Esta é a borda arredondada. Podemos fazer uso do estado de foco. Quando este elemento está em foco, vamos remover o contorno e, em vez disso, substituí-lo por um estado de foco, que inclui uma borda índigo com o valor de 500. Se formos para o navegador, isso está parecendo muito melhor agora. Vamos apenas começar um pequeno espaço nele para o eixo y desses elementos. Vamos fazer isso dentro da seleção. Juntamente com o preenchimento, vamos adicionar algum preenchimento no eixo y. Vamos tentar um valor de dois. Bom. Também faremos o mesmo com o botão. Isto agora parece muito melhor. Apenas para testar o foco se clicarmos no navegador
e, em seguida, usar o botão guia para percorrer todos os nossos elementos. Uma vez que chegamos a esta entrada de seleção, podemos ver o contorno de foco, que mudamos para ser a borda índigo, dando ao usuário uma indicação visual de qual elemento é selecionado. Agora estamos fazendo um bom progresso com o conteúdo e também com a exibição de tela pequena. Em seguida, vamos começar a trabalhar dentro da nossa mesa.
10. Tabelas e excesso: O wireframe para a tela pequena sobre a direita tem uma mesa na qual vamos trabalhar agora. Tabelas de dados para este tipo de produto também podem conter muitas mais colunas também. Uma vez que a largura da tela em um dispositivo pequeno é limitada, em vez de reduzir o tamanho desta tabela e tentar espremer tudo em uma tela pequena. Eu acho que a melhor coisa a fazer neste caso é permitir que o usuário deslize para a direita para ver o resto dos dados da tabela. No vídeo anterior, adicionamos este comentário no topo em torno desta div, que era o contêiner principal. Isso contém todo o conteúdo que criamos e também a tabela. O que precisamos fazer é localizar a tag de fechamento, que está logo acima da principal, e manter esta seção da tabela dentro. Para isso, crie uma nova seção e, em seguida, dentro da nossa tabela. A razão pela qual adicionamos esta seção ao redor nossa tabela é para adicionar uma classe overflow. Veremos o resultado disso em apenas um segundo se adicionarmos a classe
no utilitário de estouro traço x, traço automático. Este utilitário é o mesmo que a propriedade CSS overflow x normal. Nós definimos o valor como auto. Isso significa que se o conteúdo for muito largo para a tela, que será o caso para a nossa tabela, em vez de ocultar a tabela ou cortá-la, uma barra de rolagem será então introduzida. Dentro da tabela, adicione o nosso primeiro elemento que é t-head. Este vai ser o wrapper para todos os
nossos cabeçalhos de mesa colocar em uma classe de bg-cinza-100. Então, dentro daqui, adicionamos nossa primeira linha. Com tabelas, usamos o tr para linha da tabela. Em seguida, cada um dos títulos será cercado no th elemento. O primeiro, se você se lembra do meu grampo, é o item. O segundo, o status do item e o terceiro é para a categoria,
o nível de estoque, o preço. Então, finalmente, um botão Editar. Vamos salvar isso e ver o que acontece dentro do navegador. Vou configurar o servidor ao vivo para abrir, atualizar as alterações. Ali está a nossa mesa a atravessar a página. Como esperado, precisamos adicionar algumas classes de utilidade, fazer isso parecer muito melhor. Para os elementos th, para os títulos, coloque na classe. Primeiro de tudo, algum preenchimento no eixo x seis. Preciso de mensagens à esquerda. Também podemos tornar o texto extra pequeno ou médio para fazer isso se destacar e um pouco mais ousado. Em seguida, uma cor para o texto, que vai ser cinza 500 e transformar isso em maiúsculas. Então, no final, vamos adicionar mais uma classe de utilidade, que vai ser rastreamento mais amplo. Se você olhar de perto o item antes de salvarmos isso, clique em “Salvar”. Isso aumentará o espaçamento entre letras. Com este agora no lugar, copiaremos o atributo de classe completa e pelo menos cada um de nossos títulos de tabela. O segundo, a categoria, o estoque, o preço
e, finalmente, a seção de edição. Se você se lembrar do wireframe, a primeira célula à esquerda também tem uma caixa de seleção para selecionar todos os nossos itens. Isto vai estar dentro do primeiro título da tabela. Pouco antes do texto do item, coloque na entrada. A entrada é o tipo de caixa de seleção e também para dar algum espaço nele para o texto que está apenas ao lado. Também podemos adicionar a classe para dar-lhe alguma margem à direita e o valor de quatro. O que temos agora é um cabeçalho de mesa com duas informações. Temos as entradas e também o texto. Também precisamos fazer alguns alinhamentos, fazer isso aparecer um ao lado do outro dentro da célula. Podemos adicionar algum preenchimento e alinhamento para a seção. Eu só vou passar na aula. Vamos adicionar algum preenchimento no eixo y. O valor de quatro só nos dá um pouco mais de espaço vertical. Agora precisamos descobrir uma maneira de colocar a caixa de seleção ao lado do texto do item. Bem, podemos fazer isso alterando o cabeçalho da tabela para fazer uso da flexbox. Lembre-se, por padrão, que a flexbox tem a direção flexível da linha. Isso significa que ambos os elementos filhos serão colocados um ao lado do outro em uma fileira, deixando nossa seção de cabeça agora concluída e nossa tabela agora pronta para adicionar alguns dados no próximo vídeo.
11. Corpo da tabela e divisões: Descendo da seção da cabeça da mesa e para o corpo onde podemos ter cada linha de produtos. Você também pode adicionar quantos desses produtos quiser. Para o editor, e podemos começar a adicionar a seção. Na última seção, criamos o cabeçalho da tabela. Se localizarmos a etiqueta de fechamento para esses elementos, podemos começar a trabalhar na seção do corpo. Logo abaixo do cabeçote, adicione o tbody. Em seguida, coloque dentro de uma classe que nos dará a cor de fundo branco. Dentro da primeira linha com os elementos tr, o primeiro pedaço de dados da tabela contém três coisas. Ele contém uma caixa de seleção, então adicione as entradas com o tipo de caixa de seleção. Isto vai ficar bem abaixo deste aqui. Juntamente com a nossa caixa de seleção, vamos adicionar os elementos da imagem, e o elemento da imagem vai ser a imagem, que queremos colocar ao lado de cada smoothie. Finalmente, o elemento p, e vamos para o smoothie manga. Opa, isso está logo acima da mesa. Nós realmente precisamos cortar todo esse lugar, e colocá-los dentro de uma célula que é td, os dados da tabela. Lugar em que está. Eles agora devem resolver o nosso problema. A célula também precisa de algumas classes para torná-los alinhados corretamente,
portanto, como queremos que todos esses três itens passem pela página, podemos novamente fazer uso da flexbox
e, em seguida, também alinhá-los verticalmente usando o item-center. Alguns estofamento no eixo x, e vamos para o valor de seis, e também preenchimento y de quatro. A caixa de seleção está bem como está, e vamos descer para a imagem e saltar para a pasta de imagens. Temos uma imagem aqui dentro, que é o mango.jpg, e esta é a imagem que eu vou colocar ao lado deste item, o texto alt de manga smoothie, e também algumas classes para esses elementos. Para a nossa imagem, precisamos torná-la um pouco menor, que
possamos fazer isso com h-10 para a altura, e também o mesmo para a largura também para manter isso igual. Então, se olharmos para a nossa imagem dentro do navegador, também
precisamos de algum espaçamento em ambos os lados. Poderíamos fazer isso com a propriedade margin no eixo x e um valor de quatro. Ao lado de nossos textos, também adicionaremos algumas classes nos elementos p. Em primeiro lugar, fazemos com que o texto seja um tamanho pequeno, o peso da fonte do meio, a cor do texto de cinza 800. Mas vamos basear em também usar o utilitário de rastreamento mais amplo que olhamos antes,
e, em seguida, uma classe que não usamos até agora, que é whitespace-nowrap. Você verá, assim que salvarmos isso, o texto do smoothie das mangas aparecerá na mesma linha. Isso significa que ele interrompe a quebra de texto em uma nova linha se for muito longa para a célula real. O próximo pedaço de dados está apenas abaixo do status. Este vai ser um rótulo verde ativo. Vamos logo abaixo do nosso td, adicionar um novo pedaço de dados de tabela. Também precisamos adicionar algumas classes nesta seção. Nós não vamos espelhar as classes da primeira, porque lembre-se, isso precisava fazer uso da flexbox para alinhar todos os três itens dentro, então vamos voltar para baixo, e podemos adicionar nossas classes. Este vai ser text-left, text-small, apenas mantê-lo consistente, algum preenchimento à esquerda e à direita de seis, rastreamento mais largo, e também espaço em branco agora. Dentro da célula, adicione um elemento span com o texto de ativo. Para fazer isso parecer mais como um botão, vamos entrar nos elementos span e adicionar algumas classes. Primeiro, vamos mudar a cor do texto para ser verde, sombra de 900 e, em seguida, deslocar isso com um fundo mais claro. Isso também é verde, mas o valor de 100, um valor de preenchimento de quatro em x
e, em seguida, para y, valor de dois. Em seguida, arredondar as bordas, arredondá-lo como cheio. Isso parece bom. Além disso, se tornarmos o navegador menor do que a largura real da tabela, você notará uma barra de rolagem na parte inferior. Como mencionado, esta é a barra de rolagem para fazer todo o conteúdo entrar em jogo. Temos isso porque se formos para o início da nossa mesa. Vamos rolar para cima. Lembre-se que adicionamos um wrapper de seção em torno disso, que tem a classe de overflow-x-auto. A próxima seção, vamos ter é a categoria, então recuem. Logo abaixo do último pedaço de dados da tabela, adicione uma nova célula. A partir daqui, podemos começar a manter o estilo mais consistente. Podemos pegar as aulas dos dados da última tabela. Cole estes. Então, entre as tags, podemos adicionar o texto de smoothies. Este é um bem simples. Ele só contém o texto dentro. Agora vamos através e adicionamos a seção para este documento. Mantendo um consistente, copie os elementos td completos de cima, cole isso abaixo, e, em seguida, insira um dentro daqui uma vez que não estamos rastreando os níveis de talo para esses smoothies. O que vem a seguir? Vamos atravessar e dar uma olhada. Este é o preço baseado em um novo td elementos com as mesmas classes. Adicione um preço para o nosso smoothie. Então, finalmente, à direita logo abaixo da seção de edição, este será um botão de edição. Isso também pode fazer uso das mesmas classes para colar em um td. Mas desta vez isso também precisa de um link. Como não temos nenhuma página para vincular, podemos deixar o href vazio. Mas precisamos adicionar algumas classes para estilizar o texto das edições. Em seguida, de volta às nossas aulas, podemos começar a adicionar uma cor de textos diferentes, texto índigo 500, e também uma sombra mais escura uma vez que você usar um pairar sobre esta seção. Texto indigo, e desta vez vamos para um valor de 900. Bom. Tudo isso está funcionando, e este é o nosso primeiro item. Agora você pode ir em frente e adicionar quantos itens quiser. Temos várias imagens fornecidas na pasta de imagens. Se você quisesse praticar, você poderia digitar toda esta seção novamente, ou você poderia copiar e colar esta seção de linha completa e, em seguida, alterar os detalhes dentro. A maneira mais fácil de fazer isso, se formos para a seção do corpo da mesa que acabamos de criar. Em seguida, dentro, precisamos copiar diretamente esta linha da tabela, então copie todo o conteúdo,
a marca de linha da tabela de fechamento. Copie isto. Logo abaixo, há um novo lá dentro, e vamos passar por isso mais uma vez. Este vai ser para o smoothie de morango. Dê uma olhada. Em vez de manga, vamos mudar isto para morango. O botão ativo está bom. Isso ainda precisa passar para sua categoria. Você pode mudar o preço se quiser, mas eu vou deixar isso como está. Tudo o que precisamos fazer agora é mudar essa imagem, então role para cima. Desta vez, queremos mudar a fonte da imagem para ser o strawberry.jpg, e também alterar o texto antigo também. Nós não vamos fazer este vídeo realmente longo e passar por todas essas opções, mas agora você pode ir em frente e adicionar quantos destes como você quiser, e fazer uso das imagens dentro da pasta. Mas pouco antes de terminarmos este vídeo, também
podemos adicionar uma linha divisória entre cada um dos nossos itens. Podemos fazer isso se localizarmos a seção do corpo da tabela, que criamos no início deste vídeo ao lado do fundo, adicionar uma classe que é dividido em y. Imediatamente, quando salvamos isso, vemos que a linha está sendo colocada entre cada um desses itens. Também podemos mudar a cor desta divisão. Tudo o que precisamos fazer é usar o prefixo divide e, em seguida, adicionar qualquer cor. Vou usar cinza-200. Esta divisão é realmente útil para adicionar uma linha divisória entre cada um dos elementos filhos dentro daqui. Como você pode ver, podemos fazer uso das divisões horizontais ou verticais usando y ou x. Uma coisa útil sobre esta divisão, é que só irá adicionar uma linha entre cada um dos elementos. Não adicionaria uma linha no início ou no final, o que aconteceria se usássemos algo como um fundo de borda. Se também quiséssemos uma linha divisória entre o cabeçalho da tabela e o corpo da tabela, também
poderíamos adicionar o mesmo para classes de utilidade, mas desta vez para o elemento pai. Agora, neste caso, o pai é a tabela, então copie os dois utilitários. Os pais nossa cabeça e nossa seção do corpo é a mesa. Vou localizar isso nos atributos de classe, e então podemos colar em nossos utilitários. Em seguida, à direita, podemos agora ver este utilitário é colocado a divisão entre a cabeça e a seção do corpo. Bom, estamos chegando a algum lugar agora. Há apenas um pouco mais de conteúdo para adicionar logo abaixo desta tabela. Não podemos continuar adicionando mais produtos se você quiser. Depois, uma vez concluída, verei você no próximo vídeo.
12. Seção de paginação: A parte final do conteúdo desta visão móvel
à direita vai ser a pequena seção abaixo na parte inferior. Temos algum texto que diz quantos produtos estamos mostrando, quantos produtos temos no total, e também a seção para virar entre cada uma dessas páginas. Na exibição de tela pequena, isso é empilhado verticalmente, então temos o texto na parte superior e, em seguida, a paginação na parte inferior. Precisamos inserir esta seção na parte inferior, então se olharmos para a tag principal de fechamento e logo acima desta div final. Podemos então colocar em uma nova seção para todo esse conteúdo, começando com os elementos p, que é o texto. Vamos dizer, mostrando 10 de 108 produtos. Lembre-se, isso é completamente fictício, então você pode mudar os números. Em seguida, a lista não ordenada, nosso primeiro item de lista
e, em seguida, cada página pode ser inserida como um link. Não temos nenhuma página para vincular, então podemos manter isso vazio, e a primeira é o número 1. Vamos copiar isso e colar isso para criar quatro links diferentes. Na página número 2, página 3, e também 4. Salvar. Há todo o conteúdo lá embaixo. Lembre-se do wireframe que está à esquerda deste número 1, temos o suporte angular esquerdo
e, em seguida, à direita do número 4, temos o suporte angular direito. O que vamos fazer para inserir estes é incluir uma extensão. Vamos inserir isso dentro dos elementos da lista e logo acima do número 1. Podemos inserir isso com uma entidade HTML, usar comercial e LT, e um ponto-e-vírgula. Para dar a isso algum espaço nele para o nosso número 1, também adicione a classe, que é margin-direita, e o valor antes. Vamos até o último item da lista. Este vai atrás do nosso número 4. A extensão, a entidade desta vez é o e comercial e GT maior que, o ponto-e-vírgula. Isso também terá alguma margem. Mas desta vez, temos de o colocar à esquerda. Vamos agora começar a trabalhar no layout desta seção, e se começarmos no wrapper principal, podemos fazer uso da caixa flexível. Controle isso na exibição de tela pequena e grande. Para a tela pequena, como a maioria do conteúdo, isso será colocado como colunas. Os itens estarão no centro. Adicione algum espaçamento na parte superior e inferior no estofamento y valor de seis. Um texto será um pouco menor, então usamos Text-SM, e também um peso mais leve também. O texto logo abaixo está bom, então vamos passar para a lista não ordenada e os números precisam ser colocados em toda a página. Isso também fará uso do flexbox. A direção flexível padrão é linha, que os coloca em toda a página. Vamos adicionar algum espaço no texto acima com mt-4. Não há muito mais a fazer para esta seção, vamos apenas adicionar algum espaço nela a esses números. Vamos fazer isso dentro dos elementos A e da classe de p-2. Nós também podemos copiar isso e adicionar isso a cada um de nossos números. Bom, então apenas como um toque final para esta seção, vamos destacar isso no número 1. Isso é apenas para que o usuário saiba exatamente em qual página ele estará. Como sempre vai fazer é adicionando alguns utilitários. Primeiro, vamos mudar a cor do texto para ser cinza, um tom de 100, o fundo seria bg-indigo-500. Os efeitos de pairar também tornaremos isso uma cor índigo. Bem, assim como fizemos com o botão de edição, esta será uma sombra ligeiramente diferente. O estado de foco para este elemento, o plano de fundo, indigo-400, e correr fora das bordas com arredondado completo. Bom. Esta é a seção final que vou completar e também todo o conteúdo que precisamos para este projeto. futuro, o que vamos fazer é tornar este conteúdo mais adequado para telas maiores, e também aprender mais sobre os recursos que Tailwind tem para oferecer. Apenas algumas pequenas coisas, antes de seguirmos em frente, começando com o fundo desta seção principal, vamos localizar a tag principal de abertura, que está perto do topo do corpo. Esse é o lado e a seção principal. Lugar em uma classe, que vai ser bg-grey-200. Poderíamos mantê-lo simples assim se quiséssemos e adicionar um único tom de cinza ou qualquer outra cor. Ou, se quiséssemos, também poderíamos configurar isso como um gradiente. Gradientes estão disponíveis em CSS regular e nos permitem misturar entre duas ou mais cores diferentes. Você pode ir extremo e misturar entre duas cores opostas, mas eu vou manter as coisas agradáveis e sutis e mudar entre dois tons semelhantes. A maneira como poderíamos fazer isso, em vez da cor cinza, é definir o plano de fundo como um gradiente, seguido pela direção do gradiente. O meu vai ser to-r. Isso mudará de cor da esquerda para a direita. Se você também quisesse, você também poderia mudar isso para ser o topo, o fundo ou a esquerda, um longo caminho para combiná-los também. Por exemplo, tr seria o canto superior direito, e tl seria o canto superior esquerdo com um espaço entre. Em seguida, usamos, o para e de para definir as cores que você deseja usar. Para torná-los todos visíveis, vamos adicionar um valor vermelho e azul para começar. Vamos dizer de vermelho-200, e então vamos para um valor azul de 100. Isso agora o torna mais visível. Temos a cor vermelha, que começamos de cima para a esquerda, e então passamos para
a direção certa e transformamos isso para ser a cor azul, que vemos aqui. Mas como mencionado, eu vou manter isso um pouco mais sutil e mudar ambos para ser cinza. Mas sinta-se livre para brincar com qualquer uma dessas cores ou quaisquer outras peças de estilo em que você deseja. Seguindo em frente, também precisamos adicionar algum espaço logo acima desta tabela. Se rolarmos para baixo apenas um pouco, podemos ver que temos o recipiente que criamos anteriormente, e isso é usado para embrulhar nossos botões. Adicione algum espaçamento, podemos adicionar alguma margem
na parte inferior desta seção com um valor de seis. Para completar este vídeo, assim como fizemos com este número 1 na parte inferior, os destaques do usuário em que estamos, página 1. Também vamos destacar o link do produto na parte superior. Isso ocorre porque estamos na página de todos os produtos, então faz sentido deixar o usuário saber qual página está ativa. Coloque isso de volta no editor e role para cima o link do produto na parte superior. Então, dentro das aulas, vamos começar adicionando o plano de fundo para ser cinza-500. Isso agora permite que o usuário saiba que a página do produto está ativa. A configuração do ecrã pequeno está concluída. seguir, você aprenderá mais sobre o que Tailwind tem para oferecer, incluindo design responsivo.
13. Mudando o layout com pontos de quebra: Design responsivo não é apenas uma coisa agradável para se ter em sites modernos. É uma parte essencial do desenvolvimento. Precisamos ter certeza de que nosso design fica bem em telas pequenas, diretamente para um tamanho de desktop grande. Felizmente, já que existem milhares de tamanhos de tela diferentes por aí, não
precisamos criar um design separado para cada um desses tamanhos. O que, em vez disso, precisamos aplicar algumas regras sensatas para cobrir é para todos os tamanhos de tela. Sem CSS regular, temos acesso a consultas de mídia. Um uso comum para consultas de mídia é a seção determinados estilos para se aplicar somente a determinados tamanhos de tela. E Tailwind também tem utilitários embutidos para esses dois. Uma coisa importante a entender é que todas as classes de utilitários já
aplicamos serão aplicadas a todos os tamanhos de tela. Você pode pensar neles como estilos de base geral. Construindo em cima destes. Podemos então adicionar estilos específicos para determinados tamanhos de tela. Olhando para esta linha superior, por exemplo, tenha em
mente que todos os estilos atuais que temos estão aplicando a todos os tamanhos. Então, uma vez que um navegador atinge uma largura de 640 pixels ou acima, podemos adicionar novos estilos ou substituir os que já temos. Talvez queiramos uma fonte maior, mais espaçamento ou uma mudança completa de layout. Para que essas alterações sejam aplicadas, usamos as mesmas classes de utilitários de antes, mas com o Prefixo SM. Como estamos trabalhando com celular primeiro, esses estilos serão aplicados até telas maiores também. A menos que os substituamos novamente usando outro prefixo, como LG para telas grandes. Cada um desses tamanhos de navegador é chamado de ponto de interrupção. Uma vez que este é o ponto que podemos mudar o estilo ou o layout. Já sabemos a partir deste quadro largo como será a maior visualização de tela. Como decidimos quando mudar o layout? Bem, isso é algo que você precisa julgar por si mesmo dependendo de cada projeto, mas uma regra simples é começar com uma tela pequena e, em seguida, dimensionar o navegador para cima e fazer alterações quando o layout começa a parecer muito esticado ou quebrado. Para simplificar, vou lidar com uma única mudança de ponto de interrupção, que será no tamanho grande , como você quer. Seus layouts basicamente vão de ter conteúdo empilhado verticalmente, estamos tendo nossas duas seções principais lado a lado. Passando dessa exibição de tela pequena, vou criar um pouco mais de espaço, e se entrarmos nas ferramentas do desenvolvedor com “Clique com o botão direito do mouse” e “Inspecionar”. Se você começar a tornar o navegador grande ou pequeno dentro do DevTools, você verá no canto superior direito, podemos ver a largura dele em pixels. Atualmente, o layout parece muito bem, quando estamos em torno de 600 pixels. Se somos até 700s,
800s, tudo ainda parece bem em uma visualização de tela de tablet suave. No entanto, se começarmos a obter talvez cerca de 1.000 pixels ou acima, alguns por aqui, podemos ver, começamos a precisar de uma mudança de layout. É esse tamanho de tela grande que é 1.024 pixels, que eu vou usar para criar uma mudança de layout. Vamos fechar isto. Se entrarmos no código, em nossa página de índice, e lembrarmos que a seção do corpo no topo controla o layout de nossas duas seções principais. Este é o padrão para ambos os lados, que é esta área superior e também o conteúdo principal também. Ele controla isso usando a caixa flexível e configurá-los atualmente, para um layout de coluna se tornará mudanças para ser uma linha em telas maiores. A maneira de fazer isso é usar o prefixo de ponto de interrupção e, no meu caso, é com uma exibição de tela grande. Então tudo o que precisamos fazer é adicionar nossa classe de utilidade. Isso mudará isso para ser linha flexível e se salvarmos isso, atualizar o navegador, essas duas seções e são colocados em uma linha. Também podemos ver o ponto de interrupção ocorrer se reduzirmos o navegador para o menor tamanho. Isso fará com que isso volte ao layout do estilo da coluna. O que agora precisamos fazer é dimensionar nossas duas seções, já que isso não abrange toda a largura da página. Para dimensionar o lado, e as seções principais. Vamos fazer uso da propriedade width. Sabemos que podemos definir a largura dessas seções em rems, ou uma opção ainda melhor para essas seções é usar frações. O que precisamos fazer é primeiro localizar o lado. Em seguida, podemos definir para a visualização de tela grande, uma largura igual a 1/4. Vá para baixo. Vamos localizar a seção principal. Depois disso, também direcionando as exibições de tela grande. Isso irá preencher o 3/4 adicional de espaço. Agora 3/4 e 1/4. Vamos ao vivo dentro do navegador. Não precisamos nos refrescar. Podemos ver que isso ocupa 1/4 do espaço da tela, e este lado ocupa o valor restante. Isso também se estende se tornarmos o navegador mais amplo ou menor para estar sempre em proporção. Agora sabemos que estamos trabalhando com a tela de tamanho normal da área de trabalho. Seria melhor nesta vista se todo o conteúdo esticado verticalmente até a altura total da tela. Podemos fazer isso se formos a você uma das seções, como o lado e de volta para as aulas. Novamente, isso sempre será direcionado para a exibição de tela grande. Podemos definir a altura para ser igual à altura da tela. Isso irá definir a altura para ser 100vh, que é a altura total da viewport. Isto parece muito melhor. Agora temos uma barra lateral de altura total. Também uma vez que a seção principal é lado longo também é seguido a altura total também. Quanto à alteração principal do layout, você pode adicionar mais pontos de interrupção se quiser. Em seguida, vamos nos concentrar no conteúdo dentro dessas duas seções.
14. Estilizando tela grande: O quadro y mostra na tela grande que, na seção da barra lateral, os
links estão alinhados ao lado esquerdo. Vamos começar por aí, e depois passar pelo resto dos estilos de tela maiores. Como sabemos, esses links estão dentro da seção UL entre o conteúdo atribuído. Vamos localizar. Muita coisa em outra lista. Nós já temos o atributo de classe no lugar. Tudo o que precisamos fazer é começar com o nosso estilo de tela grande. A tela pequena, nós já temos algum espaço
no eixo y entre cada um dos nossos itens da lista. Teremos agora mais espaço disponível. Vou subir isso para ser um valor maior. Espaço y, o valor de oito. O texto será deixado alinhado como acabamos de ver no quadro y. Agora, eu tenho um pouco mais de espaço entre cada um desses itens. Também podemos adicionar um pouco de margem na parte superior e inferior. Dê-me algum espaço a partir do título deste ícone. Faremos isso com uma margem no eixo y e um valor consistente de oito. Isso é melhor, mas também precisamos alinhar o ícone de configurações também. Vamos descer para o nosso span que envolve esta seção que está abaixo na parte inferior para a lista não ordenada dentro das classes ou a tela grande apenas. Vamos definir o alinhamento de texto para ser deixado. Bom. Isso está alinhado ao lado esquerdo, mas se você olhar de perto,
isso é um pouco mais à esquerda do que o texto real. Isso também precisa de algum preenchimento para filmes em linha com o resto do link logo acima. Para isso, vamos adicionar um valor de preenchimento esquerdo de dois. Mantendo isso agora alinhado com o resto dos links acima. Acho que a barra lateral parece muito boa. Isto é tudo o que ele quer fazer para esta seção. Agora, vamos passar para o conteúdo principal do à direita. Uma vez que temos mais espaço disponível, vamos começar com algum preenchimento em torno desta seção toda. Esta seção completa é a seção principal, então vamos para os clusters aqui e alternar as telas grandes com um preenchimento de um valor de quatro. Isto parece um pouco melhor. A próxima coisa a fazer é mover o avatar para o canto superior direito. Todo o avatar do usuário e também o nome a ser no canto. Também o editor, podemos olhar para esta seção. Temos de ir para dentro da secção principal. Esta é a primeira div no topo. Não há muito a ver com esta seção porque já
temos a propriedade flex definida para esta seção. Tudo o que precisamos fazer é substituir o layout para a exibição de tela grande. Podemos fazer isso adicionando justify-end. Vamos mover isto para o canto superior direito. Este é o equivalente de certeza justify propriedade de conteúdo para ser igual a flex-end. Movendo-se para baixo, temos o título Todos os Produtos e também os botões que vou colocar um
ao lado do outro na mesma linha. Só um pouco mais para baixo. Tenha o nosso título neste contêiner para os botões. Esta é a seção de div circundante, bem aqui. Como dissemos com os comentários anteriormente, este é o recipiente para a linha, os botões e também o cabeçalho. Vamos adicionar algumas aulas aqui dentro. O prefixo grande e uma vez que já faz uso da caixa flexível e coluna flexível, tudo o que precisamos fazer é fazer isso igual a linha flex. Vamos agora colocar esses dois elementos na mesma linha. Mas se você olhar de perto, o título é um pouco maior do que deveria ser. Isso é por causa de algum preenchimento que temos na parte inferior da exibição de tela pequena. Para este lugar limpo em um override. Esta é a margem original no fundo que temos aqui. Precisamos mover isso para a exibição de tela grande, definindo isso para ser igual a zero. Salvar. Isso corrige os alinhamentos, e também agora, temos mais espaço disponível na tela. Podemos tornar o texto um pouco maior. O texto. Vamos para extra-grande. Bom. Finalmente, o espaçamento entre essas duas seções. Como também estamos usando este flexbox para esta seção, estamos colocando o valor de justify between. Praticamente tenho a parte superior onde eu queria estar. O próximo item da nossa lista é esta tabela. A mesa não está muito longe de onde precisamos que ela esteja. No entanto, seria bom ter a largura total da tela. Vamos para nossa seção de mesa, que está aqui, e Tailwind nos fornece uma classe chamada min-w-full. Torne esta a largura mínima da tela. Se você quiser, nós também poderíamos colocar isso por trás da grande consulta de mídia. Mas como sempre precisa haver a largura mínima da tela em todos os tamanhos de tela, isso parece bom na exibição de tela pequena e grande. Estamos quase lá agora. A seção final é este número de produtos e os links na parte inferior. Tudo o que eu vou fazer para esta seção é colocar ambos os itens na mesma linha. Vá para a parte inferior do projeto. Esta é a seção do invólucro. Como algumas outras seções, uma vez que ele também usa a flexbox e a direção flexível da coluna, podemos mudar isso para ser a direção flexível da linha. Vamos passar para a mesma seção, mas ainda precisamos adicionar algum espaçamento entre ambos os itens. Além disso, remova parte da margem padrão que temos no topo de nossos links. Primeiro de tudo, vamos lidar com a margem no topo da nossa lista não ordenada, que está aqui. Podemos anular isto. Para ser a margem superior zero para a visão grande, o que significa, tudo o que precisamos fazer agora é justificar o espaço para estar entre ambos os elementos. Fazemos isso no invólucro. No final, logo depois que definimos o flex-row no utilitário de tela grande de justificar entre, e isso é agora exatamente como queremos. Tudo isso agora é feito para a exibição de tela grande. Você pode ver como é fácil alterar um layout e um conteúdo com apenas algumas substituições.
15. Usando CSS customizado e diretivas: Você Tailwind aulas utilitárias nos cobriu para a maioria dos casos de uso. Isso é bastante flexível porque geralmente, uma classe de utilitário Tailwind é igual a uma propriedade CSS. E se também quiséssemos adicionar o nosso também? Isso também é completamente possível. Podemos fazer isso criando nossas próprias folhas de estilo. Para o projeto e abrir a barra lateral. Em seguida, ao lado da nossa página Índice, crie um novo arquivo. Este é o custom.css. Verifique se isso está ao lado do restante dos arquivos e pastas. Então aqui dentro podemos adicionar qualquer classe como um exemplo. Vamos chamar isso de costume que irá definir a cor para ser laranja. Este é apenas CSS normal como nós normalmente escreveríamos quando não estávamos usando Tailwind, e isso irá definir a cor do texto para ser laranja. Então, assim como um projeto HTML e CSS regular, podemos incluir isso na seção principal com um link. Basta explodir nosso arquivo CSS Tailwind, adicionar um novo link. O href é apenas o custom.css Este deve agora ser o nosso link de arquivo e podemos testar isso. Vamos para o nosso título de nível um e adicionar a classe de costume. Dê isso um salvamento e sobre o navegador. Agora podemos ver instantaneamente que esta classe laranja personalizada foi aplicada ao nosso texto. Isso funciona e, se você quiser, você pode incluir várias folhas de estilo em um projeto. Às vezes certos plug-ins ou bibliotecas têm sua própria folha de estilo que você precisa adicionar e você pode fazê-lo exatamente desta maneira. Ou se você quisesse, em vez de ter nossos arquivos separados no arquivo CSS de seu cliente,
poderíamos, em vez disso, mesclar esses estilos personalizados no arquivo Tailwind. Podemos fazer isso com um comando de terminal. Se você ainda não tiver um terminal aberto,
vá para o terminal e, em seguida, novo terminal dentro de um Visual Studio Code. Então a partir daqui, vamos aprender um comando Tailwind, que é npx tailwindcss. Lembre-se que usamos qualquer CLI de tailwind para isso. O que precisamos fazer a seguir é -i e,
em seguida, colocar nele o caminho do arquivo para duas folhas de estilo diferentes. O primeiro vai ser. /, e este é o custom.css. Isso aponta para o nosso arquivo CSS personalizado que acabamos de criar. Em seguida, usamos -o, seguido pelo caminho do arquivo para o nosso CSS Tailwind. O que isso fará, isso irá mesclar nosso arquivo personalizado
no arquivo Tailwind então pressione “Enter” e
podemos executar esse comando dentro do terminal. Localize isto. Fora para o nosso arquivo personalizado e ainda podemos ver que nossa classe personalizada está no lugar. No entanto, se formos para o nosso
arquivo tailwind.css em vez de todos os milhares de classes que tínhamos antes, tudo
isso está sendo completamente removido e substituído pelo nosso CSS personalizado. Também podemos ver isso se vamos para o navegador também, não
temos nenhum dos estilos Tailwind. Nós apenas temos nossa cor laranja personalizada para o título. Obviamente, isso não está certo. Precisamos de uma maneira de mesclar nossos estilos personalizados com as classes Tailwind originais. O que precisamos fazer é ir para o nosso arquivo CSS personalizado, e depois outro topo precisamos importar Tailwind. Para importar Tailwind temos várias diretivas Tailwind, todas as quais começam com o símbolo at. Temos @tailwind, seguido de qual parte de Tailwind queremos importar. Tailwind é organizado em diferentes seções. Lembre-se anteriormente, dissemos que Tailwind tem um conjunto de estilos base, que inclui coisas como redefinições e estilos para tornar nosso site mais consistente em diferentes navegadores. Bem, para começar, podemos importar esses estilos base com base. Depois disso, também incluiremos a mesma diretiva Tailwind, mas desta vez vamos importar os componentes. Vamos olhar para os componentes muito em breve, mas em seguida, vamos para os utilitários, a mesma diretiva Tailwind, e importar as classes de utilitários. Finalmente, podemos importar as telas. Screens é os utilitários adicionais Tailwind que começam com estes prefixos de tela. Por exemplo, se tivéssemos um prefixo começar com SM para as telas pequenas, ou LG para as telas grandes. Diretiva telas é opcional. Se deixarmos isso de fora, ele será automaticamente adicionado no final do arquivo. Nós só precisamos incluir isso se tivéssemos um caso de uso para reordenar este CSS. Agora, se voltarmos para o Terminal e executarmos esse mesmo comando, pressione “Up”, ele é inserido para executar isso e, em seguida, em nosso arquivo CSS Tailwind, e depois para baixo até a parte inferior
deste arquivo e vemos nosso CSS personalizado na parte inferior. Há apenas 800 linhas, então pensei que temos um problema aqui dentro. Como nosso estilo personalizado no final, temos as telas, estas devem ser apenas utilitários. Salve isso e como cometi um erro ortográfico, também
preciso executar novamente esse comando no terminal. Isto está feito. Vamos voltar ao nosso arquivo Tailwind. Você pode ver que temos muito mais estilos que agora estão mais alinhados com o arquivo Tailwind original. Até a parte inferior deste arquivo está nossa classe personalizada colocada no final. Isso foi adicionado na mesma ordem que você adicionou todos eles em nosso arquivo personalizado. Em seguida, de volta ao navegador e os estilos Tailwind agora foram reaplicados. Também podemos remover nosso arquivo CSS personalizado, salvá-los de volta no navegador e nossa cor laranja ainda será aplicada porque ele não está sendo mesclado com nosso CSS Tailwind. É assim que podemos criar nossas próprias folhas de estilo personalizadas e incluí-las com Tailwind. Em seguida, vamos descobrir mais diretivas, ajudar a organizar nossos estilos.
16. As diretivas @layer e @apply: Anteriormente no arquivo gerado por Tailwind. Na parte inferior, adicionamos nossa própria classe personalizada que é construída. Tudo isso funciona completamente bem e é bom para muitos casos de uso, mas estamos começando a mexer com a ordem dos grupos católicos criados pelo vento de cauda. Dentro do nosso arquivo personalizado aqui, temos todos esses grupos de vento de cauda aqui. O CSS Tailwind é gerado no [inaudível] substituí-los em e, em seguida, nossa classe personalizada está bem abaixo na parte inferior. Uma maneira de alterar a ordem
do arquivo gerado é mover nossas classes assim, que
possamos mover nosso arquivo personalizado para talvez um pouco abaixo dos estilos base. Se fôssemos salvar isso e ir para o terminal e, em seguida, executar novamente nosso comando de geração, isso irá então regenerar nosso arquivo Tailwind com base nesta nova ordem. Uma vez feito isso, se formos para o arquivo Tailwind e agora em vez de estar na parte inferior, não
vemos nosso costume. Então vamos fazer uma busca. Isso agora foi movido para a linha 603, que está logo abaixo de todos esses estilos base. Isso pode nos ajudar se precisarmos mover algum CSS, talvez para evitar quaisquer substituições ou simplesmente para colocá-lo na ordem que você deseja. Uma alternativa a isso é Tailwind também fornece uma diretiva para ajudar com isso, podemos atribuir a nossa classe personalizada para ser agrupado com qualquer uma dessas superseções. Se nossa classe personalizada foi baseada em um utilitário de um componente ou se quiséssemos apenas um estilo base para o nosso projeto, poderíamos mesclar isso em um desses grupos. A maneira de fazer isso é com a diretiva de camada, então nós criamos a camada usando o
símbolo at seguido pelo nome do grupo em que você deseja mesclá-lo. Vamos para uma base para este exemplo e, em seguida, abrir um conjunto de chaves para inserir nosso código personalizado. Podemos pegar nossa classe personalizada de antes e adicionar isso dentro de nossa camada. Isso pode conter quantas regras CSS quisermos incluir, para que
possamos continuar, adicionando classes diferentes e todas elas serão mescladas. Não, salve este arquivo e, novamente, em um terminal, regenere isso. Esse era o nosso arquivo Tailwind, este está na linha 603 com nossos estilos base. Se tentarmos alterar isso, talvez os componentes executem novamente nossos comandos de terminal. Vamos ver o que acontece depois de executarmos isto. Uma vez feito isso e de volta ao nosso arquivo Tailwind, novamente faça nossa busca por um personalizado e isso agora foi movido para baixo para a linha 637, mesclado com o resto dos componentes. Isso é útil para reorganizar nossas classes personalizadas. Outra directiva útil é aplicável e usamos esta directiva para criar os nossos próprios componentes reutilizáveis. Veja isso, vamos fazer um trabalho de limpeza. Podemos remover esta seção personalizada de antes e também em nossa página de índice, vamos dar uma olhada para nossa classe personalizada. Isso está dentro de nosso título de nível 1 e a cor laranja foi removida. Voltar a esta directiva aplicar e isso é usado para resolver um problema com o uso de Tailwind. O problema é que nosso arquivo HTML pode ficar realmente preenchido com dados e um monte de nomes de classes diferentes. Além disso, muitas vezes duplicamos as mesmas classes em vários elementos. Um exemplo disso são todos esses links na barra lateral. Vamos dar uma olhada no nosso inventário, por exemplo, e destacamos todas as classes aqui. Podemos ver que já o usamos várias vezes. Nós os usamos para os pedidos, vamos rolar para baixo, nós os usamos para as análises, para os clientes, para os cupons, temos um monte de código duplicado dentro daqui. A diretiva aplicada nos dá a chance de
retirar todas as classes HTML e criar uma configuração reutilizável como componente. A maneira de fazer isso, se copiarmos todas essas classes de um de nossos links,
copiá-los e, em seguida, passar para o nosso arquivo CSS personalizado. Podemos começar dando a isso um nome de classe de nossa escolha, então vamos para nav-link. Isso se parece um pouco com uma configuração CSS normal mas o que precisamos fazer dentro é adicionar a diretiva de aplicação. Depois disso, cole nas classes de utilitários que você deseja incluir, adicione um ponto-e-vírgula no final
e, em seguida, desça ao nosso terminal, execute novamente o mesmo comando, dê a isso alguns segundos para executar e isso deve inserir isso em nosso arquivo Tailwind. Vamos copiar nosso link de navegação para nosso arquivo Tailwind, comando ou controle arquivo de pesquisas F2, colar isso e agora ter nosso link de navegação na parte inferior. Temos o raio da fronteira, que podemos ver se entramos em nossa seção aqui. Esta é a seção arredondada, temos preenchimento, temos cores de texto, e também temos esses efeitos de focagem também. Podemos ver dentro de nosso arquivo Tailwind que esses efeitos de pairar foram gerados como nosso preenchimento, como nossas cores, e também a cor para o efeito de pairar também. Agora o que podemos fazer é ir para nossa página de índice e em vez de
ter todas essas classes inseridas, podemos então usar nossa classe personalizada, que acabamos de criar, que foi nav-link, e então podemos usar isso no lugar de todos os o resto das classes logo acima. As análises, os clientes, o inventário, as encomendas. Tenha cuidado para não adicionar isso aos elementos de span e nós temos os produtos. Eu acho que isso é todas as seções que precisamos substituir e agora se nós salvarmos isso e voltar para o projeto, certifique-se de que o navegador é recarregado e todas as mesmas classes ainda se aplicam. Podemos confirmar isso se removermos o nav-link de qualquer um desses elementos e isso agora removeu o CSS. Vamos apenas restabelecer isso e para reorganizar isso, nós também podemos adicionar isso ao grupo de componentes, cercando-o na diretiva de camada. Assim como olhamos antes, vá para o nosso arquivo personalizado e, em seguida, coloque o
nosso lugar , nossa seção de antes, adicione a diretiva de camada, e vamos colocar isso dentro de nossos componentes, veja a chaves e, em seguida, podemos colar a seção completa de antes de volta para dentro. Para o terminal, execute o comando rebelde. Vamos testar isso no navegador, atualizar. Não devemos ver nenhuma alteração porque tudo o que fizemos foi mover isso para a seção de componentes do arquivo CSS Tailwind.
17. Utilidades de leitor de tela: Bem-vinda de volta. Este vídeo vai dar uma olhada em alguns utilitários úteis de leitura de tela. Atualmente, estou dentro da documentação Tailwind e na seção de leitores de tela, que você também pode encontrar em Acessibilidade. Os leitores de tela são importantes para a acessibilidade e lêem todo o conteúdo da nossa página web, usuários com deficiência visual. Então, se um usuário é deficiente visual e eles não podem ver nosso site como pretendido, eles podem usar um leitor de tela para ler o conteúdo. Temos duas classes de utilitário leitor de tela que Tailwind fornece. O primeiro é apenas SR, e SR apenas elemento aumentado de vista. Mas ele ainda se mantém no lugar para permitir que um leitor de tela leia o conteúdo. Podemos então usar Not SR somente e este irá basicamente desfazer o que acabamos de ocultar e reintegrado de volta dentro do navegador. Então, no projeto, vamos dar uma olhada em como fazer isso dentro da tabela, encaracolado dentro de nossas linhas, temos este botão Editar no final. Então, talvez também não precise deste título Editar na parte superior. Isso ocorre porque, para um usuário não deficiente visual, esses botões Editar provavelmente são suficientes para lhes dizer o que fazer. O que podemos fazer é esconder este cabeçalho no topo, mas ainda permitir que um leitor de tela leia, se necessário. Vamos fazer isso localizando nossa mesa. Vá até a seção necessária e dentro da cabeça da tabela, precisamos ir para o final desta seção para encontrar nosso texto Editar apenas aqui. Dentro dos clusters, podemos usar a classe somente de trava SR. Salve este e este título agora está sendo oculto do modo de exibição, mas ele ainda será lido pelos leitores de tela. Lembre-se que também temos a Classe 2 não somente SR, que irá desfazer isso. Isso também pode ser usado para mostrar e ocultar conteúdo em diferentes tamanhos de tela, mas não precisamos disso para nosso caso de uso. Isso é apenas uma pequena mudança, mas pode ser muito útil em seu site, se tivermos uma seção que precisamos esconder, ainda
manteremos no lugar para leitores de tela.
18. Implementação: Assim que terminarmos nossos sites e estivermos satisfeitos com o conteúdo, podemos implantar o site usando um serviço como o Netlify. Se você quiser, você pode fazer mais alterações e personalizações neste projeto. Primeiro, vou deixar como está. Netlify torna muito fácil fazer nossos projetos entrarem em direto na web. Para usá-lo, vá para netlify.com, ele é gratuito para usá-lo. Se você não o usou antes, você precisará ir em frente e criar uma nova conta gratuita com este link de inscrição na parte superior. Depois de fazer login, você será levado para uma área de administração, que deve ser exatamente assim. Se você tiver algum site atual que usamos no passado, isso estará disponível a partir deste link sobre o topo. Para adicionar um novo site ao Netlify, temos algumas opções diferentes. Se você estiver usando o GitHub, você pode usar este botão
na parte superior e vinculá-lo ao seu repositório. Isso tem o benefício de ele será
atualizado automaticamente cada vez que empurrar quaisquer alterações para esse repositório. Ou uma maneira muito simples se você não tem uma configuração de repositório é simplesmente arrastar sobre a nossa pasta de projeto. Isso irá em frente e construir nossos sites e, em seguida, nos dará um link no topo, que podemos clicar para abrir dentro de uma nova guia. Abre. Isso nos dará um link de site ao vivo que podemos compartilhar com amigos e familiares. Você pode ver como é rápido e fácil implantar seu site usando o Netlify. Também podemos modificar este URL. Se entrarmos nas configurações de domínio, clique em “Opções”,
podemos editar o nome do nosso site, digamos Meu super projeto, e então podemos salvar isso. Agora podemos clicar sobre isso, abrir isso em uma nova guia. Isso também apontará para o nosso projeto. Se você queria fazer um domínio personalizado para que não tenhamos o aplicativo Netlify no final, você também pode seguir as etapas para fazer isso com o botão Adicionar domínio personalizado. É isso. É assim que é fácil implantar um site estático usando o Netlify.