Criando componentes Vue 3 com Tailwind CSS

Vue é um framework JavaScript popular para criar interfaces web versáteis. Entre seus recursos mais atraentes estão a integração fácil a bases de código existentes e a estrutura leve, que facilitam o uso por desenvolvedores em projetos de frontend.

No centro do Vue está uma abordagem de componentes combináveis para criar aplicações web com interface de usuário. Componentes são trechos de código reutilizáveis que você pode usar como blocos de construção das suas aplicações. O modelo de componentes do Vue permite criar componentes independentes, com lógica, conteúdo e estilos em um só lugar.

Para estilizar esses componentes, você pode usar um framework como Tailwind CSS e incluir os estilos diretamente na marcação, encapsulando ainda mais o componente. Tailwind CSS é um framework CSS que reúne classes reutilizáveis para estilizar elementos de interface do usuário (UI). Você pode usar essas classes para aplicar elementos visuais como fontes, cores, preenchimento, margens, animações e transições. Por exemplo, o atributo text-black exibe todo o texto de um elemento em preto. Essas classes são combináveis e podem ser usadas em conjunto para implementar qualquer design.

Neste tutorial, você vai aprender a criar componentes Vue 3 com Tailwind CSS desenvolvendo um componente de cartão de artigo responsivo. O código completo do projeto está disponível aqui.

Pré-requisitos

Para acompanhar o tutorial, você vai precisar de:

• Uma versão atualizada do Node.js e o npm instalados

• Um editor de texto, como o Visual Studio Code (VS Code)

• Conhecimentos de linha de comando

• Familiaridade com Vue e CSS

Criando seus próprios componentes Vue 3 com Tailwind

Para começar, crie um novo projeto Vue 3. Execute o comando a seguir no terminal para instalar e executar o create-vue, a ferramenta oficial de scaffolding de projetos Vue para criar projetos com vite:

1npm init vue@latest

Você verá uma lista de recursos opcionais. Dê ao projeto o nome vue-tailwindcss e selecione No para as demais opções.

1√ Project name: ... vue-tailwindcss
2√ Add TypeScript? ... No / Yes
3√ Add JSX Support? ... No / Yes
4√ Add Vue Router for Single Page Application development? ... No / Yes
5√ Add Pinia for state management? ... No / Yes
6√ Add Vitest for Unit Testing? ... No / Yes
7√ Add an End-to-End Testing Solution? » No
8√ Add ESLint for code quality? ... No / Yes
9√ Add Prettier for code formatting? ... No / Yes

Agora, acesse a pasta do projeto com cd vue-tailwindcss e execute npm install para instalar pelo npm as dependências de código aberto do projeto.

Execute npm run dev para iniciar a aplicação em um ambiente de desenvolvimento.

Esse comando deve iniciar o aplicativo no servidor local:

Acesse o URL local indicado para visualizar o aplicativo:

Agora é hora de configurar o Tailwind CSS no aplicativo Vue.

Como configurar o Tailwind com Vue

Para começar, execute o comando a seguir no terminal:

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

Esse comando instala o Tailwind CSS e suas dependências complementares (autoprefixer e postcss) pelo npm.

Em seguida, gere os arquivos tailwind.config.js e postcss.config.js executando o comando abaixo. Você vai usar esses arquivos para configurar e personalizar o Tailwind:

1npx tailwindcss init -p

Esse comando deve criar o arquivo tailwind.config.js na raiz do projeto com estes detalhes:

1   module.exports = {
2   content: [],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7 }

Você também criou o arquivo postcss.config.js e configurou os plugins tailwindcss e autoprefixer:

1  module.exports = {
2   plugins: {
3     tailwindcss: {},
4     autoprefixer: {},
5   },
6 }

Em tailwind.config.js, altere o array content para incluir todos os caminhos das suas páginas e dos seus componentes. Isso configura o Tailwind para remover do resultado final as classes CSS não utilizadas, reduzindo o tamanho do arquivo.

Agora, o arquivo tailwind.config.js deve estar assim:

1  module.exports = {
2   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7  };

Em seguida, crie um arquivo chamado index.css na pasta src do projeto e adicione o seguinte:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Você usou a diretiva @tailwind para incluir no projeto os estilos base, de componentes e de utilitários do Tailwind. Mais tarde, ao compilar o projeto, o Tailwind substituirá automaticamente essas diretivas pelos estilos que você especificou.

Agora, importe index.css para o arquivo ./src/main.js para começar a usá-lo:

1import './index.css'

