No artigo sobre Tailwind CSS vimos como instalar e executar o mesmo na nossa máquina, possibilitando agora aprendermos a criar nossos componentes.
Os componentes estão presentes em basicamente todos os sites que acessamos, se tornando algo bem comum, mas como conseguimos realizar a criação de um componente com o Tailwind CSS? Veremos o passo a passo a seguir.
O que é?
Uma vez que criamos um botão e o mesmo passa a se repetir durante o desenvolvimento do nosso site, ele passa a se tornar um componente.
Tendo isso em vista, podemos concluir que um componente nada mais é do que algo que irá ser apresentado duas ou mais vezes no nosso projeto.
Curso
Bootstrap - Primeiros passos
Conhecer o curso
Portanto, para facilitarmos o desenvolvimento do nosso projeto, o ideal é criarmos um botão, por exemplo, e aplicar a estilização desejada apenas uma vez, e após isso, basta declararmos no nosso documento HTML a classe que este botão possui.
Criando um componente de botão
Em primeiro lugar, vamos criar uma pasta na nossa Área de trabalho e abri-la com o nosso Visual Studio Code, após isso, realizaremos a instalação do Tailwind CSS seguindo o passo a passo contido no artigo.
Logo após instalarmos o Tailwind CSS em nossa máquina, iremos no nosso arquivo style.css onde realizamos os imports das diretivas do Tailwind CSS, @tailwind base; @tailwind components; @tailwind utilities;.
Neste arquivo, iremos declarar o nome da classe que queremos que o nosso botão tenha, e estilizá-la utilizando as classes do Tailwind CSS. Dessa forma:
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn-treinaweb {
@apply bg-green-400 text-white p-2 m-5 rounded;
}
Explicando o código
Visto que, para criarmos um componente, foi necessário utilizarmos a diretiva @apply, que será responsável por realizar as aplicações das classes da diretiva @utilities do Tailwind CSS. Sendo as classes que declaramos após @apply.
- bg-green - background-green-400 (400 equivale a uma tonalidade de cor fornecida pelo Tailwind CSS)
- p-2 - padding-2 (2 equivale a um espaçamento fornecido pelo Tailwind CSS, sendo sua unidade de medida, rem)
- m-5 - margin-5 (5 equivale a um espaçamento fornecido pelo Tailwind CSS, sendo sua unidade de medida, rem)
- rounded - border-rounded, arredondamento dos cantos
Agora, basta executarmos o comando de build, porém, neste comando devemos passar o caminho do nosso arquivo CSS onde declaramos as estilizações do nosso componente, dessa forma: npx tailwindcss-cli@latest style.css build -o src/css/style.css.
Curso
CSS - Sass
Conhecer o curso
Por fim, aplicamos a classe “btn-treinaweb” no nosso elemento de botã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>Componentes Tailwind CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="btn-treinaweb">TreinaWeb</button>
</body>
</html>
Dessa forma, teremos este resultado no nosso navegador:
Vantagens dos componentes
Afinal, quais seriam as vantagens de criarmos um componente? Tendo em vista que, iremos obter o mesmo resultado se declararmos as classes no nosso documento HTML.
A primeira e principal vantagem é deixarmos o nosso documento HTML mais “limpo”, permitindo assim a facilidade da leitura do nosso documento.
Vamos comparar dois documentos HTML, dentro do documento terão 10 botões, porém, um contendo o nosso componente “btn-treinaweb” em cada botão, e outro, com as mesmas declarações que utilizamos para criarmos o nosso botão, mas com as classes declaradas direto no HTML.
<!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>Componentes Tailwind CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="btn-treinaweb">TreinaWeb botão 1</button>
<button class="btn-treinaweb">TreinaWeb botão 2</button>
<button class="btn-treinaweb">TreinaWeb botão 3</button>
<button class="btn-treinaweb">TreinaWeb botão 4</button>
<button class="btn-treinaweb">TreinaWeb botão 5</button>
<button class="btn-treinaweb">TreinaWeb botão 6</button>
<button class="btn-treinaweb">TreinaWeb botão 7</button>
<button class="btn-treinaweb">TreinaWeb botão 8</button>
<button class="btn-treinaweb">TreinaWeb botão 9</button>
<button class="btn-treinaweb">TreinaWeb botão 10</button>
</body>
</html>
Agora, vamos comparar o próximo código com este, que irá conter com mesmos 10 botões, porém, com as classes declaradas dentro de button.
Curso
JavaScript - Fundamentos
Conhecer o curso
<!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>Componentes Tailwind CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 1</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 2</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 3</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 4</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 5</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 6</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 7</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 8</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 9</button>
<button class="bg-green-400 text-white p-2 m-5 rounded">TreinaWeb botão 10</button>
</body>
</html>
Certamente, nosso primeiro código, que contém o componente “btn-treinaweb”, está visivelmente mais agradável e a leitura do documento fica muito mais fácil, comparado ao segundo.
Além disso, a praticidade de aplicarmos apenas uma classe que nomeamos de “btn-treinaweb” e como resultado, já temos o nosso botão estilizado da maneira que queremos, é uma grande vantagem.
Conclusão
Agora que aprendemos a criar nossos componentes, podemos economizar muito tempo durante o desenvolvimento do nosso projeto, com a reutilização de códigos.
Não pare por aqui, desenvolva um projeto e aplique seus componentes para que o aprendizado fique fixado em sua mente.
Caso queira aprender mais sobre Front-end e sua infinidade de recursos saiba que aqui na TreinaWeb temos a formação completa, desde HTML5 e CSS3 até JavaScript que possui 75h26 de vídeo e um total de 494 exercícios.
Veja quais são os cursos abordados durante a formação Front-end:
- HTML5 + CSS3 - Básico ao avançado
- Google Chrome Develeper Tools
- JavaScript - Básico ao avançado
- CSS - Sass
- UX/UI - Introdução
- Acessibilidade - Introdução; Criando interfaces e conteúdos acessíveis; Desenvolvendo sites acessíveis
