Tailwind CSS: estilizando a sua página com classes utilitárias

Olá Tailwind CSS! - Apresentação

Olá, tudo bem? Meu nome é Ana Beatriz, mas você pode me chamar de Bia e eu sou instrutora de front-end aqui na Alura e por questões de acessibilidade eu vou me autodescrever.

Sou uma mulher de pele morena, tenho olhos castanhos e o cabelo cacheado, eu utilizo óculos e estou utilizando uma camiseta na cor amarela em homenagem ao Tails do Sonic, atrás de mim eu tenho uma parede que é lisa e ela possui uma iluminação de cor azul.

E agora que nós já estamos devidamente apresentados, gostaria de te dizer que eu estou imensamente feliz de te ter aqui comigo nesse treinamento de Tailwind CSS, onde nós iremos caminhar juntos de mãos dadas vencendo todos os desafios que aparecerem pelo percurso.

E para quem é esse curso? Se você deseja adquirir conhecimento em um Framework que está super em alta, que venceu por três anos consecutivos em primeiro lugar no ranking do State of CSS, esse curso é para você. E porquê tanta fama?

Nos últimos tempos o uso de Frameworks tem sido cada vez mais recorrentes pelas pessoas desenvolvedoras, isso porque eles potencializam o poder do CSS, otimizam a velocidade de trabalho, e existem muitos outros benefícios, mas muitas vezes esses benefícios eles vem carregados na dificuldade de personalizar os seus próprios componentes, gerando uma padronização das páginas que vemos por aí.

E na tentativa de solucionar essa questão, veio o nosso icónico Tailwind CSS que utiliza como recurso as classes utilitárias, e objetivo não é fornecer um componente já pronto, mas sim que você crie os seus próprios componentes com as classes utilitárias, gerando cada vez personalidade no seu produto final.

E se você não sabe absolutamente nada sobre Tailwind CSS, não se preocupe com isso, porque o objetivo desse curso é dar um passo de cada vez nesse framework, aprendendo desde o início, então como instalar, como utilizar, como configurar as personalizações e aplicar cada classe utilitária para estilizar os elementos.

E o que você irá aprender nesse curso? Aqui nós iremos construir uma página de inscrição de uma newsletter que é o Alura Newsletter, onde nós iremos aprender como aplicar diversos estilos.

Como por exemplo, modificar o posicionamento e o display dos elementos, alterar a largura e os espaçamentos, estilizar os textos modificando a fonte, a cor e o peso, construir também bordas e sombreamentos, adaptar a responsividade, aplicar as pseudo-classes e também criar uma animação bem legal, que é a animação do sino chacoalhando para te lembrar de ativar as notificações e não perder nenhuma novidade da newsletter.

E ao final desse curso, nós também iremos aprender como subir esse projeto na Vercel, para poder compartilhar com seus amigos e com seus familiares. E o que você precisa para realizar esse curso? É muito importante que você já tenha realizado os quatro cursos de HTML e CSS aqui da Alura, os cursos de flexbox e de layouts responsivos também.

Isso porque como o nosso foco é trabalhar com as classes utilitárias, é muito importante que você já tenha uma base das propriedades do CSS, e ao final desse curso, você estará apto para usar e abusar da sua criatividade em diversos outros projetos com o Tailwind CSS, e ainda por cima somar uma skill no seu portfólio com essa ferramenta que é super inovadora.

Hoje nós vamos iniciar o nosso primeiro contato com Tailwind CSS, entender o que tem feito essa ferramenta ganhar tanta popularidade na comunidade e o porque que o próprio site oficial a denomina como rápida, flexível, confiável e com tempo de execução zero.

O Tailwind faz parte do universo front-end, ele é um dos frameworks CSS existentes no mercado. Os frameworks CSS otimizam os processos de criação de websites e o seu uso tem feito cada vez mais parte da rotina das pessoas desenvolvedoras.

Hoje podemos contar com algumas opções, como por exemplo o Bootstrap, que é bem famoso e bastante utilizado, o Materialize, tem o Vuetify, o Pure, e muitos outros. Você deve está me perguntando: "Bia, então por que surgiu o Tailwind? Qual é a sua necessidade?"