Lembre-se de excluir a linha que importa o arquivo assets/main.css. Assim, você evitará usar CSS puro.

Agora você já pode começar a criar componentes com Tailwind.

Como criar componentes Vue

Para aprender a usar o Tailwind em componentes Vue, crie um componente de cartão para um artigo.

Em seguida, crie um arquivo chamado ArticleCard.vue na pasta src/components. Adicione o código a seguir:

1<template>
2  <div>
3    <div>
4      <img src="../assets/coverimage.jpg" alt="Close-up of code" />
5    </div>
6    <div>
7      <div>Vue</div>
8      <a href="#">Building Vue 3 Components With Tailwind CSS</a>
9      <p>
10        Learn how to create visually stunning Vue components using the popular
11        utility-first CSS framework Tailwind.
12      </p>
13    </div>
14  </div>
15</template>

O código acima cria um template chamado ArticleCard, que define um componente de cartão composto por uma imagem e um resumo informativo do artigo.

Para exibi-lo no navegador, limpe a página inicial excluindo tudo do arquivo App.vue. Em seguida, importe o componente ArticleCard para a seção de script de App.vue:

1<script setup>
2import ArticleCard from "./components/ArticleCard.vue";
3</script>

Em seguida, use-o no template:

1<template>
2  <ArticleCard />
3</template>

Agora, o próximo passo é estilizar o cartão usando as classes utilitárias do Tailwind CSS.

Entenda as classes utilitárias

Com CSS puro — e alguns outros frameworks CSS — você pode usar classes CSS personalizadas para estilizar elementos em uma página.

Veja um exemplo de elemento de link estilizado com as classes link-wrapper e link:

1<template>
2  <div class="link-wrapper">
3    <a href="#" class="link">Building Vue 3 Components With Tailwind CSS</a>
4  </div>
5</template>
6<style>
7.link-wrapper {
8  padding: 8px;
9}
10.link {
11  font-weight: 500;
12  font-size: 1.125rem;
13  line-height: 1.75rem;
14  color: #000;
15}
16</style>

Por que usar o Tailwind CSS?

O problema dessa abordagem é que você precisa criar nomes de classe significativos sempre que quiser estilizar um elemento. Como alternativa, precisa se lembrar de nomes extremamente longos e descritivos sempre que quiser reutilizar uma classe. Além disso, é necessário escrever bastante CSS, já que cada nome de classe adicionado à página vem acompanhado de estilos. Assim, conforme sua aplicação cresce, os arquivos CSS também aumentam, contribuindo para o aumento do tamanho do bundle e deixando o carregamento mais lento.

No Tailwind CSS, porém, você pode usar classes CSS predefinidas chamadas classes utilitárias. Elas oferecem opções comuns de estilo, como flex, alinhamento de texto, borda, margem, preenchimento e cor. Com essas opções, você estiliza páginas sem escrever CSS.

Veja como ficaria o exemplo anterior do link estilizado com Tailwind CSS:

1<div class="p-8">
2    <a href="#" class="font-medium text-lg text-black">Vue + TailwindCSS</a>
3</div>

Agora, você substituiu o objeto de estilo e as classes personalizadas pelas seguintes classes utilitárias:

• p-8 define o preenchimento como 8 px.

• font-medium define o peso da fonte como 500 px.

• text-xl define o tamanho da fonte como 1.125 rem e a altura da linha como 1.75 rem.

• text-black define a cor do texto como preto.

Usar classes utilitárias reduz a quantidade de CSS e facilita que qualquer pessoa que consulte o código entenda a intenção dos elementos estilizados, sem precisar consultar uma folha de estilos.

O Tailwind oferece diversas classes utilitárias, que você encontra na documentação de utilitários.

Estilizando um componente de cartão com Tailwind CSS

Agora que você já conhece as classes utilitárias, é hora de estilizar o componente de cartão.

Comece alterando o arquivo src/components/ArticleCard.vue para usar as classes utilitárias do Tailwind:

1<template>
2  <div class="flex max-w-2xl mx-auto bg-white rounded-sm shadow-md">
3    <div>
4      <img
5        class="h-full w-full object-cover"
6        src="../assets/coverimage.jpg"
7        alt="Closeup code"
8      />
9    </div>
10    <div class="p-8">
11      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
12        Vue
13      </div>
14      <a
15        href="#"
16        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
17        >Building Vue 3 Components With Tailwind CSS
18      </a>
19      <p class="mt-2 text-sm text-slate-500">
20        Learn how to create visually stunning Vue components using the popular
21        utility-first CSS framework Tailwind.
22      </p>
23    </div>
24  </div>
25</template>

