Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme

O Tailwind CSS é uma tecnologia muito utilizada pelos desenvolvedores front-end, e existem duas maneiras de instalar e usufruir dessa ferramenta, através da instalação via CDN, e a que iremos aprender neste artigo, via NPM.

Instalando TailwindCSS via NPM

Primeiramente, devemos instalar em nossa máquina o Node.js. Após isso, iremos abrir o nosso Visual Studio Code, criar uma pasta com o nome de “tailwindcss”, em seguida, no canto superior esquerdo, iremos clicar na opção “Terminal”, e “New Terminal”. Feito isso, teremos o nosso terminal aberto, agora, para que possamos iniciar o nosso projeto, basta digitarmos npm init -y, criando assim o arquivo package.json

Curso Bootstrap - Primeiros passos

Conhecer o curso

Em seguida, iremos instalar as dependências do Node.js junto do tailwindcss através do comando npm install tailwindcss@latest postcss@latest autoprefixer@latest, com isso, traremos as últimas atualizações lançadas.

Iniciando arquivo de configurações Tailwind CSS

Para que seja possível criarmos as nossas próprias estilizações CSS, como por exemplo, declarar cores específicas que iremos utilizar em nosso projeto, devemos iniciar o arquivo de configurações do Tailwind CSS. Isso é realizado através desse comando no terminal, npx tailwindcss init.

Caso seja a primeira vez que esteja iniciando este pacote em sua máquina, possívelmente o Visual Studio Code irá pedir para digitar “y” e “enter”, assim, ele irá continuar o processo de inicialização do pacote de configurações do Tailwind CSS

Importando arquivos Tailwind CSS

Logo após importar os arquivos de configurações, devemos realizar os imports das camadas do Tailwind CSS, sendo elas, base, components, e utilities. Para isso, criaremos um arquivo CSS, com o nome style.css. Nele, colocaremos o seguinte código:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finalizando a instalação via NPM

Para concluirmos esta etapa, criaremos uma pasta chamada src, dentro dela iremos gerar um arquivo html, com o nome de index.html. É neste arquivo onde iremos escrever todo o conteúdo html da nossa página. Em seguida, ainda dentro de src, criaremos uma pasta com o nome de CSS.

Através do terminal, traremos todo o CSS disponível pelo Tailwind CSS, com o seguinte comando, npx tailwindcss-cli@latest build -o src/css/style.css.

Como resultado, dentro da pasta CSS que criamos dentro de src, teremos um arquivo com o nome de style.css, contendo nele todas as estilizações CSS que o Tailwind CSS nos disponibiliza.

Por fim, basta irmos no nosso arquivo html e linkarmos o nosso arquivo CSS que foi gerado após executar o comando de build. Ficando dessa forma:

<!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">
    <link rel="stylesheet" href="css/style.css">
    <title>Tailwind CSS</title>
</head>
<body>

</body>
</html>

Feito isso, iremos conseguir utilizar o Tailwind CSS.

Alterando as estilizações do Tailwind CSS com theme

Semelhantemente ao Bootstrap, o Tailwind CSS também nos permite alterar suas estilizações que contém no seu arquivo CSS. Para isso, utilizaremos o arquivo de configurações do Tailwind CSS.

Alterando cores com o theme

Primeiramente, vamos abrir o arquivo de configurações tailwind.config.js, lá, teremos o seguinte código:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Só para exemplificar, vamos alterar a cor black padrão que o Tailwind CSS nos oferece, para uma tonalidade de cinza. Para isso, iremos declarar dentro de theme, o comando colors: e abrir chaves { }, dentro das chaves, iremos escrever black: e entre aspas simples ' ', iremos inserir o valor em hexadecimal da tonalidade do cinza que queremos, no caso será #808080, e adicionar uma vírgula após as aspas simples.

O código irá ficar dessa forma:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    colors: {
      black: '#808080',
    },
    extend: {},
  },
  plugins: [],
}

Curso Node.js - Fundamentos

Conhecer o curso

Feito isso, para que a nossa alteração fique salva e seja renderizada no navegador, temos que executar o build novamente, npx tailwindcss-cli@latest build -o src/css/style.css. Vale lembrar que, toda vez que fizermos uma nova alteração, teremos que executar o comando de build para validar essas alterações.

Quando alteramos uma cor utilizando colors, todas as demais do Tailwind CSS serão excluídas, ou seja, não iremos conseguir utilizar as cores padrões oferecidas por ele, apenas aquelas que iremos declarar para utilizar no nosso projeto, fazendo assim com que o nosso arquivo CSS fique mais leve.

A fim de reforçar o conhecimento passado, vamos adicionar mais duas cores, um azul com o hexadecial #4e56ff, e um verde com o hexadecimal #48d359. Ficando dessa forma:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    colors: {
      black: '#808080',
      blue: '#4e56ff',
      green: '#48d359'
    },
    extend: {},
  },
  plugins: [],
}

Por fim, basta executarmos o comando de build, para que as alterações sejam realizadas.

Agora, no arquivo html, iremos criar três títulos com a tag h1. O primeiro título será “TreinaWeb!”, e terá a cor black, já o segundo, será “Escola Online” e terá a cor blue, e por fim, o terceiro que será “Para Desenvolvedores”, sua cor será green.

O código html ficará dessa forma:

<!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">
    <link rel="stylesheet" href="css/style.css">
    <title>TailwindCSS</title>
</head>
<body>
    <h1 class="text-black">TreinaWeb!</h1>
    <h1 class="text-blue">Escola Online</h1>
    <h1 class="text-green">Para Desenvolvedores</h1>
</body>
</html>

Curso JavaScript Básico

Conhecer o curso

No navegador, será apresentado assim:

imagem com três título, um escrito TreinaWeb, o segundo está escrito Escola Online, e o terceiro, Para Desenvolvedores.

Conclusão

Neste artigo, vimos a simplicidade de utilizar o Tailwind CSS através da instalação via NPM e a liberdade que ele nos proporciona, permitindo alterar seus padrões de estilizações. Com isso, teremos também um projeto muito mais leve, utilizando apenas as estilizações necessárias, fazendo com que a nossa página carregue mais rápida ao ser acessada.