Vue + Tailwind CSS

Criar uma aplicação com Vue e Tailwind CSS oferece um ambiente de desenvolvimento ágil, reativo e altamente performático. Com a arquitetura baseada em CSS nativo do Tailwind, a integração com o ecossistema do Vite ficou ainda mais simples, removendo a necessidade de arquivos JavaScript adicionais de configuração.

Criando um projeto Vue

O método oficial, mais rápido e recomendado atualmente é utilizando o ecossistema do Vite:

Bash

npm create vue@latest

Siga os prompts no terminal e selecione as opções desejadas para o seu projeto (como TypeScript, Pinia, Vue Router, etc.). Depois, acesse o diretório e instale as dependências:

Bash

cd nome-do-projeto
npm install

Instalando o Tailwind CSS

Para integrar o Tailwind à nova arquitetura, você deve instalar o pacote principal e o plugin oficial desenvolvido para o Vite:

Bash

npm install tailwindcss @tailwindcss/vite

Configurando o Vite

Abra o arquivo vite.config.js ou vite.config.ts na raiz do seu projeto Vue. Adicione o plugin do Tailwind diretamente na lista de plugins do Vite.

Esta integração cuida de todo o processo de build e da varredura automática de classes nos seus arquivos Single File Components (.vue), tornando desnecessário o uso de arquivos como tailwind.config.js ou postcss.config.js:

JavaScript

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Configurando o arquivo de estilos

No seu arquivo de estilos global (geralmente localizado em src/assets/main.css ou src/assets/tailwind.css), substitua as diretivas antigas pela nova importação simplificada do framework:

CSS

@import "tailwindcss";

Certifique-se de que este arquivo está sendo importado no ponto de entrada da sua aplicação, dentro do src/main.js ou src/main.ts:

JavaScript

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

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

Usando Tailwind em componentes Vue

Com a configuração concluída, as classes utilitárias já estão prontas para serem aplicadas diretamente nas tags dentro do <template> do seu componente:

HTML

<template>
  <div class="p-6 bg-white rounded shadow max-w-md mx-auto my-4">
    <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>

Classes condicionais no Vue

O sistema de data binding do Vue funciona perfeitamente com o Tailwind. Ao alternar classes dinamicamente com :class, dê preferência a passar a classe inteira para garantir que o motor de compilação estática do Tailwind a detecte corretamente:

HTML

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

<script setup>
import { ref } from 'vue'
const ativo = ref(true)
</script>

Organização dos estilos e customização

Como o Tailwind cobre a maior parte das necessidades de estilização diretamente nas classes do template, o uso da tag <style scoped> nativa do Vue torna-se muito menos frequente.

Caso precise criar utilitários globais reutilizáveis ou adicionar tokens de design (como cores ou fontes personalizadas), gerencie tudo diretamente no seu arquivo CSS principal utilizando as novas diretivas:

CSS

@import "tailwindcss";

/* Customização do Tema */
@theme {
  --color-brand: #42b883;
}

/* Utilitário customizado reutilizável */
@utility btn-action {
  background-color: var(--color-brand);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
}

No seu componente Vue:

HTML

<button class="btn-action">Salvar</button>

Frameworks e bibliotecas úteis

O ecossistema do Vue integra-se de forma nativa a soluções focadas em Tailwind:

• PrimeVue / Radix Vue: Excelentes bibliotecas de componentes que oferecem suporte a temas não-estilizados (unstyled mode), ideais para você aplicar suas próprias classes utilitárias.

• Headless UI (Vue): Componentes de comportamento acessíveis (como modais e transições) construídos pela própria equipe do Tailwind.

• VueUse: Uma coleção massiva de utilitários de composição essenciais que facilitam tarefas como gerenciar o modo escuro coordenado com as classes do Tailwind.

Dica de produtividade

Instale a extensão oficial Tailwind CSS IntelliSense no VS Code. Ela fornece preenchimento automático em tempo real das classes dentro dos seus arquivos .vue, além de linting e validação inline dos estilos.

Build de produção

Durante o comando npm run build, o novo motor em Rust do Tailwind analisa o conteúdo de todos os seus templates Vue de forma estática. Ele extrai apenas as classes que encontrou e gera um arquivo CSS final extremamente enxuto, otimizado e minificado para produção.