Com os novos estilos, o componente de cartão deve ficar assim:

Além das classes utilitárias, você usou modificadores para estilizar o cartão. Observe a classe hover:underline da tag <a/>, em que hover é o modificador.

No Tailwind, use modificadores no início do nome de uma classe utilitária para indicar o estado que você quer aplicar. No exemplo acima, você definiu o estado hover, mas também poderia definir o estado de foco com a classe focus:text-violet-200 ou o estado ativo com active:text-violet-600.

Você pode usar diferentes modificadores do Tailwind CSS conforme a condição que quiser aplicar. Para ver a lista completa, consulte a documentação do Tailwind CSS.

Até aqui, o componente de cartão está ótimo em telas maiores, mas fica cada vez mais apertado à medida que você reduz o tamanho da tela:

Felizmente, você pode alterar o layout do cartão conforme a largura da tela.

Como lidar com breakpoints no Tailwind CSS

O Tailwind CSS permite aplicar uma classe utilitária condicionalmente em diferentes breakpoints. Por padrão, há cinco breakpoints, cada um ativado a partir de uma largura mínima:

• sm — 640 px

• md — 768 px

• lg — 1024 px

• xl — 1280 px

• 2xl — 1536 px

Para aplicar um breakpoint, adicione-o antes da classe utilitária, seguido de dois-pontos (:).

1breakpoint:utility-class

Veja o botão a seguir:

1<button class="w-16 md:w-32 lg:w-48">
2  Submit
3</button>

O Tailwind aplica a classe w-16 em telas pequenas, w-32 em telas médias e w-48 em telas grandes.

Você pode usar breakpoints para alterar o layout, o tamanho, a cor ou qualquer outra propriedade sem usar media queries. Se os tamanhos padrão não atenderem às necessidades do seu design, você também pode personalizar os tamanhos de tela em tailwind.config.js.

Por exemplo, o código a seguir substitui o tamanho de tela lg:

1module.exports = {
2  theme: {
3    extend: {
4      screens: {
5        'lg': '960px',
6      },
7    },
8  },
9}

No componente de cartão de artigo, use breakpoints para alterar o layout do cartão e ajustar o tamanho da imagem:

Confira o código modificado abaixo. Observe as primeiras tags <div/> e <img/>:

1<template>
2  <div
3    class="md:flex md:max-w-2xl max-w-md mx-auto bg-white rounded-sm shadow-md overflow-hidden"
4  >
5    <div>
6      <img
7        class="h-48 w-full object-cover md:h-full"
8        src="../assets/coverimage.jpg"
9        alt="Closeup code"
10      />
11    </div>
12    <div class="p-8">
13      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
14        Vue
15      </div>
16      <a
17        href="#"
18        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
19        >Building Vue 3 Components With Tailwind CSS</a
20      >
21      <p class="mt-2 text-sm text-slate-500">
22        Learn how to create visually stunning Vue components using the popular
23        utility-first CSS framework Tailwind.
24      </p>
25    </div>
26  </div>
27</template>

Veja as alterações realizadas:

• Os modificadores md:flex e md:max-w-2xl transformam o componente de cartão em um contêiner flexível com largura máxima de 48 rem em telas médias e grandes. Em telas pequenas, a classe max-w-md define a largura como 28 rem.

• No elemento <img/>, md:h-full exibe a imagem na altura total em telas médias e grandes, enquanto a classe h-48 define a altura como 12 rem em telas menores.

Em uma tela pequena, o componente resultante fica assim:

Pronto! Agora você já pode criar componentes Vue com Tailwind CSS.

Depois de terminar de criar uma aplicação Vue, aprenda como implantá-la na Netlify com atualizações de segurança automáticas da Snyk. Crie uma conta gratuita e importe seu projeto para a Snyk hoje mesmo para encontrar e corrigir vulnerabilidades que possam estar ocultas nas dependências do projeto — e proteger sua aplicação contra XSS e outras ameaças à segurança.

Conclusão

Neste tutorial, você aprendeu a criar um componente Vue 3 com Tailwind CSS. Tailwind CSS é um framework utility-first que permite trabalhar com mais eficiência e agilidade na criação de componentes de UI. Você pode usar classes utilitárias para criar designs responsivos sem consultar folhas de estilos externas nem memorizar dezenas de nomes de classes. Com o Tailwind, você pode criar seu próprio sistema de design personalizando as classes padrão. Além disso, ele remove automaticamente todas as classes não utilizadas da compilação de produção, ajudando você a incluir menos código no produto final.