React encontra CSS Tailwind | Implemente o modo escuro no React

1. Introdução ao curso: Bem-vindo a este curso em que falaremos sobre como você pode usar o Tailwind CSS com o aplicativo react Meu nome é Fesel e estou entusiasmado em guiá-lo na poderosa jornada de combinação de CSS react e tailwind Como desenvolvedor web e instrutor, sou apaixonado por ajudar alunos como você a criar aplicativos limpos, eficientes e visualmente impressionantes No cenário atual de desenvolvimento web acelerado, criar designs modernos responsivos sem comprometer o desempenho é essencial Tailwind CSS, com sua primeira abordagem utilitária é um divisor de águas Combine-o com os recursos dinâmicos do Reacts e você terá o kit de ferramentas perfeito para criar um aplicativo web de nível de produção Agora, aqui está um vislumbre do que abordaremos neste curso específico Então, você começará com a introdução ao Tailwind CSS. analisaremos seu utilitário, primeiro o sistema de estilo e, em seguida, orientaremos você na configuração um formulário HTML simples que fará uso do CSS tailwind Em seguida, exploraremos o design responsivo e os temas no react, e nosso aplicativo aproveitará os ventos favoráveis a flexibilidade para criar layouts que ficam ótimos E para destacar nosso projeto de curso, você criará uma opção de modo escuro totalmente funcional no react E isso ajudará você a aprimorar a experiência do usuário e a estética de qualquer aplicativo que você criar no futuro. Ao final deste curso, você terá uma sólida compreensão de como integrar Tailwind CSS com o react para criar aplicativos web elegantes e responsivos Agora, você aprenderá não apenas como, mas também o porquê, garantindo que possa aplicar essas habilidades em projetos do mundo real. Agora, para quem é esse curso? Portanto, se você é um iniciante, ansioso por explorar um design web moderno ou um desenvolvedor do React que deseja otimizar seu fluxo de trabalho , este curso tem algo valioso para todos E quando digo todos, quero dizer desenvolvedores de todos os níveis. Portanto, se você é um desenvolvedor iniciante, intermediário ou avançado, este curso pode ser perfeito para você, já que você deseja explorar como modernizar seu aplicativo web Então, você está pronto para dominar a arte de criar belos aplicativos de reação com o Tailwind CSS? Eu sou. Vamos mergulhar e criar algo incrível juntos. Nos vemos dentro do curso. 2. Liberando o poder do Tailwind CSS: um guia para iniciantes: Então, agora é hora de começarmos a falar sobre o Tailwind CSS Agora, o que é Tailwind CSS? Tudo bem? Então, eu solicitaria a todos vocês que acessassem o Google Tailwind, e vocês verão este site Tailwind CSS Está bem? Agora, o Tailwind CSS é um utilitário para a estrutura CSS que permite criar designs personalizados muito rapidamente aplicando classes Está bem? Agora, se você está familiarizado com HTML, você deve estar ciente de que os elementos HTML estão aqui. Você pode ver alguns elementos HTML, ok, Image TV. Todos eles têm atributos, ok e um dos atributos é a classe, ok? Então, 1 segundo aqui. OK. Agora, o que acontece é que se você quiser aplicar qualquer tipo de CSS, o que você faria seria mencionar a classe e, em seguida, basicamente adicionar o CSS no arquivo CSS, e esse CSS será para essa classe específica. É assim que vai funcionar, certo? Portanto, você precisa escrever CSS e garantir que os nomes das classes correspondam. Mas com o tailwind, o que acontece é que, se você configura essa estrutura específica , precisa apenas usar as classes e não precisa realmente escrever nenhum tipo de CSS Então, deixe-me mostrar o que quero dizer. Então, se você for aos documentos aqui, ok, digamos que, se você for para o modo escuro, você pode ver aqui Ok, como você pode implementar o modo escuro usando o vento de cauda? Então você pode ver aqui, você pode simplesmente usar o BGite. BGIWhite significa fundo branco. Ok, BG slate 800 escuro. Então, basicamente, dependendo das aulas, o que vai acontecer é que tudo será aplicado. Então, vou dar alguns exemplos como exibição aqui, tamanho da caixa, ok Contêiner. Portanto, se você estiver criando um contêiner, poderá especificar SM, que é pequeno, médio, grande e extra grande para o Excel. Você pode fazer uso disso. Está bem? Você pode dizer PX, quatro aqui. Ok, então essas são todas as classes, basicamente que você usa em cada aula tem um significado. E com base nisso, o CSS é gerado automaticamente. Agora, um exemplo simples é o preenchimento. Está bem? Se você quiser adicionar preenchimento, você dirá P zero, então isso será adicionado Acolchoamento de zero pixel. Se você disser PX zero, o preenchimento à esquerda será adicionado e preenchimento à direita será adicionado de zero pixel P zero significa preenchimento superior e inferior. PS significa preenchimento no início da linha. Então, você precisa apenas usar essa classe e essas propriedades serão adicionadas automaticamente. É assim que funciona. Existem vários exemplos e os revise, e pode parecer: Oh, eu tenho que me lembrar de tudo isso, mas não é tão difícil. Ao começar a usá-lo, você logo entenderá isso e começará basicamente a memorizar e lembrar os nomes das classes É assim que as coisas funcionam. Está bem? Então, você pode ver aqui, esses são os exemplos que preenchem os seis primeiros Então, o preenchimento é adicionado. Preenchimento à direita quatro, então o preenchimento é adicionado Então, funciona dessa maneira. E tem tipo, você pode ler essa documentação aqui, ok? E há muitas imagens em que você pode ver o anexo de fundo, clipe de fundo e a cor do plano de fundo. Há muitos exemplos e coisas que foram mencionadas aqui. Então você pode simplesmente dar uma olhada. Está bem? Então, isso é incrível. Ok, porque você não precisa escrever nenhum tipo de CSS. Você apenas faz uso de algo pré-construído e feito para você, ok? Então isso é vento de cauda. Eu encorajaria todos vocês a acessarem este site e darem uma olhada nele. Está bem? Agora, lembre-se de que este site está sempre mudando. Eles podem mudar a interface do usuário ou algo assim. Então, dependendo de quando você está assistindo esse vídeo, você pode ver uma interface diferente, mas não se preocupe, ok? Ainda assim, não vai mudar isso drasticamente, ok? O conceito e o ponto crucial ainda serão os mesmos. OK. Então, basta explorar isso. Também há alguns exemplos aqui na página inicial. Você pode ver alguns exemplos, ok, de cores. Ok, exemplo para tipografia. Ok, você pode ver sombras. OK. Então, sim, é isso. Você pode ver brincalhão, elegante. OK. Você pode ver como você pode ser divertido Você pode ver que todo esse CSS está sendo os nomes das classes, você pode ver os nomes das classes, quais nomes de todas as classes estão sendo usados. Você só precisa mencionar o nome da classe. Você pode ver uma aparência elegante, aparência brutalista. Ok, símbolo brincalhão. Então, todos os tipos de designs são possíveis, é o que esses exemplos demonstram aqui. Responsivo também é possível. OK. Você pode ver SM, MD, LG. Então, isso ocorre em dispositivos pequenos, dispositivos de tamanho médio e dispositivos de grande escala. OK. Assim, você pode especificar as classes dessa forma. Ok, você pode ver aqui. É assim que isso é criado. Você pode ver. OK. Então, sim, é isso. Você pode ver os exemplos. Existem alguns exemplos. OK. Adoro navegar e ver esses exemplos. Eles são tão elegantes. OK. Então, basta examiná-los. Você entenderá a importância de por que isso é incrível, ok? E como as coisas podem mudar se você começar a usar o tail went, ok? 3. Do zero: criando seu primeiro projeto HTML com CSS Tailwind: Então, agora é hora de brincar um pouco com o CSS de ventilação traseira Então, o que eu vou fazer é estar aqui no Visual Studio Code. Também tenho meu navegador aberto lado a lado. OK. O que eu vou fazer é criar um novo arquivo, ok? Selecione um idioma, é claro, HTML. Criaremos um arquivo HTML simples. Ok, eu tenho um plugue dentro dele que pode me ajudar a gerar algum código padronizado OK. E vou manter muitas coisas simples. Vou dizer olá. O título é olá desta página da web em particular Vou diminuir um pouco o zoom para que você possa ver qual código está sendo gerado. Está bem? Você pode ver esse código. É um iniciador padronizado para HTML. Está bem? Agora, vamos usar o vento de cauda aqui. Então eu vou vir aqui. OK. E eu vou rolar para cima. Vamos ver a documentação. Ok, e vamos ver como você pode fazer uso disso. Está bem? Então, essa é toda a parte da instalação, ok? Esta é a instalação do Tailwind CLI. Vamos fazer uso da CDN. OK. Então, aqui, você pode ver como o vento de cauda pode ser usado. Está bem? Assim, podemos fazer uso de plug-ins de terceiros. Está bem? Existem alguns exemplos em que o vento de cauda pode ser usado Está bem? Então, o que eu vou fazer é copiar esse código. Está bem? Eu vou dizer roteiro. Vou pegar o elemento do script. Venha aqui. Vou adicionar um script no cabeçalho. Está bem? Isso está feito. Opa, eu acidentalmente pressiono O arquivo não foi salvo. Tudo bem, mas vou copiar isso também. Eu virei até aqui. OK. E aqui no corpo, eu vou colar isso, ok? Então, sim, estamos fazendo uso de, você sabe, algumas aulas por aqui. Está bem? Você pode ver algumas aulas. Agora, uma coisa que eu gostaria de mencionar : suas aulas foram adicionadas. Ok, deixe-me primeiro salvar o arquivo. Vou salvar esse arquivo no desktop, ok? Vou salvar o arquivo no meu espaço de trabalho onde estou criando este projeto para simplificar as coisas Então, o que eu fiz foi navegar até a pasta onde esse arquivo foi criado, no meu sistema local, e eu apenas cliquei duas vezes nele para abri-lo no E você pode ver, sem escrever nenhum tipo de CSS, apenas usando, você sabe, o texto três do Excel. Posso dizer texto quatro em Excel, salve isso e o tamanho será um pouco maior. Você pode ver, ok, o texto sete do Excel. Deve ser uma classe válida, o, e você pode ver como isso está mudando. Fonte em negrito. Você também pode usar semi negrito, semi negrito aqui Ok, algo parecido com isso. Ok, eu vou basicamente fazer o que você adicionar aqui, ok, essa escolha será retirada. OK. E você pode ver que o sublinhado também está sendo adicionado Você também pode adicionar itálico, o que quiser, a qualquer tipo de formatação de texto Está bem? Você pode dar uma olhada aqui. E com o tempo, não é sobre, você sabe, simplesmente não é sobre essa coisa. Simplesmente não se trata de aulas, mas de relembrar aulas. Com o tempo, você aprenderá coisas e também começará a memorizar os nomes das classes Está bem? Você pode ver o estilo da fonte. Há tantos itálicos. Se eu adicionar itálico, ele será convertido em itálico. Você pode ver aqui. Se eu adicionar itálico. Opa. Então, eu quero continuar sublinhado, vou ver itálico fresco Você pode ver Ok. Então essa é a magia do vento de cauda, ok? Vamos também criar um pouco. Tipo, eu vou me livrar disso. Está bem? Vou comentar isso e podemos adicionar mais um tipo de interface de usuário. OK. O que vou fazer é apenas, você sabe, expandir esse Opt. OK. Vamos em tela cheia. Está bem? E o que eu vou fazer é salvar isso. Você pode basicamente criar uma interface de usuário um pouco melhor também, e eu quero te mostrar isso. Resumindo, o que vou fazer é dizer aula aqui, vou dizer BG iPhenGray e vou dizer 100 Vou dizer flex, vou dizer Justify center. Eu vou dizer centro de itens. Basicamente, estou trazendo tudo para o centro da tela horizontal aqui. Vou guardar isso. OK. Agora, se você salvar isso e ver a saída, opa, se você ver a saída aqui, deixe-me mostrar a saída Portanto, não há saída porque não adicionamos nada dentro do corpo. OK. Então, deixe-me fazer isso e veremos como será a saída. Então, o que vou fazer é adicionar uma classe div aqui, Div, desculpe, não um elemento Divlas Div OK. E deixe-me aplicar algumas aulas, como aulas de lixo eletrônico Então eu vou ver PG de branco aqui. Ok, preenchimento de oito, arredondado. Ok, LG. Isso é para o raio da garrafa, sombra de Okay. Você pode ver o LG arredondado. Se você quiser conhecer alguma das aulas, pode fazer essas aulas. Você pode vir aqui, você pode procurá-los. OK. Você pode ver o raio da borda. Você pode ver. OK. Então LG arredondado, médio arredondado, ok, arredondado. E isso é arredondado por completo. Portanto, dependendo da classe que você usa, você obterá a saída correspondente. Agora, dentro disso, o que eu posso fazer é se você salvar isso, deixe-me salvar isso aqui. Eu guardo isso. Ok, e eu vou atualizar isso Você pode ver isso chegando aqui, esse tipo de mancha branca. Agora, deixe-me expandir isso e terminar o que estou tentando fazer. Vou adicionar um H aqui. Vou dizer olá. OK. E eu vou dizer tailwind, CSS, algo assim Estou apenas adicionando uma mensagem de olá e você deve ver o resultado. OK. Então, se eu fizer uma atualização, você poderá ver Hello, tailwind, CSS Eu posso até embelezar esse H, então eu posso dizer aula aqui OK. Deixe-me dizer uma mensagem de texto. Vou aumentar o tamanho do telefone, então vou dizer para o Excel, fonte em negrito e vou dizer texto. Eu quero cinza, ok, e cinza de 800. OK. Sim, vamos ver como é. Então, ociosamente, deve parecer muito melhor. Você pode ver. Certo? Então, Hello Tailwind CSS é o que você está vendo como saída A. Você pode até mesmo adicionar uma tag P. Você pode simplesmente continuar construindo sobre isso. Isso é absolutamente incrível. Uma etiqueta aqui. Você pode dizer, aqui você pode adicionar qualquer tipo de mensagem. Isso é subtexto Este é um exemplo simples usando o CSS tailwind aqui. E vou adicionar algumas aulas. OK. Então, vou dizer texto de classe de dois para o Excel, fonte em negrito aqui. Ou não, eu não deveria ter que usar Excel aqui, porque isso é um subtexto, então vou ter apenas texto, Cree e , em vez de 800, vou alimentá-lo um pouco Eu vou dizer 600, um lençol mais leve. Deixe-me atualizar. Você pode ver. Hello tailwind CSS é um exemplo simples usando o CSS tailwind Como isso parece? Você sabe? Você literalmente não escreveu nenhum tipo de CSS aqui. Sem CSS. Você acabou de adicionar essa tag de script e está apenas usando classes e, apenas fazendo uso de classes, está vendo essa saída incrível. Está bem? É tão lindo. Ok, você não precisa se concentrar em escrever CSS, você só precisa se concentrar em usar as classes certas, e é isso que o tailwind é para você E com o tempo, vou te dizer, pode parecer um pouco difícil agora, mas com o tempo, mas com o tempo, fica super fácil e você começa a se lembrar das aulas Por exemplo, essas são as classes para cantos arredondados, então você se lembra se as usar duas, três vezes, sabe? Pode ver arredondado completo, arredondado nenhum. Está bem? Existem diferentes exemplos arredondados em R, LG, você pode ver. Você pode ver como ele é aplicado. Há muitos exemplos, e a documentação também é muito boa. Está bem? Então, espero que você esteja gostando disso e espero que ame esse exemplo e as possibilidades que você pode fazer com essa estrutura incrível. 4. React encontra o vento da costa: configurando seu primeiro projeto como um profissional: Então, agora é hora de começarmos a falar sobre como você pode configurar seu projeto de reação com o tailwind Então, o que vou fazer aqui é usar o código do Visual Studio e entrar no diretório raiz da pasta em que estou criando todos os projetos. Está bem? Agora, dentro desse diretório raiz, podemos criar mais um projeto que eu já tenho . React Tailwind Portanto, este é um comando que você pode usar para criar um novo projeto de reação usando at. Portanto, você pode dizer que o NPM cria trigo no máximo. E isso fará algumas perguntas se você deseja ter qual estrutura deseja usar ou qual modelo deseja usar. Todas essas perguntas, como você tem que selecionar react, vanilla Gs e tudo mais. E, dependendo de suas preferências, ele criará um projeto para você. Eu já fiz essa etapa, então não vou fazer isso de novo, mas o que vou fazer é criar esse projeto chamado React Tailwind Vou passar para este projeto, o e depois vou executar o servidor. Então, eu vou dizer que o NPM run tab está aqui. Ok. No momento em que eu executar isso, você verá esta página padrão aqui. Está bem? Agora, esse projeto foi criado, mas não há nenhuma configuração de vento de cauda feita aqui Agora, para fazer a configuração do tailwind, você precisa realmente adicionar ou adicionar alguns arquivos de configuração ou devo dizer apenas um arquivo de configuração E vou mostrar a importância desse arquivo e também como você pode criá-lo. Então, agora aqui no tailwind css.com, se você começar, você será levado para esses estoques, e você verá aqui, como você pode instalar o tailwind, como você pode instalar o tailwind Assim, você pode instalar o tailwind dessa maneira. Ok, você pode dizer NPM install hyphen D tailwind CSS. Portanto, isso garantirá que a dependência seja adicionada ao seu projeto Em seguida, você também precisa inicializar o tailwind em seu projeto, que significa que você precisa executar este comando NPH tailwind Css nele, e isso gerará esse arquivo tailwind config dot gs, que é como um arquivo que é como Então, isso é algo que precisamos fazer. Está bem? O que vou fazer é copiar os comandos um por um. Eu virei aqui e criarei um novo conjunto de terminais. Ok. Mais uma coisa que quero mencionar é que esse é o conteúdo do arquivo de configuração do tailwind. Está bem? Você pode ver que isso é o que parece, ok? Você pode estender seu tema, o tema padrão do tailwind Se você quiser adicionar qualquer tipo de cor personalizada ou qualquer tipo de definição que seja válida para seu aplicativo, você pode defini-las aqui. Os plugins que você pode mencionar, ok? E então você precisa adicionar esse trecho de código ao arquivo CSS principal ou ao arquivo CSS raiz do seu projeto, para que o vento favorável seja captado pelo seu projeto Está bem? Então, essas são algumas das etapas que foram fornecidas e é assim que você pode verificar se o vento de cauda está configurado corretamente Está bem? Agora, junto com o tailwind , ok, antes de instalar o tailwind, quero dizer que há algumas coisas que também precisamos instalar Então isso é só para instalar o Tailwind, ok? Agora, você verá guias aqui. Usando o post CSS. Está bem? Então, vamos seguir essa abordagem. Está bem? Então, instalaremos o tailwind e também configuraremos o pós-CSS Agora, tailwind, é claro, sabemos que é como uma estrutura de força utilitária para CSS, ok? Agora, o que é pós-CSS, ok? Portanto, o post CSS é uma ferramenta para transformar CSS com o plugin Ja Script Ok, então ele basicamente faz o trabalho de processar seu CSS e aplicar transformações, como modificação, adição de suporte para recursos futuros de CSS, versões de CSS e assim por diante Está bem? Isso é o que ele vai fazer, e então também vamos usar o prefixador automático que você pode ver aqui Portanto, esse comando diz: Instale o hífen D, o tailwind CSS, o post CSS e o prefixador automático Portanto, o Autoprefixor é um plugin que adiciona automaticamente qualquer tipo de prefixo específico do navegador Por exemplo, alguns navegadores precisam que o hífen webkit seja adicionado, ok E adicionar hífen webkit nesse navegador específico garantirá Navegadores Mozilla Firefox, Mozilla Firefox. Eles querem que o hífen moose seja adicionado. Sempre que necessário, certo? E isso é basicamente para ter uma melhor compatibilidade com o navegador. Os aplicativos podem ter melhor compatibilidade. Então, tudo isso é adicionado automaticamente, você não precisa adicionar isso manualmente. Está bem? E isso torna seu CSS muito mais compatível e pronto para produção. Está bem? Então, eu recomendo adicionar essas duas coisas, ok. E eu gostaria que fosse assim que configuraríamos o tailwind com react Está bem? Então, vou seguir essa abordagem. Vou apenas copiar esses comandos. Eu virei aqui, ok? E eu vou dizer CD. React tailwind, vou navegar até o diretório do projeto. Vou passar esse comando e pressionar Ender Está bem? Agora, isso vai funcionar. Ok, você pode ver que adicionou pacotes. E se você for até os pacotes, você vai ver aqui. Você pode ver a reação. Vou simplesmente reduzir isso e minimizar isso para que haja uma visão melhor. Agora, aqui, não estou fechando a linha de comando porque vamos precisar dela, mas você pode ver aqui o tailwind post CSS e você também terá o AutoPrefixor Ok, isso está feito. Tudo bem? Agora, os pacotes foram adicionados, que significa que existem dependências. Está bem? Então, agora precisamos fazer as próximas etapas como inicializar o vento de cauda, ok E também precisamos inicializar o post CSS. Então isso é algo que eu também vou fazer. Ok. E isso vai criar um arquivo de inicialização como esse, ok? E então, esses são os conteúdos aqui. Então, isso é pós-configuração CSS JS, você pode ver, e esta é a configuração tailwind Está bem? E então adicionaremos isso ao nosso CSS raiz. Isso é o que vamos fazer. E depois vamos testar as coisas, ok? O que eu vou fazer é vir aqui. Assim, você pode criar manualmente post css conflict dot gs. Você pode ver aqui. Você pode criar isso manualmente ou o que vou fazer é gerar isso automaticamente. Portanto, há um comando que precisamos saber. Então eu vou dizer N PX, tail wind CSS. Nele, opa, hífen P. Ok? No momento, se você abrir a estrutura do projeto, não há nenhum arquivo de conflito de vento lateral definido Deixe-me executar isso e ver o que é adicionado Assim, você pode ver que a configuração do tailwind foi adicionada e a configuração posterior do CSS Está bem? Você também pode ver aqui a saída. configuração tailwind criado e arquivo de configuração pós-CSS criado Então esse é um comando NP x, tailwind CSS nele, hífen tailwind CSS nele, hífen P. Ok? Então, se você abrir esses arquivos, você pode ver que isso é pós-CSS, ok? E este é o arquivo para configuração do tailwind. Você pode ver os dois arquivos, ok? E o post CSS está aqui, basicamente. Portanto, isso também está usando o vento de cauda e o prefixador automático E este é o arquivo de configuração do tailwind. Agora, se você ainda está confuso sobre o motivo pelo qual adicionamos o post CSS em primeiro lugar, ok, eu gostaria de reiterar que o post CSS é uma ferramenta que permite que você aproveite os plug-ins existentes Está bem? Então, como o nome diz, post CSS. Então, basicamente, ele faz o trabalho de pós-processamento do CSS, ok? Como melhorá-lo para compatibilidade específica do navegador e tudo mais. Então, basicamente, se você quiser adicionar plug-ins ao seu aplicativo, precisará usar o pós-CSS. Você pode ver aqui no post CSS config, adicionamos o Tailwind CSS, configuramos o Tailwind CSS e também dizemos que ele usa o autoprefixor e também dizemos que ele usa Ok. Prefixador automático: o que ele faz é adicionar tags CSS específicas do navegador ao seu CSS Está bem? Isso é o que ele vai fazer. Está bem? Então, sim, isso é o que fizemos, e todas as dependências foram adicionadas aqui Ok. Portanto, o post CSS é apenas uma ferramenta que permite aproveitar os plug-ins existentes. Isso é o que é. Então você não pode adicionar autoprefixor sem usar o post CSS Então isso é algo que estamos fazendo aqui. Está bem? E espero que isso esteja fazendo sentido agora quanto ao motivo pelo qual estamos fazendo o que estamos fazendo. Então, essa é apenas uma configuração que você precisa fazer e, mais tarde, não vamos tocar nisso, ok? Então, mas você precisa saber por que estamos fazendo. Está bem? Então isso é importante. Agora, essas são coisas que você precisa adicionar aqui. Está bem? Portanto, você precisa ter certeza de que todas as partes em todos os arquivos de modelo, basicamente, são o que está escrito aqui. Adicione as partes a todos os arquivos de modelo, como todos os arquivos HTML, arquivos JavaScript e arquivos JSX Então, se você vier aqui. Ok. Ok, então não foi adicionado. Ok, então precisamos adicionar isso. Então, o que eu vou fazer é copiar isso aqui. Ok. E eu vou colar aqui, ok? E um t. Ok. Agora, o que vou fazer é seguir esse quarto passo. Eu vou copiar isso, ok. E vamos vir aqui e aqui no CSS principal. Então, onde está o CSS principal. Está bem? Então, vamos para a pasta SRC. Aqui temos o app dot CSS, que tem um pouco de CSS, e depois temos o index dot CSS, que também tem um pouco de CSS. Então, vou me livrar de ambos porque não precisamos dos dois. Então, app dot CSS também. Ok. Então, nos livramos de tudo. Agora, no CSS de pontos de índice no arquivo CSS raiz, então isso está sendo usado CSS de pontos de índice aqui no ponto principal GSX Então, o que vou fazer é no CSS de pontos de índice, vou adicionar isso, ok? Agora, isso foi adicionado, ok? E então o que precisamos fazer é basicamente testar o vento de cauda, ok? Então, vou copiar isso. E vou adicionar ao meu projeto. Está bem? Mas antes de adicionar ao projeto, basta ver uma coisa. Aqui removemos o CSS, mas mesmo depois de configurar o vento de cauda, ok, ele não está trazendo o efeito de vento de cauda E isso é algo que eu posso sentir. Está bem? E eu sei qual é o problema. O que eu vou fazer é parar o servidor. Ok, pare o servidor e eu reiniciarei para que os novos arquivos de configuração sejam retirados. Ok. Vamos ver se está bem, agora você pode ver que o vento de cauda entrou em vigor ou que a interface do usuário foi alterada O problema ocorreu devido à reinicialização. Por isso, criamos novos arquivos de configuração que são coletados durante a reinicialização. Ok. Além disso, mais uma coisa que vou fazer aqui é ter HTML GS. Ok. Também vou adicionar GSX aqui. Está bem? Então, eu também vou adicionar GSX, ok. E TSX, que é para texto datilografado. Ok. E vou ver se é isso. Ok, então isso será resolvido. Está bem? O que eu vou fazer é, isso está feito. Agora vou copiar essa peça. Ok. Vamos vir até aqui. E aqui, vou entrar, talvez digamos dot Aix ou app dot GSX App.j6 está tendo esse código que está sendo renderizado para você. Ok. Vou apenas minimizar isso. O que eu faria é sair de todo esse TIF aqui até aqui, e eu vou apenas colocar isso em pedaços E eu pressionarei Tab duas vezes, salve isso e você poderá ver. Diz texto de três Excel e fonte em negrito. E sublinhe isso, ok? E você pode ver uma interface de usuário decente entrando aqui, ok? E esse é o estilo usando o vento de cauda. Está bem? Tipo, não há muita coisa que tenhamos feito por aqui. Ok, acabamos de copiar o código, mas também escrevemos CSS muito simples É que não é tão difícil. Está bem? Podemos até escrever um pouco de CSS por conta própria. Então, o que eu posso fazer aqui é me livrar disso. Ok. E eu posso escrever meu próprio CSS. Eu posso dizer TiVo, aqui, e vou dizer classe. Vou criar uma aula. Ok, e eu vou dizer que nome da classe é BG hyphen White Agora, você pode ver todas as sugestões de aulas de vento favorável aqui Então, o código do Visual Studio está me sugerindo todas as classes de tailwind Essas são todas as classes de vento favorável. Então, em vez de digitar, eu tenho que dizer BG grey, e isso me dará uma sugestão e eu posso simplesmente selecioná-la Ok. E também me mostrará a cor que estou selecionando. Então, isso é para fundo cinza aqui. Se você não tem certeza do que é uma classe específica, você pode simplesmente copiar isso e vir aqui e até pesquisar aqui. Se você pesquisar, verá que é pela cor do plano de fundo. Você pode ver aqui, fundo preto, ardósia. Então, em vez de ardósia e preto, estamos usando cinza. Você pode ver aqui. Se você disser BG Indigo, 500, ele fornecerá cores como essas, qual é o CSS que ele gera em retrospectiva Deixe-me mostrar isso para você também. Então aqui, diz BG grey 100. Se eu passar o mouse sobre isso, você verá no pop-up do mouse que esse é o CSS gerado. Cor do plano de fundo. Esse é o valor RGB e a opacidade de um. Você pode ver que essa classe é traduzida para CSS. Agora, como estou obtendo esse recurso de sugestão automática, em primeiro lugar, para aulas, a prévia aqui e também o CSS que está sendo escolhido. Então, vou te dizer, há um plug-in interessante que você pode instalar no código do Visual Studio sempre que estiver trabalhando com tail went. Eu recomendo fortemente esse plug-in. Então, aqui eu instalei alguns plugins, ok. Então, deixe-me expandir isso. Está bem? A parte dos plugues. Como você pode ver, existem alguns plug-ins para o angular. tag de renomeação automática é uma, colorização de pares de colchetes é a que estou usando ES sete. Isso serve para gerar trechos Então, se você quiser gerar qualquer tipo de trecho, como código de componentes, código padronizado, tudo isso você pode fazer Se você rolar para baixo, há um plugin intellisens chamado Intellisence Está bem? Onde está? Eu não vejo. Preteer também é útil Ok. Não consigo encontrá-la aqui. Live Server também é muito bom. Ok. Ah, aqui, inteligência CSS tailwind. Então, isso é algo que você precisa instalar, então você precisa pesquisar por Tailwind CSS aqui Ou no mercado de plug-ins, e você encontrará esse plug-in no Tailwind CSS Ok. Eu recomendo fortemente que todos vocês instalem isso, porque você pode ver isso aqui na própria captura de tela, na captura Ele está mostrando a sugestão automática. Então, é útil. É muito útil. Ele está lhe dando sugestões automáticas e, basicamente, existem muitos nomes de classes. Também ajudará você com a pré-visualização. Portanto, é muito útil conectá-lo quando você está trabalhando com o tailwind Porque existem muitas aulas. Obviamente, você aprenderá nomes de turmas eventualmente em um período de tempo, mas isso ajuda a acelerar. Agora, se eu quiser adicionar preenchimento, posso dizer P hífen oito E você pode ver que está gerando esse CSS para mim, preenchimento de dois RM, certo Então eu sei, ok, isso está sendo aplicado. Se eu não quiser preencher dois REM, posso fazer quatro aqui Eu posso fazer cinco. Ok. Então eu posso fazer seis. Você pode ver que o preenchimento de 1,5 se tornou um preenchimento de oito. Ok. Então, com base nisso, você pode fazer coisas, ok, hífen arredondado LG, e você pode dizer sombra de G aqui, você pode ver que este é o CSS que está sendo gerado Está bem? Então, tudo isso, você pode absolutamente fazer. Está bem? Então, estou adicionando PG. Em vez de cinza BG, vou manter isso em branco BG aqui. Vamos ver como é o BG white. Adicionando oito, LG arredondado, sombra LG. Ok, vou adicionar mais uma div na parte superior, na parte superior, basicamente Então, aqui, eu vou cortar essa div e vou vir aqui. Ok. E vou apenas recuar isso. Está bem? Então isso está feito. E eu vou dizer aqui, em vez de branco branco, eu vou dizer cinza. Ok, uma taxa de 100. Eu vou dizer flex. Ok, justifique o centro Ok, e o centro de itens também, algo assim. E tela horizontal. Ok. Então isso está feito, ok? Eu tenho algumas dicas. Agora o que eu vou fazer é, deixe-me adicionar H um aqui. Vou adicionar um H. Ok. E dentro do H one, eu vou dizer olá. E tail wind CSS em react, algo parecido. Ok. E você pode basicamente adicionar as classes aqui, para que você possa dizer Opa, para que eu possa dizer o nome da classe E você pode dizer hífen de texto no Excel e fonte em negrito Ok. E você pode dizer texto cinza cinza de let's keep it 800. Ok. E sim, isso está feito. Portanto, devemos ter uma interface de aparência decente aqui, se você ver. Então você pode ver, Hello tailwind CSS em react. É justo. Você também pode adicionar subtexto, então adicionaremos um subtexto aqui Vou dizer Ptag aqui, algo assim. E eu vou dizer que este é um exemplo simples usando tail wind, CSS no projeto react. Algo parecido com isso. Se eu salvar isso, você verá a saída aqui, mas ela não está estilizada, então adicionarei alguns nomes de classes aqui para que pareça bem decente Vou dizer texto cinza. Está bem? Texto cinza de deixe-me torná-lo mais claro de 600 e você pode ver que agora está mais claro. Ok. Então você pode ver que isso é o que é. Se você fizer isso em tela cheia, verá isso no centro. E eu ampliei um pouco em 200. Então essa é a visão real em cem por cento, como na visão normal. Ok. Se eu aumentar o zoom, vou ver isso muito mais rápido. Está bem? Então é assim que você pode configurar, você sabe, o CSS tailwind em seu projeto E isso torna a vida, muito mais eficiente, fácil, como você pode imaginar, certo? Então, espero que você tenha gostado e achado isso útil. Vou ver tudo isso. 5. Além do básico: dominando o design responsivo e temas personalizados no React com Tailwind: Hoje, sempre que você está criando qualquer tipo de aplicativo web, design responsivo é muito, muito importante Com muitas pessoas migrando para telas menores, como tablets e telefones celulares, é provável que seu aplicativo também seja usado em telas menores. E é muito importante que você saiba como criar seu aplicativo para diferentes tamanhos de tela. Felizmente, com o vento de cauda, isso é muito, muito simples se você entender o que precisa fazer Então, vou dar uma visão geral de como Tailwind permite criar componentes compatíveis com dispositivos móveis e não apenas compatíveis com dispositivos móveis mas também compatíveis com diferentes tamanhos de tela, como tablets Então, vamos para Começar, e aqui em Começar, no lado esquerdo, você verá esse design responsivo E você pode até pesquisar por design responsivo aqui, ok? Então, vou passar para o design responsivo aqui, ok? E é aqui que conhecemos como o tailwind permite que você escreva componentes ou construa componentes compatíveis com diferentes tamanhos de tela, ok? Agora, quando falamos sobre projetos responsivos em vento de cauda, cada classe que existe em vento de cauda tem ou pode ser aplicada condicionalmente Está bem? Agora, o que é um ponto de interrupção Está bem? Agora, os pontos de interrupção são larguras de tela específicas em que o layout ou o estilo da página da Web são alterados para garantir que o conteúdo tenha uma boa aparência em diferentes tamanhos de tela ou em Está bem? Portanto, eles são como uma regra que decide como seu design se adaptará aos diferentes tamanhos de tela. Deixe-me dar um exemplo. Então aqui você pode ver, esses são todos os pontos de interrupção, ok? Esses são todos os pontos de interrupção padrão. E esses são cinco que existem por padrão: vento de cauda. Então, quando você diz SM, está basicamente dizendo que a largura mínima da tela deve ser de 640 pixels Está bem? Quando você está dizendo MD, você está dizendo que a largura mínima deve ser de 768 pixels Para a LG, a largura mínima é 1024. Para o Excel é 1280. Para dois Excel, são 1536 pixels. E esse é o CSS correspondente, ok? Portanto, isso é definido como padrão Y. Agora, se você quiser adicionar uma classe ou adicionar um tipo específico de elemento de design ou algum tipo de CSS a determinados tamanhos de tela, o que você precisa fazer é usar esses pontos de interrupção como prefixo. Então você pode ver aqui. Aqui, há um exemplo de tag de imagem, e você está dizendo que a largura da imagem é 16. Está bem? Portanto, a largura de 16 é a largura por padrão. Agora, quando você diz largura de dois pontos MD 32, como W 32, 32 será a largura nas telas médias, o e 48 nas telas maiores Ok. Portanto, telas maiores significam 1024 pixels ou mais Telas médias significam 768 pixels ou mais. Ok, então é assim que isso é tratado. Portanto, esse prefixo MD e LG garante que, dependendo da definição de ponto de interrupção existente, tudo bem, esses CSS sejam aplicados condicionalmente, dependendo do tamanho do dispositivo E sim, antes disso, antes de usar tudo isso, você precisa ter certeza de que adicionou uma metatag view pot no documento principal. Está bem? No cabeçalho do seu documento, me desculpe. Então, basicamente, se você vier aqui em nosso aplicativo, ok? E se você for para o HTML de pontos de índice, precisará ter esse visor aqui, que está presente por padrão Está bem? Mas se algo não estiver funcionando, você pode verificar, ok? Mas isso precisa estar presente. E é assim que funciona. Então eu espero que isso esteja fazendo sentido, ok? E isso funciona para todas as classes de utilitários na estrutura. Portanto, há classes definidas diretamente no vento de cauda. Essas são todas as aulas. Certo. E você pode usar esse prefixo ou esses pontos de interrupção com qualquer tipo de classe Você pode ver. Isso é o que isso significa. Está bem? Assim, você pode alterar literalmente qualquer coisa em um determinado ponto de interrupção, até mesmo coisas como espaçamento entre letras ou estilos de cursor Está bem? Agora, aqui está basicamente um exemplo que eles deram. Ok, você pode alterar o tamanho da tela, você pode ver como isso muda. Então, isso está usando completamente o vento de cauda, você pode ver como isso muda E aqui você basicamente também tem o CSS. Você pode ver. Portanto, por padrão, o tif externo é um bloco de exibição, mas ao adicionar o MD flex, ele se torna display flex em telas médias Então, se o tamanho da tela ficar médio ou maior, ele se torna flexível, você pode ver, certo? Então é assim que ele controla. Você pode ver que o psiquiatra também está sendo adicionado. Ok. Portanto, para evitar o encolhimento em telas médias e maiores, você usou o MD Shrink of zero Ok. Então, sim, essa é a coisa aqui. Agora, aqui você pode ver, ok, Tailwind usa o sistema móvel de primeiro ponto de interrupção, significa que você pode, semelhante ao que pode ser usado em outras estruturas Ok. O que isso significa, como utilitários sem prefixo Então, se você estiver usando maiúsculas. Ok, isso entrará em vigor em todos os tamanhos de tela enquanto estiverem prefixados. Portanto, se você estiver prefixando a maiúscula com MD, isso só ocorrerá em um ponto de interrupção especificado Agora, para MD, o que é um ponto de interrupção? Para MD, o ponto de interrupção é de 768 pixels ou mais. Está bem? Então, isso acontecerá ou será aplicado. Se você usar o cólon MD MD por caso, ele será aplicado somente acima desses tamanhos de tela e superiores, ok? Então aqui você pode ver, você pode ver aqui, o centro de texto SM da classe div Portanto, isso se concentrará apenas nas telas acima de 640 pixels ou mais, não em telas pequenas Está bem? Agora, no centro do texto, isso centralizará o texto no celular e alinhará à esquerda em telas de 640 pixels Ok, então é assim que você pode usar, você pode passar por tudo isso. Está bem? Agora, uma coisa incrível é que você também pode personalizar seus pontos de interrupção Ok, então eu te disse, isso é o que o Tailwind fornece por padrão O que o vento de cauda fornece por padrão. Agora, digamos que, para meu aplicativo, vou definir um tamanho diferente para MD, LG e quero ter minha própria personalização Então você pode personalizar, se você rolar até aqui, você pode personalizá-lo, para que você possa ter sob tema em Tailwind Conflict has Você pode ter telas e definir suas próprias definições de tela aqui. Ok. Você pode defini-lo da maneira que quiser. Então, o tablet tem 640 pixels. O laptop tem 1024 pixels, o desktop tem 1280 pixels. Está bem? E há um documento adicional para personalizar os pontos de interrupção Então, aqui você pode ver como personalizar as telas. Ok. Você pode até mesmo personalizar os padrões Você pode adicionar que esses são os padrões. Esses são pontos de interrupção padrão que são adicionados. Você pode personalizá-los se precisar. Está bem? Você pode substituir uma única tela. Então, por exemplo, se você quiser substituir o LG, o ponto de interrupção para telas grandes, você pode fazer isso assim apenas especificando Você pode adicionar novos pontos de interrupção, como três Excel. Então, ele vai para dois Excel. Mas se você quiser adicionar três Excel, você pode fazer isso. Está bem? Tudo isso é personalizável Depende totalmente de você e você pode usá-lo dessa forma então. Seja qual for o nome que você deu ao seu tablet, você pode usá-lo dessa forma. Então, é incrível. Está bem? Apenas passe por isso, passe por isso arbitrário, desculpe, não arbitrário Basta ler esta documentação aqui e você aprenderá um pouco sobre isso. Também vamos colocar isso em ação. Então, o que vou fazer é mudar para minha base de código. Ok, aqui o que vamos fazer é realmente ver como podemos realmente personalizar ou como podemos realmente criar designs responsivos Isso é o que vamos aprender aqui. Ok. Então, a primeira coisa que vou fazer é fechar isso. Vou entrar no app dot Jex. Aqui eu não tenho nada. adicionar Dev aqui, algo assim. Ok. Então, DV é adicionado Eu vou dizer o nome da turma. Opa, nome da classe. Eu vou dizer PG de carro de 100. Está bem? E eu vou dizer P hífen quatro Ok. Então, isso é algo que eu vou fazer, e vou adicionar uma lista aqui. Então, vamos adicionar uma lista e ver como você pode tornar esses itens da lista responsivos Está bem? Então eu vou dizer o nome da classe. Opa, nome da classe como lista nenhuma. Ok, então eu vou dizer lista. Não há nada por aqui, você pode ver. Ok. E vou adicionar os itens da lista, então vou dizer LI aqui. Eu vou dizer o item um. Ok, item um. Vou copiar isso. Ok. Vou dizer copiar o item um, item dois e o item três, basicamente, vou adicionar. Ok, então isso será dois, e isso será três. Agora, se eu salvar isso, você verá o item um, dois, três. Se eu me livrar dessa classe, você verá os itens um, dois, três sendo adicionados. Você está vendo uma cor de fundo clara por causa do CSS que apliquei na parte superior. Ok. Então, esses são itens da lista. Se você adicionar o nome da classe list none, ele será convertido em algo sem lista. Agora, o que vou fazer é adicionar um pouco de CSS aqui. Vou dizer o nome da turma. Eu vou dizer azul BG aqui. Ok. Eu posso dizer BG azul de 500. Eu posso dizer texto branco. E eu posso dizer P dois, preenchendo dois, e vou dizer LG arredondado, algo assim Ok, você pode ver que esse primeiro foi convertido em algo no estilo de botão. Ok. Vou copiar o CSS e vou me inscrever em todos os três aqui. Então, vou adicioná-lo aqui e vou adicioná-lo aqui. Ok. Agora deixe-me te mostrar um problema. Então, se eu usar uma tela maior como essa, desperdiçando desnecessariamente o lado direito, Está desperdiçando desnecessariamente o lado direito da tela porque esse botão está ficando esticado assim . Isso não é bom. Então, em uma tela maior, eu quero que eles sejam empilhados horizontalmente. Ok. E em uma tela menor, isso parece bom. Em uma tela menor, ela precisa ser vertical. Isso é bom. Ok. Então, eu também posso adicionar margem aqui. Está bem? Posso dizer margem de dois, mais ou menos. Ok. Acho que uma margem de dois é melhor. Deixe-me acrescentar isso. Ok. Sim, margem de dois. Agora, isso está empilhado verticalmente Isso é empilhado verticalmente novamente em um tamanho de tela maior ou maior Esse layout é bom, mas é bom para dispositivos móveis, eu diria, mas o desperdício é um espaço horizontal em telas maiores e não está fazendo uso eficiente do espaço da tela, certo? Esse é um problema que você entende. Então, o que eu vou fazer é adicionar um pouco de CSS aqui. Está bem? Então, a primeira coisa que eu faria é vir aqui e adicionar algumas aulas. Eu vou dizer MD. Está bem? Então, para dispositivos médios, ok, dispositivos médios e maiores, vou dizer dois pontos, pix Px de quatro Ok. E sim, essa é uma coisa que vou acrescentar. E no topo aqui, quando estivermos especificando o tipo de lista de nenhum, o que eu vou fazer é, eu vou dizer MD, ClinoopsFlex Vou mudá-lo para flex. Basicamente, a caixa flexível ou uma caixa flexível horizontal em tamanho médio ou uma tela maior Está bem? E eu vou dizer MD de cap of four. Basicamente, essas duas classes são aplicadas em telas maiores. Então você pode ver em uma tela pequena que nada muda, certo? Mas vamos arrastar isso. Ok, você pode ver agora mudou de pequeno para grande. Você pode ver anteriormente que isso não estava acontecendo. Está bem? Então você está vendo uma lacuna aqui, a lacuna entre os botões, porque eu adicionei essa lacuna de quatro. Se eu me livrar disso, você pode ver que a lacuna é reduzida. Se você adicionar a lacuna quatro do MD, isso vai acabar. Está bem? Então, para um determinado tamanho de tela, isso aparece. E é bonito você pode ver isso e em uma tela maior, é. Portanto, se você estiver visualizando o site, o mesmo aplicativo no desktop, ele aparecerá empilhado horizontalmente Mas em um tamanho de tela menor, ele fica empilhado verticalmente Essa é a batida por aqui. Está bem? Então, para resumir, o que estamos fazendo aqui é converter a lista não ordenada aqui em uma caixa de manchas horizontal em tamanho de tela médio, ok E isso estamos fazendo com a ajuda do MD colon. Está bem? Este é um ponto de interrupção definido no CSS do tailwind, e estamos fazendo uso dele, ok Então, espero que você tenha conseguido acompanhar e espero que tenha uma boa clareza sobre como isso funciona. Agora, vou te mostrar mais uma coisa. Mostrarei como você pode configurar ou adicionar algum tipo de tema personalizado ao seu tailwind Então, digamos que estou trabalhando para uma grande empresa e há um esquema de cores predefinido que eu quero que meu aplicativo reflita Ok, então eu posso fazer uso disso. Ok, e não há mal nenhum em personalizar isso. Então eu posso acessar a paleta de cores, ok, online. Ok, e você pode ver aqui , essas são as paletas de cores Digamos que eu escolha esse tipo de azul aqui. Está bem? E eu vou vir aqui para configurar CSS no Tailwind. O que eu posso fazer aqui em extensão, eu vou ter cores, assim. Ok. Eu vou dizer Colin, algo assim Ok, à la comma aqui. E aqui, eu vou dizer, uh, azul personalizado. Esse é o meu azul. Ok. O que estou especificando, direi Colin e adicionarei algo assim Este é um azul personalizado. E agora, em vez de azul aqui, eu estou usando azul, azul normal, certo? Então, o que eu vou fazer é vir aqui. Em vez do azul BG, 500, posso usar o azul personalizado aqui. Eu vou dizer azul personalizado. Você pode ver que o azul personalizado da BG foi sugerido. Eu posso ver se isso. Ok, isso não parece muito legal. Ok. Provavelmente preciso reiniciar porque acredito que alterei a configuração e ela não está sendo retomada. Então, deixe-me reiniciar e atualizar, ok. Então, um problema que eu vejo aqui, a razão pela qual isso não está sendo aplicado é que eu perdi o hash aqui Ok, então os códigos de cores devem começar com hash. E no momento em que você salvar isso, você o verá aqui em cima. Está bem? Portanto, não há necessidade de reiniciar. No momento em que você altera qualquer tipo de configuração aqui, isso se aplica à moda comum E você pode ver que é um azul diferente do que tínhamos inicialmente. Assim, posso adicionar meu próprio tema personalizado aqui, o Sem problemas. E eu posso usá-lo aqui do jeito que eu quiser. Você pode ver que a cor também está chegando. Também está sugerindo automaticamente, a partir desse plug-in, que estou usando o intellisense É tão incrível que ele o está pegando do arquivo de configuração e o mostrando para mim Ele sabe que eu configurei uma cor personalizada aqui. Se eu salvar isso, você pode ver a cor sendo alterada. Agora, esse é um azul personalizado que eu tenho e não o que era pré-existente. Dessa forma, você pode personalizar literalmente muitas coisas aqui. Você pode criar seu próprio tema aqui, ok? E você pode definir suas próprias fontes, seu próprio tema e usá-lo em qualquer lugar do aplicativo sem hesitar Obviamente, existe uma biblioteca padrão muito boa. Mas quando você está trabalhando em um aplicativo de nível de produção, esse é um cenário comum em que há um determinado conjunto de cores que as empresas gostariam de usar e elas gostariam de refletir as cores de sua marca no aplicativo. E essas cores da marca podem não estar lá por padrão, e talvez você queira adicioná-las aqui. Então é assim que você adicionaria e pode ser usado em todo o projeto. Espero que tenha sido valioso e espero que você ame isso. 6. PROJETO: construindo uma grade de cartão dinâmica com filtros usando React e Tailwind CSS: Agora, implementando o modo escuro, modo claro é um dos recursos comuns que aplicativos web modernos têm atualmente. Se você estiver trabalhando em uma configuração de criação de produção, é muito provável que seu chefe peça que você adicione esse recurso ao aplicativo existente que os usuários estão usando. Esse é um recurso incrível em que o usuário pode alternar o tema com base em suas preferências É exatamente isso que vou mostrar neste vídeo, em que vamos criar um pequeno projeto que você vê na tela, o que nos ajudará a alternar entre o modo escuro e Então, aqui está o aplicativo. Não há muito design. É bem simples. Eu adicionei algum texto aqui propositalmente para que você possa ver como a cor do texto muda dependendo do tema, e eu tenho um elemento padrão Agora você pode desativar o modo escuro aqui. Você pode ver o modo claro e a cor do texto muda para preto e o fundo é branco. Você pode ativar o modo escuro. Portanto, desative o nm, você pode alternar entre esses dois modos. E isso é basicamente armazenado localmente, essa preferência. Você pode atualizar isso e ainda estará no modo escuro. Se você ativar o modo escuro ou desativar o modo escuro e atualizar, ainda estará no modo claro, porque essa é uma preferência que você selecionou Ok. Portanto, as preferências também são armazenadas no navegador do usuário usando armazenamento local, e exatamente como fazer isso é o que vou mostrar a você. Agora, para implementar a mesma documentação CSS, vá até o tail wind e faça uma pesquisa rápida aqui e pesquise o modo escuro. Está bem? Agora, como chegar à documentação, eu vou te mostrar. Então, no site, você pode vir aqui e dizer “comece” ou você também pode pesquisar aqui. Você pode dizer modo escuro aqui , e você virá aqui. Ok. Então, você ficará surpreso ao ver que ele tem um suporte padrão para o modo escuro Está bem? Então, diz que tailwind permite que você faça uso desse recurso, e como você pode fazer isso é habilitá-lo assim Você pode dizer modo escuro, modo claro. Então, o que ele faz é basicamente permitir que você inclua uma variante escura. Então, diz que o vento de cauda inclui uma variante escura que permite que você estilize sua visão de forma diferente quando ativada Assim, você pode adicionar dois pontos escuros e o esquema de cores ou o estilo que deseja ter quando o modo escuro está ativado Então você pode fazer isso aqui. Você pode dizer escuro. Então, no modo escuro, eu quero ter o fundo como ardósia. Ok. E no modo escuro, quero ter o texto em branco. A cor do texto também deve ser essa. Está bem? Isso é algo que você pode definir. E então, no Tailwind CSS, o que você pode fazer é, desculpe, não o Tailwind No arquivo de configuração, o que você pode fazer é fazer um pequeno ajuste no arquivo de configuração Portanto, no arquivo de conflito, basta adicionar esse modo escuro, resfriamento e seletor Agora, o seletor será uma classe aqui no nosso caso. Eu vou te mostrar como você pode implementar isso. Ok. E sempre que você diz classe, ok, ela basicamente alterna com base nesse CSS que você aplicou Então, deixe-me implementar isso e mostrar para você, mas essa é uma documentação que eu queria destacar. Está bem? Você pode ver aqui. O código inteiro é fornecido aqui, ok? Você pode simplesmente dar uma olhada nisso. Ok. Eu gostaria de mudar aqui para o IDE. Literalmente, nenhum código está sendo adicionado no momento. Então, começaremos a escrever alguns códigos que nos ajudarão a implementar. Está bem? Então, o que vou fazer é aqui, primeiro de tudo, em Dev, dizer o nome da classe. Ok. Vou adicionar algumas aulas. Eu vou dizer preenchimento de quatro. Ok, BG de branco. Portanto, esse é um plano de fundo padrão. Ok. E vou adicionar uma tela H mínima. Ok. Opa. Algo parecido com isso. Ok. E aqui, eu vou dizer cada um, ok? E aqui vou dizer, bem-vindo ao Talk. Modo. App algo parecido com isso. Ok. E aqui posso dizer que nome da classe é texto, do Iphone ao Excel. Está bem? Você pode ver como bem-vindo ao aplicativo Dark Mode. Ok. E vou adicionar o PTAC, e vou dizer que este é um exemplo de implementação do modo escuro usando o vento de implementação do modo escuro usando o vento CSS. Ok. Então você pode ver que isso chegou. Está bem? Agora, o que faremos é adicionar um componente que nos permitirá alternar aqui Ok. Então, vou dizer aqui que vou chamar isso de alternância do modo tar Esse componente não existe, mas podemos criar o componente primeiro. Isso é algo que eu posso fazer. Eu posso dizer modo escuro, alternar, sexo aqui, e posso dizer Basicamente, esse componente terá toda a lógica. Então, eu posso dizer função const e modo escuro, alternar, algo assim, e eu vou ter Vou usar as funções de seta aqui. Agora, tudo bem. Vou ficar bem, sim, acho que, ok, cometi um erro de sintaxe aqui Vou me livrar disso. Ok. Então, sim, está tudo bem. E agora eu vou dizer exportar, padrão, falar mais, alternar, algo assim Ok, e eu vou importar isso aqui. Vou dizer isso, mais um botão. Assim. Ok. Agora vou começar a adicionar alguns códigos aqui. Então, o que vamos fazer é, aqui, adicionar um botão. Ok. Então, primeiro de tudo, eu vou dizer “volte”, ok? Volte aqui e aqui. Eu direi para devolver um botão. Então, precisamos de um botão que controle o botão para Está bem? Então, o botão vai ficar escuro. Então isso é um texto. Vou mudar esse texto, mas por enquanto, vamos ter esse texto. Ok. Primeiro vou ver o nome da classe. Ok, nome da turma. Vou seguir essa nova linha. Ok. Agora, qual é o nome da classe que eu quero especificar? Eu vou dizer P dois, PT de cinza 200. Ok, cinza de 200, e eu vou dizer que o texto da tela de texto cinza é de 800 letras C, e eu acho que é isso, eu acredito, redondo. Vou adicionar uma rodada aqui mesmo. Ok, então esse é o botão que temos. Ok, nada acontece com o clique ainda, mas vou adicionar um clique em Lesner Então, ao clicar, o que precisamos fazer é definir o modo teta, ativar e desativar, basicamente Ok. E para isso, vou usar o estado E. Vou precisar de um estado aqui dentro da função. Ok, então eu vou dizer const, o e eu vou dizer é o modo TAC, e eu vou dizer set é o modo TAC Então esta é a Ok, essa é a função, desculpe, não a função. Isso é estado. Eu vou dizer use o estado. E eu vou dizer aqui. Então, vamos fazer uso do armazenamento local, ok? Então, eu estou dizendo aqui. Ou algo parecido com isso. Ok. Então, digamos que dentro do estado de nós, eu adicionarei a função de seta. E aqui, eu vou dizer, volte. Ok, armazenamento local, ponto, pegue o item. Então, eu estou usando o armazenamento local, e essa é a chave aqui. Então, qual tema o usuário aplicou, é isso que estou obtendo do armazenamento local. Ok, e eu vou dizer que é igual ao escuro. Então, se isso estiver escuro, isso será verdade, caso contrário, isso será falso e eu posso realmente fazer disso uma string. Está bem? E eu vou fazer uma comparação rigorosa. Ok. Então isso está feito, ok? Agora temos um estado, e o que vou fazer aqui é clicar, posso dizer, então quando o usuário clicar, eu vou dizer aqui, mais ou menos Ok. E aqui, deixe-me remover isso. Eu direi que o set está no modo escuro. E eu vou reverter o que está lá no modo Stark. Está bem? Portanto, isso garantirá que o valor sempre seja revertido quando você clica Por isso, ele sempre alterna quando você clica nele. Isso é o que isso vai garantir. Agora, o que vou fazer é fazer que E use o gancho de efeito aqui. Está bem? Agora, essa coisa toda, como eu disse, está sendo controlada por essa seleção aqui. Essa variante escura. O que eu quero dizer é. Então, eu preciso adicionar a variante escura em todos os lugares. Está bem? Então, o que vou fazer é a primeira coisa. Vou adicionar isso ao próprio botão . Então eu vou vir aqui. E aqui no botão, eu vou dizer aqui, escuro é escuro, Colin, BG, cinza, e eu vou ter G cinza de, digamos, 900, bem escuro E então eu posso escurecer. Eu preciso ter uma mensagem de texto também. O texto é um texto branco branco, algo assim. Isso está feito. Agora, ao clicar, se isso mudar, o que precisamos fazer é usar o efeito de uso. Então, vou usar o gancho de efeito de uso aqui. Deixe-me expandir isso um pouco, use o efeito. Agora, o que fazemos no efeito de uso? Vou inverter isso com base na mudança de valor no modo escuro Então, qual é a sintaxe do efeito de uso? Nós vamos ter algo parecido com isso. Temos uma função, sintaxe e uma matriz de dependências. Agora, matriz de independência, o que precisamos é do modo escuro. Então, quando esse valor mudar, você executará esse efeito de uso. Agora, dentro disso, precisamos ter a lógica. Está bem? Então eu vou dizer documento, ponto, elemento do documento, lista de classes de pontos. Ok. Então, vou adicionar essa classe chamada TAC Vou dizer tot, adicione porque escuro é a variante, certo? Então eu vou dizer aqui, TAC algo assim. Então, o que ele fará é adicionar a variante escura em todos os lugares. Ok. E também atualizarei o armazenamento local. Eu vou dizer armazenamento local, item de conjunto de pontos. Ok. Vou dizer equipe Então, vou reverter o valor deles. Vou dizer Tak algo assim. Está bem? Livre-se disso. Está bem? Então isso está feito. Tudo bem, precisamos fazer isso, precisamos executar condicionalmente, então precisamos dizer se está no modo escuro É um modo escuro, algo assim. Então, deixe-me. Se o modo escuro for verdadeiro, faremos isso. Preciso executar o outro bloco. Vou copiar isso. Vou ver mais por aqui e vou colocar isso em pedaços. Agora, se isso estiver lá, eu direi lista de classes, ponto, remova o elemento do documento, lista de classes ponto, remova o escuro aqui. Ok, então isso adicionará escuridão e isso removerá a escuridão. E aqui, eu vou dizer luz. Espero que isso esteja fazendo sentido. Agora vamos testar isso. Vamos ver como isso funciona. Deixe-me resumir isso, você vê. Opa, isso não vai funcionar. Portanto, isso não funcionará porque eu não adicionei isso à minha configuração Eu preciso ir até aqui. Eu virei até aqui. Eu vou dizer modo escuro, vidro de cólon. Ok. Deixe-me ver. Ok, escopo inválido , diz: Ok, há um problema e o problema provavelmente está na sintaxe Ok, então isso estaria em um único código. E agora, se você vê, você pode ver, está mudando. Então, o que está acontecendo é que, dependendo do valor do modo escuro, a classe está sendo aplicada e removida. Sim, você pode ver essa classe em toda a lista de classes, escuro está sendo aplicado e removido. Dependendo do valor que existe aqui. E o que é escuro? Escuro é isso. Está bem? Agora, o que podemos fazer é aplicar isso em todos os lugares. Também podemos aplicar isso no app dot JSX. Ok. O que vou fazer é, no app.j6, adicionar plano de fundo e tudo Ok. Então, aqui no DIV, aqui no Dev, posso dizer sombrio, ok, escuro sobre Colin Posso dizer cinza PG cinza BG de, digamos, 900, um pouco escuro. Eu direi que escuro é texto em branco. Texto em branco, alguma coisa. Ok. Eu fiz isso e agora vamos ver o modo escuro, você pode ver, está alternando agora, certo Então foi isso que construímos. E se você vier aqui, se você vê-lo em tela cheia, é isso que o aplicativo é. Você pode ver. Mesmo se você atualizar, porque estamos usando o armazenamento local Agora vou mostrar como ele está sendo armazenado no armazenamento local. Boa inspeção, clique com o botão direito do mouse em inspecionar, vá para o aplicativo e vá até aqui no armazenamento local Então, se eu diminuir um pouco o zoom aqui no armazenamento local, você tem esse host local 1573 Então você verá o valor deles aqui. Então é aqui que estamos armazenando. Então isso vai mudar. Você pode ver. Então, está sendo armazenado aqui. E se você limpar os cookies e tudo mais, isso será removido. Estamos usando o armazenamento local basicamente para implementar o modo escuro. Ok. Espero que isso esteja fazendo sentido. Então, para resumir, o Tailwind tem esse suporte embutido para o modo escuro, ok E inclui uma variante escura que você pode usar dessa forma. Assim, você pode implementar todos os estilos que deseja usando a variante escura, ok? E então aqui no modo escuro, você pode dizer seletor Então, o seletor é a aula aqui, ok? Portanto, você pode ver que a estratégia do seletor substituiu essa estratégia de classe Ok, então essa é a estratégia do seletor no momento. Esta é a atualização mais recente aqui. Então, se eu usar o seletor aqui, vamos ver se isso funciona Ok, então eu posso atualizar isso com o seletor. Você pode ver Ok, então, na verdade, está na versão mais recente, seletor deve ser usado Está bem? Eu estava usando a aula, mas a aula também está boa, ok? Mas o seletor é algo que você pode usar. Isso está perfeitamente bem. Tudo bem? Porque acredito que classe selecionada não será válida na próxima versão. Então não se esqueça de usar o seletor, ok? A classe também é a mesma. Isso significa o mesmo. E você pode ver que isso será branco. Ok, se o modo escuro não estiver ativado e se o modo escuro estiver ativado, o que acontecerá é que isso acontecerá. Então o que acontece é que quando você ativa o modo escuro, ok, há essa classe adicionada ao HTML, que é chamada de escuro. Agora, quando isso é aplicado, tudo no escuro está sendo aplicável, e isso não é mais válido, ok? Então essa coisa é adicionada, esse atributo é adicionado, e é por isso que você vê o aplicativo inteiro ficando escuro porque você tem seletores escuros em todos os lugares Você está usando esses seletores em todos os lugares, certo? Então, onde quer que você tenha definido algo usando o escuro, isso mostra isso Está bem? Então, sim, é assim que as coisas funcionam, e espero que você tenha gostado de criar esse pequeno aplicativo de modo escuro. Tudo bem Então, espero que isso tenha sido útil. 7. Conclusão do curso: Bem, parabéns por concluir este curso. Você percorreu um longo caminho dominando a integração do Tailwind CSS e do React para criar aplicativos responsivos, personalizáveis e Desde a configuração do seu projeto até a implementação de recursos avançados, como o modo escuro, agora você tem as habilidades necessárias para criar aplicativos web modernos que ficam ótimos em qualquer tamanho de tela. Seu projeto final, um aplicativo de reação totalmente funcional com modo escuro é uma prova do conhecimento prático que você adquiriu neste curso. Lembre-se de que o Tailwind CSS não serve apenas para economizar tempo, mas também para oferecer liberdade criativa e simplificar designs complexos Eu encorajo você a continuar experimentando os recursos do tailwinds e aplicá-los em seus projetos futuros. Além disso, compartilhe o trabalho com a comunidade e não hesite em revisitar as aulas se precisar de uma atualização Com este curso, você encontrará um projeto de classe que poderá dar uma olhada e compartilhá-lo com toda a turma para obter feedback. Obrigado por fazer essa jornada conosco. Estou muito feliz por fazer parte dessa jornada em particular e mal posso esperar para ver os aplicativos que você criará com o React e o Tailwind CSS Boa sorte e boa programação.