E a resposta para essa pergunta é simples, mesmo que tenha uma alta variedade, ainda existiam muitas propostas que trazem diferenciais que ainda precisavam ser mais exploradas, como por exemplo, a de um framework que fosse um pouco mais fácil e intuitivo de manipular, que tivesse um alto poder de customização, ou seja, que essa customização fosse feita de uma forma muito mais simples, muito mais rápida, que tivesse foco em responsividade, isso o Tailwind sai em disparada, é um dos seus grandes pontos positivos, porque as adaptações para os diferentes tamanho de telas, é feita de uma forma muito mais fácil, muito mais rápida.

E, claro, tivesse integração com outros Frameworks de Javascript, porque é importante que essa ferramenta trabalhe em diferentes ambientes de desenvolvimento, e na tentativa de solucionar essas questões surgiu o Tailwind CSS.

Olá Tailwind CSS! - Conhecendo o Tailwind CSS

O Tailwind foi desenvolvido em 2017 e no momento que esse curso está sendo gravado, ele se encontra na versão 3.0.16, e assim que abrimos a página da documentação do Tailwind, ele já nos promete construir rapidamente um moderno website, sem nem sequer sair da HTML, mas como?

O Tailwind é bastante comparado com o Bootstrap, e vamos ver a principal diferença entre esses dois Frameworks ao tentar criar um botão, começando pelo Bootstrap, nós vamos utilizar principalmente essas duas classes, a btn, e a btn-primary, e esse vai ser o resultado, nós vamos ter um botão que tem a cor de fundo azul, tem a cor da letra branca, as bordas arredondadas, um espaçamento interno, e nisso basicamente o botão está criado.

Mas e no Tailwind, como é que vai funcionar? Aqui eu estou com meu VS Code aberto, minha página HTML, ela já está aberta no navegador. Inclusive se você ainda não baixou o VS Code, aproveita para voltar na atividade "Preparando o ambiente", que lá eu explico como você baixar e configurar.

Aqui eu já estou incorporando o Tailwind no projeto, você não precisa se preocupar com isso porque isso é um assunto para os próximos vídeos. Aqui eu já tenho meu elemento do botão, e agora nós vamos começar a estilizá-lo, eu não vou querer aquela cor de fundo azul, eu vou colocar uma cor verde, então eu vou utilizar class=’bg-green-500, e vemos que já está funcionando, a cor da letra vai ser branca, então vou colocar text-white, eu vou também modificar o peso dessa fonte, então vou colocar, font-bold.

Vou adicionar alguns arredondamentos nas bordas, rounded-lg. Agora está muito grudado, conseguimos ver aqui, então vou adicionar alguns espaçamentos, no espaçamento horizontal, eu vou colocar px-4, e no espaçamento vertical eu vou colocar py-3, temos o nosso elemento criado.

Acho que você já está começando a perceber um pouco da diferença entre esses dois códigos, vamos ver os dois juntos agora. Em um primeiro momento, você pode até pensar que os códigos são parecidos, muitas pessoas falam que a sintaxe desses dois frameworks é parecida, e de fato é um pouco parecido mesmo, eles lembram também um pouco CSS inline, mas eles tem uma diferença crucial nas suas classes e por que isso ocorre?

No Tailwind, as classes utilizadas são classes utilitárias, ou utility classes, isso significa que no Tailwind essas classes utilitárias vão representar as propriedades do CSS e a vantagem disso é que só vamos utilizar o que precisamos para estilizar esse elemento, então isso evita completamente a sobreposição do CSS, fazendo com que reduzamos ou até mesmo zere a quantidade de linhas escritas em CSS.

Já no Bootstrap, as classes representam um componente pronto, como por exemplo um nav, um menu, um btn que vai representar um botão, que foi o que vimos anteriormente, e a desvantagem é que para personalizarmos esse elemento vamos precisar sobrescrever essa classe com estilo CSS, sobrescrever com código CSS, isso não é tão legal.

Conseguimos perceber que na versão com Tailwind, o elemento ele acaba sendo mais personalizável, porque por exemplo, para construir essa cor de fundo verde, eu utilizo a classe bg-green-500, para eu fornecer essa cor de texto branca, eu utilizo a classe text-white, para eu modificar o peso dessa cor, tornando um peso um pouco mais forte, eu utlizo a classe font-bold, e por aí vai, eu vou construindo o meu componente.

