Você já conhece o Tailwind CSS? Sabe como ele pode te ajudar em projetos comerciais? Aprenda tudo sobre esse framework e melhore a criação dos seus projetos!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
O Tailwind CSS é um framework CSS que vem se tornando cada vez mais popular por sua flexibilidade e rapidez na estilização de projetos web.
Nessa aula, vou te mostrar o que é o Tailwind CSS e como você pode utilizá-lo na criação dos seus próximos projetos, deixando-os com um visual atrativo e profissional.
Essa é uma ferramenta muito importante para quem trabalha com projetos comerciais, pois transforma o estilo das suas páginas web de forma rápida e eficiente, agilizando o desenvolvimento.
O Tailwind CSS é um framework utilitário de CSS para a estilização de elementos HTML com classes pré-definidas. Você pode acessar a página inicial deles através do endereço: https://tailwindcss.com/
Ao contrário de outros frameworks tradicionais, como o Bootstrap, o Tailwind CSS não oferece componentes prontos. Em vez disso, ele dá a você a liberdade de customizar cada aspecto do design através de classes utilitárias específicas.
Com o Tailwind, você aplica as estilizações diretamente no HTML, o que simplifica o processo e te permite criar layouts personalizados de maneira eficiente.
Um ponto importante a ser destacado é que, embora o Tailwind CSS facilite a estilização com suas classes, é fundamental que você, como desenvolvedor, tenha conhecimento básico de CSS.
Isso porque muitas classes do Tailwind são baseadas em conceitos fundamentais de CSS, como espaçamento, fontes, cores, padding, margin, entre outros.
Se você dominar esses conceitos básicos, terá uma base sólida para usar o Tailwind CSS de forma ainda mais rápida e eficiente. Para te ajudar com isso, já separei uma aula que oferece uma introdução ao CSS: Aprenda HTML e CSS Rapidamente
Para utilizarmos e visualizarmos as funcionalidades do Tailwind CSS, precisaremos construir uma página HTML simples, e para isso, utilizaremos o VS Code.
Caso você ainda não tenha essa ferramenta instalada, confira nossa aula onde ensino como baixar e configurar as principais extensões dele: VS Code para HTML e CSS.
Com o VS Code instalado, abra o programa e crie um arquivo index.html.
Dentro desse arquivo, digite ! e pressione a tecla Tab. O VS Code reconhecerá que você deseja criar um arquivo HTML e construirá toda a estrutura básica para você.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Esse código é a base necessária para que o navegador interprete o documento HTML e gere uma página a partir dele.
Para visualizar a página criada, clique com o botão direito sobre o arquivo index.html e selecione a opção Open with Live Server.
Essa opção só estará disponível se você tiver instalado a extensão Live Server no seu VS Code. Com ela, podemos visualizar a página criada no navegador.
Por enquanto, nada será exibido, já que só temos a estrutura base de um documento HTML, sem nenhum conteúdo efetivamente adicionado.
A estrutura base de um documento HTML é dividida em duas partes principais: <head> e <body>.
Dentro da <head>, são inseridas as configurações gerais da página, como o tipo de caractere (UTF-8), a responsividade (largura e escala) e o título (<title>) exibido nas guias do navegador.
Logo abaixo, temos o <body>, o corpo do documento, onde inserimos o conteúdo visível da página.
Para visualizarmos a aplicação do Tailwind CSS, dentro do corpo da página vamos adicionar uma tag de título <h1> e uma imagem <img>.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Página do Daniel</h1> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNhoXisDruJMDAq3Ltd-wuaMW2lGxck9wAKw&s" alt=""> </body> </html>
Carregando a nossa página agora, teremos o título e a imagem sendo exibidos, mas sem nenhum estilo aplicado.
Essa estilização será feita com CSS, mas usaremos o Tailwind.
O próximo passo é incorporar o Tailwind CSS ao projeto. Para isso, acesse a página inicial do framework e clique em Get Started..
Isso nos levará para a documentação oficial do Tailwind , mais especificamente para a página de instalação.
Nessa aula, usaremos o CDN (Content Delivery Network), que permite carregar o Tailwind sem precisar instalá-lo diretamente no projeto.
Para isso, basta incluir o link do Tailwind no HTML da nossa página, adicionando uma tag <script> dentro do cabeçalho (<head>). Esse link apontará para a versão mais recente do Tailwind via CDN e importará os recursos necessários para estilizar a página.
Isso permite que o navegador do usuário baixe e aplique o estilo fornecido pelo Tailwind diretamente na página.
Você pode copiar essa tag do exemplo fornecido na página e colá-la abaixo da tag <title> do seu HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1>Página do Daniel</h1> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNhoXisDruJMDAq3Ltd-wuaMW2lGxck9wAKw&s" alt=""> </body> </html>
Após adicionar o Tailwind à sua página, você pode começar a estilizar os elementos dela. Vamos estilizar o nosso título <h1> utilizando a classe text-3xl, que define o tamanho do texto, e a classe font-bold, para deixar o texto em negrito.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold">Página do Daniel</h1> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNhoXisDruJMDAq3Ltd-wuaMW2lGxck9wAKw&s" alt=""> </body> </html>
Fazendo isso, o título da nossa página ficará maior e em negrito. Isso ocorre porque, através dessas classes que adicionamos às tags HTML, o Tailwind consegue estilizar os elementos da página.
Existe uma variedade enorme de classes utilitárias que você pode utilizar para aplicar estilos específicos, como espaçamentos, tamanhos de fonte e cores diversas.
Para saber qual a classe ideal para o estilo que você deseja, basta pesquisar dentro da documentação.
Por exemplo, se você deseja alterar o tamanho da fonte ou a cor de um elemento, basta pesquisar por font-size (tamanho da fonte) ou text-color (cor do texto) na documentação do Tailwind CSS.
Você encontrará uma variedade de classes e as respectivas propriedades que elas aplicam. Dessa forma, você pode personalizar sua página e estilizá-la como desejar, atribuindo uma ou mais classes aos elementos HTML.
Além de aumentar o tamanho do texto, podemos combinar mais classes ao nosso elemento <h1>, personalizando-o ainda mais.
Vamos utilizar a classe text-slate-100 para definir a cor do texto, a classe bg-slate-950 para definir a cor de fundo do texto e, por fim, a classe p-4, que irá adicionar um padding (espaçamento interno) ao nosso título.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold text-slate-100 bg-slate-950 p-4">Página do Daniel</h1> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNhoXisDruJMDAq3Ltd-wuaMW2lGxck9wAKw&s" alt=""> </body> </html>
Após salvar as alterações e carregar a página, veremos o título com o estilo definido pelas classes do Tailwind.
Como vimos, o Tailwind elimina a necessidade de criar estilos CSS separados para cada projeto. Com ele, você pode aplicar estilos diretamente no código HTML, usando classes pré-definidas, o que torna o processo de estilização muito mais ágil.
Além disso, como as classes são altamente configuráveis, com diversas opções e combinações possíveis, você pode customizar facilmente os elementos da página, ajustando cores, espaçamentos e fontes, sem sair do HTML.
Isso te permite se concentrar mais na lógica e na criação do design, em vez de perder tempo escrevendo várias regras de CSS. Basta buscar o estilo desejado na documentação e aplicar ao seu projeto, sem se preocupar com a complexidade do CSS.
Quando trabalhamos com o CSS tradicional, precisamos criar arquivos de estilos próprios, com várias regras e padrões, além de lidar com a complexidade de herança e especificidade de classes.
O Tailwind abstrai e simplifica esse processo, oferecendo uma abordagem mais direta. Assim, você não precisa se preocupar com a especificidade, já que o framework lida com essa parte para você.
Conforme explicado, o Tailwind acelera o desenvolvimento de interfaces e páginas web. Isso o torna especialmente útil para o desenvolvimento de um MVP (Minimum Viable Product ou Produto Mínimo Viável).
O MVP é uma versão básica de um projeto ou sistema, que contém as funcionalidades essenciais para que o produto seja testado ou apresentado a potenciais parceiros, investidores ou clientes.
O objetivo do MVP é fornecer uma versão funcional do projeto de forma rápida e eficiente, permitindo que os interessados possam entender seu funcionamento e conceito em ação.
O Tailwind é ideal para criar um MVP, devido à sua simplicidade e agilidade. Ele ajuda a montar um protótipo rapidamente, sem complicações no design.
Agora que já vimos como o Tailwind CSS funciona e como ele pode te ajudar em seus projetos, quero te apresentar algumas extensões do VS Code que vão melhorar e facilitar seu trabalho com essa ferramenta.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
O Tailwind CSS é uma das bibliotecas CSS mais populares para desenvolvedores front-end. Ele agiliza e otimiza a estilização de páginas e aplicativos web.
No entanto, lembrar de todas as classes disponíveis nessa biblioteca é uma tarefa difícil e, à medida que os projetos crescem, manter um código limpo e organizado pode se tornar um grande desafio.
Pensando nisso, vou te mostrar como utilizar as extensões Tailwind CSS IntelliSense e Tailwind Fold, que vão melhorar significativamente sua produtividade e manter seu código mais legível.
Uma das ferramentas mais úteis para quem trabalha com Tailwind CSS é a extensão Tailwind CSS IntelliSense.
Ela oferece sugestões automáticas enquanto você digita as classes do Tailwind, acelerando o desenvolvimento e evitando erros.
Para instalá-la, acesse a guia de Extensões do VS Code e busque por “Tailwind CSS IntelliSense”.
Após a instalação, você poderá aproveitar o recurso de autocompletar as classes que deseja utilizar.
Essa ferramenta é essencial tanto para agilizar a escrita do código quanto para lembrar o nome completo de classes específicas.
Além disso, ela ajuda a evitar erros de digitação, sugerindo apenas classes válidas, o que reduz bastante a chance de problemas no código.
Outro problema comum ao usar o Tailwind CSS, principalmente em projetos maiores, é o aumento no número de classes dentro do HTML.
Embora o uso das classes utilitárias do Tailwind acelere o desenvolvimento, o código HTML pode ficar sobrecarregado, tornando a leitura e manutenção mais difíceis.
Para resolver isso, você pode utilizar a extensão Tailwind Fold.
Essa extensão oferece uma maneira de ocultar as classes do Tailwind no código, deixando o HTML mais limpo e fácil de visualizar.
Assim, você pode se concentrar nas classes que está editando no momento, enquanto oculta aquelas que não são relevantes no contexto atual.
Isso melhora a legibilidade do seu código HTML, tornando-o mais claro e facilitando a compreensão da estrutura da página. Em projetos maiores, o Tailwind Fold ajuda a manter o código mais organizado e fácil de gerenciar.
O uso de extensões no VS Code, combinado com o Tailwind CSS, proporciona um desenvolvimento muito mais fluido e eficiente.
Com o IntelliSense, você agiliza a escrita do código e diminui a ocorrência de erros. Já com o Fold, seu código fica mais legível e organizado.
Se você quer melhorar e otimizar seu processo de estilização em projetos web, essas duas extensões são indispensáveis para aprimorar seu fluxo de trabalho.
Nessa aula, você aprendeu o passo a passo para incorporar o Tailwind CSS em uma página HTML e usar suas principais funcionalidades, estilizando elementos de forma rápida e eficiente.
O Tailwind CSS é uma excelente escolha para quem deseja agilizar o desenvolvimento web de projetos comerciais, especialmente quando se trata de lançar um MVP.
Esse framework reduz a complexidade do CSS e permite estilizações rápidas e flexíveis, oferecendo uma maneira prática para você dar início a um projeto comercial e se destacar no mercado de trabalho.
Além disso, vimos como as extensões Tailwind CSS IntelliSense e Tailwind Fold podem tornar seu trabalho ainda mais rápido, preciso e organizado.
Para aprender a criar projetos web completos, do zero ao avançado, confira nossos cursos completos:
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de JavaScript
Posts mais recentes da Hashtag Treinamentos
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.