Os frameworks são ferramentas que contém componentes e documentações que ajudam no desenvolvimento de aplicações, e neste artigo, estudemos sobre o Tailwind CSS, que vem se popularizando cada vez mais no desenvolvimento front-end.
Mas afinal, o que é o Tailwind CSS?
Tailwind é um framework CSS que permite há você criar layouts para suas aplicações web utilizando sua estrutura. Ou seja, uma ferramenta que fornece componentes para sua estilização. O propósito geral da criação desse framework é aumentar a velocidade para o desenvolvimento, agilizando os processos de criação de seus web sites. Trazendo classes estilizadas a serem incluídas no CSS, com o uso de utility-first que são classes utilitárias que representam atributos CSS, como width, border e background.
Para facilitar sua compreensão demostraremos um exemplo de estilização com CSS e depois um com Tailwind onde ele recebe os mesmos estilos de uma forma diferente:
Com CSS:
<style>
.card {
padding: 5rem;
display: flex;
border-radius: 2rem;
background-color: cadet-blue;
}
</style>
<div class="card">TreinaWeb</div>
Com tailwind:
<div class="p-5 flex bg-cadetblue bd-radius">TreinaWeb</div>
Como podemos notar houver uma grande diferença no sentido visual do card a ser estilizado, porém, o resultado seria o mesmo em ambas as partes.
Onde os efeitos de estilização recebem os seguintes atributos:
Para conhecemos melhor os atributos dessa estrutura, podemos navegar pela biblioteca do Tailwind CSS. Mas caso ainda não seja familiarizado com arquivos como este, não se preocupe, pois, aprenderemos juntos como instalar e criar nosso primeiro projeto.
Mas, por que utilizá-lo?
Analisando as possíveis respostas, podemos avaliar aspectos, em que comparado a outros frameworks, ele permite ao desenvolvedor criar suas próprias classes utilitárias, estilizando cada elemento da sua própria forma. Diferente do Bootstrap que já traz classes predefinidas para seus elementos como tabelas e formulários.
Curso Bootstrap - Primeiros passos
Conhecer o cursoCriando um Navbar com Tailwind CSS
Para iniciamos será necessário criar um arquivo com extensão HTML no VS Code, e adicionar-lhe a seguinte estrutura:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TreinaWeb</title>
<!--LINK PARA ACESSAR O TAILWIND VIA CDN-->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-cyan-400">
<nav class="p-5 bg-white shadow">
<div>
<span class="cursor-pointer">
<img class="h-5 inline" src="https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.webp" >
</span>
</div>
</body>
</html>
Na estrutura anterior, foi adicionado o link do Tailwind CSS via CDN. Posteriormente no body adiciono a classe bg-cyan-400 que seria o mesmo que background-color: rgb(34 211 238). E, para as demais estilizações sigo o mesmo padrão de estilização, aplicando componentes de CSS do Tailwind, ou seja, suas classes utilitárias.
Logo abaixo, mostro algumas classes utilizadas no código anterior:
Para demais estudos aconselho a verificação da documentação, onde você encontrará detalhadamente, a classe correspondente a sua estilização.
Em seguida, podemos observar o resultado do código anterior, que executamos:
Agora, iremos atribuir novos atributos ao nosso navbar e classes de estilização.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TreinaWeb</title>
<!--LINK PARA ACESSAR O TAILWIND VIA CDN-->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-cyan-400">
<nav class="p-5 bg-white shadow md:flex md:items-center md: justify-between">
<div>
<span class="cursor-pointer">
<img class="h-5 inline" src="https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.webp" >
</span>
</div>
<div class="md:flex md:items-center">
<ul>
<li class="mx-4">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">Home</a>
</li>
</ul>
<ul>
<li class="mx-4">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">Service</a>
</li>
</ul>
<ul>
<li class="mx-4">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">About</a>
</li>
</ul>
<ul>
<li class="mx-4">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">Contact</a>
</li>
</ul>
<ul>
<li class="mx-4">
<a href="#" class="text-xl hover:text-cyan-500 duration-500">Blog</a>
</li>
</ul>
</div>
</body>
</html>
Formando o seguinte resultado:
Utilizando as classes da documentação do Tailwind CSS, adicionamos com as tags ul e li , novos efeitos de estilização. Aplicando um flex e distribuindo os elementos com md: justify-between, que define como o navegador distribui o espaço entre e ao redor dos itens deste conteúdo, ao longo do eixo principal.
Conclusão
Neste artigo, conseguimos entender sobre o que são frameworks, o que é o Tailwind CSS, porque utilizá-lo, e como realizar um primeiro projeto pelo VS Code.