Já no Bootstrap isso não ocorre, utilizamos essas duas classes, e o elemento está criado, não sabemos muito bem o que está acontecendo por debaixo dos planos, o que de fato está sendo aplicado. E, de novo, para personalizarmos esse botão, por exemplo, agora eu quero que esse botão aqui também tenha a cor de fundo verde, eu vou precisar sobrescrever essas classes com CSS.

Agora que já estamos devidamente apresentados ao Tailwind CSS chegou a hora de aprendermos como em incorporá-lo em nosso projeto, isso nós vemos no próximo vídeo, até lá.

Olá Tailwind CSS! - Como utilizar o Tailwind CSS

Para abrir a página da documentação do tailwind, clique aqui.

Nos próximos vídeos nós iremos construir essa página com o texto "Olá Tailwind CSS!" responsiva mas antes de começamos a colocar a mão na massa e praticar com as classes utilitárias, nós precisamos aprender como incorporar o Tailwind CSS em um projeto.

Aqui eu já estou na página da documentação do Tailwind, ela se encontra em inglês, mas você também pode traduzir para português se você quiser, aqui eu vou deixar traduzido, nesse menu da esquerda, temos a parte de instalação e aqui vamos ter todas as informações necessárias a respeito de como e onde utilizar o Tailwind.

E começando por essa aba de guias de estrutura, vemos que o Tailwind vai atuar em conjunto com outros tipos de Frameworks, como por exemplo, o React, o Next, o Angular, até mesmo Laravel, Rubi e muitos outros.

Nós vamos ter duas formas de instalar o Tailwind CSS, a primeira seria via terminal, como um plugin do PostCSS, que é um software que vai otimizar as operações de CSS por meio de JavaScript, e outra forma seria por CDN que é a forma que nós escolhemos utilizar nesse curso.

Essa abordagem é bem mais facilitada, já que como não envolve o terminal, não passamos por nenhuma etapa de compilação. Ela tem uma desvantagem que algumas funcionalidades do Tailwind, elas vão ficar um pouco limitadas, mas para o propósito desse curso, isso não vai nos atrapalhar.

Como é que vamos incorporar, instalar o Tailwind por CDN no nosso projeto? Vamos precisar copiar esse script que a documentação já nos oferece, <script src="https://cdn.tailwindcss.com"></script>, vou dar um “Ctrl + C”, e aqui na minha área de trabalho, eu já tenho a pasta que foi disponibilizada anteriormente na atividade preparando ambiente e ai eu vou clicar nesse arquivo com o botão direito e vou abrir com VS Code.

Aqui nós já temos o nosso projeto aberto, eu vou dividir em duas telas, que assim conseguimos ver melhor, eu vou abrir com Live Server, para vermos como é que está, então é isso, temos as duas imagens, o h1 de "Olá Tailwind CSS", e se eu abrir aqui conseguimos ver que temos a pasta das imagens que vão ser utilizadas no curso e temos também dois arquivos: "index.html", e a "newsletter.html".

A newsletter não vamos falar agora, porque vai ficar para uma próxima aula do curso. O arquivo que nós vamos trabalhar é o "index.html", vou fechar o menu explorer e vemos que o nosso projeto está por enquanto assim.

Agora eu vou colar aquele script que nós copiamos anteriormente, aqui no <head>, eu vou salvar com “Ctrl + S”, atualizando a página já vemos que tem algumas modificações, a principal, a mais gritante, é a que "Olá Tailwind CSS", perdeu completamente os seus estilos, o h1 ele perdeu todos os seus estilos, e por que isso acontece?

O Tailwind, ele vai ter como padrão um recurso que se chama preflight, o preflight ele vai trabalhar muito parecido como um reset CSS, um normalize CSS, ou seja, o seu objetivo, vai ser diminuir as discrepâncias entre os navegadores, as inconsistências entre esses navegadores, então é por isso que o h1 perdeu esses estilos padrões, e é bem legal, porque o Tailwind ele já vai ter isso como padrão.

Agora que sabemos que o Tailwind já está instalado no nosso projeto a estrutura HTML ela já está pronta, no próximo vídeo nós vamos estilizar com as classes utilitárias, te vejo lá.

Sobre o curso Tailwind CSS: estilizando a sua página com classes utilitárias

O curso Tailwind CSS: estilizando a sua página com classes utilitárias possui 127 minutos de vídeos, em um total de 46 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Olá Tailwind CSS!
• Alura Newsletter
• Avançando no projeto
• Mais funcionalidades
• Animações com Tailwind CSS