Como usar o Tailwind CSS + Vue3 + Vite? · RafaelMDEv

Como usar o Tailwind CSS?
Para começar gostaria de falar um pouco sobre o que é Tailwind CSS.

Tailwind CSS é um Framework CSS que se baseia em classes de utilitários que é basicamente uma biblioteca de classes que podem ser usadas diretamente na sua propriedade class.

O que vamos ver nesse Artigo

Criar um Projeto Vue3 (vite)
Instalar o Tailwind CSS
Incluir o Tailwind no seu projeto
Criar um componente Card simples

Ao começar a usar o Tailwind CSS é nos apresentado uma lista de Frameworks onde para cada um deles é um jeito de instalar diferente.

Como previsto vamos usar o Vue3 (vite)

Criando projeto Vue3 (vite)

Você pode ver a documentação dessas tecnologias aqui Vue3 / Vite .

Para começar crie uma pasta onde ficará seu projeto e abra o terminal no mesmo endereço.

Em seguida usamos o comando abaixo para iniciar um novo projeto Vite

$ npm init @vitejs/app my-project

$ cd my-project

O Vite pode pedir algumas informações a mais para o projeto porém são coisas simples é só ir respondendo.

Na Pasta do projeto vamos instalar as dependências usando o comando

$ npm install

Depois de instalado pode iniciar com o comando

$ npm run dev

Instalando o Tailwind CSS

No Terminal com o endereço do projeto selecionado vamos instalar o Tailwind CSS através do npm usando esse comando

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Após a instalação devemos criar os arquivos de configuração usando o comando

$ npx tailwindcss init -p

O Tailwind CSS irá criar dois arquivos de configuração, o tailwind.config.js e o postcss.config.js ambos ****servem para personalizar o uso do Tailwind em seu projeto, o postcss é usado para caso queira usar o Tailwind com algum pré-processador de css como Sass, Less, Stylus e outros.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Incluindo o Tailwind CSS no seu projeto

Somente a instalação não avisa nosso projeto que vamos usar as classes do Tailwind, precisamos importa-lo.

Para isso eu encontrei duas formas, a primeira depende se seu projeto usará arquivos de estilo css fora das páginas, como é um projeto Vue usa-se o estilo no mesmo aquivo, é usado externo apenas para algumas configurações globais.

Vamos abrir o projeto com seu editor favorito, no meu caso o VSCode e vamos na estrutura criada pelo Vite

Veja que como primeira opção eu criei uma diretório css para configurações globais com um arquivo chamado main.css com o conteúdo de importação do TailWind CSS dessa forma

/* ./src/css/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Agora basta ir no arquivo main.js e importar nosso aquivo main.css

/* ./src/main.js */
import { createApp } from 'vue'
import App from './App.vue'
import '../src/css/main.css'

createApp(App).mount('#app')

e pronto agora é só usar as classes do TailWind em nossas páginas.

Criando um Card com Tailwind CSS

Vamos criar um componente simples para usarmos algumas classes simples do Tailwind

No diretório components crie um novo aquivo chamado cards.vue

Todas as classes e exemplos de uso podem ser vistos na documentação do Tailwind CSS![https://tailwindcss.com/docs/](https://tailwindcss.com/docs/container)

Na estrutura inicial vamos criar algo assim, na div pai vamos definir as classes do Tailwind

 `w-32` que se refere a `width: 128px;`

 `h-36` que se refere a `height: 144px;`

 `py-1` que se refere a `padding` no eixo y (top e bottom) de `4px`

 `bg-blue-900` que se refere a um `background` com a cor `blue-900`

Ficando assim

<template>
    <div class="w-32 h-36 py-1 bg-blue-900">
      <div>Tomorrow</div>
      <div>body</div>
      <div>footer</div>
    </div>
</template>

<script>
export default {}
</script>

Vá até o arquivo app.vue e o importe dentro de <script setup>

<script setup>
 import card from '../components/card.vue'
</script>

no DOM chame-o como elemento <card />

<template>
  <div class="px-10 pt-10 ">
    <card />
  </div>
 </template>

Agora usando o flex-box vamos centralizar os items e dar um espaçamento entre eles, Na mesma classe pai vamos colocar as classes

`flex` que se refere a `display: flex;`

`flex-col` que se refere a `flex-direction: flex-col;`

`justify-between` que se refere a `justify-content: space-between`

`items-center` que se refere a `align-items: center;`

Vamos colocar a classe text-white para que o texto fique na cor branca

Agora vamos adicionar a imagem ao centro substituindo o body

<div>
<img src="https://image.flaticon.com/icons/png/512/1163/1163661.png" class="w-20">
</div>

Colocando a classe w-20 para definir o tamanho referente a width: 80px;

Para substituir o footer vamos criar uma estrutura assim

<div class="flex justify-around w-full">
    <div class="mx-1">16°C</div> 
    <div class="text-gray-500">13°C</div> 
</div>

Na classe pai dos elementos de texto, estamos usando flex e justify-arround para criar um espaço na lateral entre os elementos e o w-full para preencher todo conteúdo referente ao elemento pai.

Nos dois elementos filhos definimos para o primeiro a classe mx-1 que se refere a margin no eixo X (left e right) de 4px e para o segundo definimos uma cor ao texto grey-500

Estrutura completa

<template>
    <div class="w-32 h-36 py-1 bg-blue-900 flex flex-col justify-between items-center 
    text-white">
      <div>Tomorrow</div>
      <div>
        <img src="https://image.flaticon.com/icons/png/512/1163/1163661.png" class="w-20">
      </div>
      <div class="flex justify-around flex-row w-full">
        <div class="mx-1">16°C</div> 
        <div class="text-gray-500">13°C</div> 
      </div>
    </div>
</template>

Resultado final

https://github.com/RafaelM-DEv/Weather-app

Agora fique livre para explorar as classes e obter mais produtividade em seus projetos com Tailwind CSS.