Integração do Tailwind CSS com Vue.js

Criando um projeto Vue

O método mais rápido e recomendado atualmente é com o Vite:

Copynpm create vue@latest

Siga os prompts e selecione as opções desejadas (ex: TypeScript, Pinia, Router etc).
Depois acesse o diretório:

Copycd nome-do-projeto
npm install

---

Instalando o Tailwind CSS

Execute:

Copynpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

---

Configurando o Tailwind

Edite o tailwind.config.js:

Copy/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

E edite ou crie o arquivo src/assets/tailwind.css:

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

No seu main.js ou main.ts, importe o CSS:

Copyimport { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'

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

---

Usando Tailwind em componentes Vue

Você pode aplicar classes utilitárias diretamente nas tags do template:

Copy<template>
  <div class="p-6 bg-white rounded shadow max-w-md">
    <h1 class="text-2xl font-bold mb-2">Olá, Vue + Tailwind</h1>
    <p class="text-gray-600">Você está construindo interfaces com produtividade.</p>
  </div>
</template>

---

Organização dos estilos

Embora o Vue permita escopar estilos com <style scoped>, você pode evitar isso quando usa Tailwind, já que todas as definições estão nas classes.

Entretanto, você ainda pode usar <style> global ou @apply para criar classes personalizadas:

Copy/* assets/components.css */
.btn {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded;
}

Importe no tailwind.css:

Copy@import './components.css';

Use nos templates:

Copy<button class="btn">Salvar</button>

---

Classes condicionais no Vue

O Vue permite alternar classes com :class (bind dinâmico):

Copy<template>
  <button
    :class="[
      'px-4 py-2 rounded',
      ativo ? 'bg-green-600 text-white' : 'bg-gray-300 text-black'
    ]"
  >
    {{ ativo ? 'Ativo' : 'Inativo' }}
  </button>
</template>

<script setup>
const ativo = true
</script>

---

Dica de produtividade

Instale a extensão Tailwind CSS IntelliSense no VSCode para:

• Autocomplete inteligente

• Visualização de cores e tamanhos

• Validação inline

---

Considerações sobre build

Ao gerar o build para produção (npm run build), o Tailwind fará automaticamente a limpeza das classes não utilizadas com base nos arquivos definidos em content.

Se você usa classes dinâmicas com interpolação de strings, utilize a opção safelist para evitar a remoção indevida.

---

Frameworks e bibliotecas úteis

Tailwind combina bem com:

• Headless UI (Vue): componentes acessíveis e totalmente estilizados com Tailwind

• VueUse: utilitários reativos que ajudam a escrever código mais limpo

• Heroicons: ícones SVG prontos para Tailwind

• UnoCSS (caso deseje alternativas avançadas)

---

Deploy rápido

Você pode fazer deploy com:

• Vercel

• Netlify

• GitHub Pages (via build estático)

• Firebase Hosting

• Cloudflare Pages

---

A integração do Tailwind CSS com o Vue é fluida, poderosa e amplamente adotada na indústria. O uso de utilitárias diretamente no template melhora a velocidade de desenvolvimento e reduz dependência de arquivos CSS externos.