Criando componentes com Tailwind CSS

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