Descubra como combinar Nuxt.js com Tailwind CSS pode resultar em um desenvolvimento web rápido e visualmente impressionante.
No cenário em evolução do web design e desenvolvimento, eficiência e estética andam de mãos dadas. Com ferramentas como Nuxt e Tailwind, você pode obter uma combinação perfeita de ambos aproveitando as estruturas de arquivo CSS corretas. Bem-vindo ao nosso tutorial sobre 'Simplifique seu design com Nuxt e Tailwind'. Quer você seja um desenvolvedor experiente familiarizado com a comunidade Nuxt e os serviços de desenvolvimento Vue ou um designer iniciante que está apenas começando a explorar as classes tailwind, este guia o guiará pelas etapas para integrar essas ferramentas poderosas. Garantindo que seus sites não sejam apenas visualmente atraentes com atributos de dados dinâmicos, mas também otimizados para desempenho, você estará equipado para aproveitar o melhor dos dois mundos. Mergulhe e descubra a sinergia de Nuxt e Tailwind!
O que é Nuxt.js?
Nuxt.js é uma estrutura gratuita e de código aberto construída sobre Vue.js. É bastante opinativo, especialmente quando você o compara ao Next.js do React. Esta ferramenta robusta permite que os desenvolvedores instalem dependências de seu repositório e criem aplicativos Vue.js de nível empresarial com recursos de SSR (renderização do lado do servidor). Nuxt.js vem com caminhos de modelo baseados em arquivo, divisão de código, importações automáticas, utilitários de busca de dados compatíveis com SSR, suporte a TypeScript e ferramentas de construção via Vite prontas para uso.
Mas o que é renderização no servidor e por que ela é boa?
Em termos leigos, com estruturas como Nuxt.js e Next.js (para desenvolvedores React), os desenvolvedores podem escrever aplicativos full-stack sem criar um servidor online de módulo via Node.js, Express.js, Nest.js ou qualquer outra linguagem ou quadro. O SSR nos permite escrever tudo relacionado aos nossos aplicativos dentro da mesma base de código, no mesmo projeto. SSR também é muito bom para SEO (otimização de mecanismo de pesquisa), tempo de carregamento inicial mais rápido, desempenho muito melhor com dispositivos de baixo custo e armazenamento em cache mais fácil.
O que é Tailwind CSS?
Tailwind CSS é uma estrutura CSS altamente popular que ajuda os desenvolvedores a escrever código CSS mais rápido, mais legível e de fácil manutenção. Com sua configuração tailwind exclusiva, a personalização se torna muito fácil. Embora Nuxt.js já forneça sua própria seção CSS no componente, facilitando uma configuração mais suave do servidor de desenvolvimento, a integração do Tailwind CSS oferece uma abordagem diferente. Pode parecer assustador no início, mas aumenta muito a produtividade do desenvolvedor quando ele ultrapassa a curva de aprendizado inicial.
No tutorial a seguir, criaremos um projeto Nuxt.Js do zero, adicionaremos Tailwind CSS a ele e construiremos um aplicativo de blog simples. Em vez de focar na lógica, vamos nos concentrar em como usar Nuxt.js e Tailwind CSS juntos.
Como instalar Tailwind CSS e Nuxt.JS
Para iniciar a integração do Nuxt.js com Tailwind CSS, certifique-se de ter todas as dependências de instalação do repositório necessárias. Comece instalando o Nuxt.js. Após a instalação, é crucial verificar as dependências dos pares. Depois que tudo estiver configurado, você poderá prosseguir com a configuração do seu servidor de desenvolvimento. Use o seguinte comando de terminal para inicializar seu projeto:
npx nuxi@latest init <project-name>
Aqui, em vez do nome do projeto, você pode querer escrever o nome do seu projeto, no nosso caso, é nuxt-tailwind.
Após a instalação, precisamos entrar nesse diretório e executar npm install ou yarn para instalar as dependências.
Então, precisamos instalar o Tailwind CSS para podermos usá-lo com Nuxt.js. Agora, a documentação oficial às vezes pode causar problemas. Mas o método que vamos seguir está funcionando perfeitamente no momento em que escrevo. Vamos adicionar Tailwind CSS como um módulo Nuxt.js. Para isso, dentro do diretório que acabamos de criar com nuxt CLI, inseriremos este comando no terminal
yarn add -D @nuxtjs/tailwindcss@latest
Em seguida, iremos para o arquivo nuxt.config.ts e alteraremos seu conteúdo com o seguinte:
//
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ("@nuxtjs/tailwindcss"),
});
Em seguida, iniciaremos o Tailwind CSS executando `npx tailwindcss init`
Crie o arquivo Main.CSS
Depois de fazer isso também, criaremos duas novas pastas e um novo arquivo main.css e colocaremos o seguinte código nele:
@tailwind base; @tailwind components; @tailwind utilities;
E esta é a rota do nosso arquivo main.css recém-criado: ./assets/css/main.css
Agora, se executarmos o aplicativo por yarn ou npm run dev, podemos tentar testar se nossa instalação foi bem-sucedida ou não.
Teste a instalação do Nuxt Tailwind
Para testá-lo, podemos acessar o arquivo app.vue e substituir seu conteúdo pelo seguinte:
<template> <h1 > Hello world! </h1> </template>
Agora, se as regras CSS do Tailwind forem aplicadas, devemos ver esta tela:
Construindo o projeto: um site de blog chamado Jingles
A melhor maneira de aprender é praticando. Agora que sabemos o que é Nuxt.js, o que é Tailwind CSS e já configuramos e executamos nossa aplicação, é hora de construir algo para ela para que o conhecimento fique conosco. Agora, antes de começar, se você nunca usou CSS em JS como Tailwind CSS antes, a forma como ele aborda o estilo pode parecer confusa, até mesmo assustadora no início. Aqui é importante lembrar que só avançamos quando nos encontramos em uma situação não tão familiar. Portanto, após este tutorial, Tailwind CSS deverá fazer sentido para nós e deveremos ser capazes de usá-lo em nossos projetos.
Uma última coisa antes de começarmos, lembre-se de que ao aprender uma estrutura CSS como o Tailwind CSS, faremos uso intenso da documentação oficial. Não estamos tentando memorizar nada, porque não precisamos. Os documentos oficiais são muito bons e podemos pesquisar facilmente o que quisermos.
Vamos começar construindo a barra de navegação para nossa aplicação. Tenha em mente que, por motivos heurísticos, este aplicativo não será responsivo a dispositivos móveis. Vamos nos concentrar apenas na versão desktop dele.
Construindo a NavBar
Comecemos pelo princípio: criaremos uma pasta de componentes e inseriremos um arquivo navbar.vue dentro dela. Então, em nosso arquivo app.vue, iremos importá-lo assim:
<template> <navbar /> </template> <script> import navbar from "./components/navbar.vue"; </script>
Agora podemos voltar para navbar.vue e começar a escrever código. Na seção de modelos, usaremos o flexbox para alcançar o resultado desejado.
Vamos adicionar a seguinte div:
<div ></div>
Nesta div, estamos fazendo o seguinte:
-exibição flexível
-justifique o conteúdo para o espaço entre, para que os elementos dentro dele sejam espaçados nos lados opostos do div
-alinhar itens ao centro
-faça a largura total da tela
-dê uma cor de fundo de #d60068
-dê um preenchimento de 5px em todos os lados
Veja, é assim que escrevemos CSS por meio do Tailwind CSS. Se você já usa o Vue.js, sabe que o Vue.js vem com sua própria seção de estilo, onde o desenvolvedor pode escrever CSS diretamente no componente. Em CSS em JS, não damos nomes de classes a elementos como divs, mas em vez disso, escrevemos as classes CSS desejadas diretamente dentro desse elemento como um nome de classe. Aqui, ao escrever flex e justify-center, estamos dizendo ao Tailwind CSS para aplicar as classes display:flex e justify-content:center a esta div. Como sabemos como implementar a classe CSS Tailwind e para qual classe CSS? Simplesmente referindo-se aos documentos oficiais.
Agora há muitas aulas lá, como sempre. Ao desenvolver ou ler o código, não precisamos procurar o nome da classe do elemento e, em seguida, encontrar a tag de classe correspondente ao nome da classe e ler o CSS a partir daí. Em vez disso, podemos lê-lo diretamente do próprio elemento. Essa é a beleza do CSS em JS.
Queremos adicionar quatro elementos dentro desta barra de navegação, um deles alinhado à esquerda e três deles à direita. Faremos novamente uso do flexbox e criaremos duas divs. A primeira div conterá o elemento à esquerda, e a segunda div levará mais três elementos dentro dela, para serem alinhados à direita com algum espaço entre eles. Como você pode ver, estamos mergulhando nosso plano visual em caixas flexíveis. Agora dentro da div anterior, adicionamos o seguinte trecho:
<div >Jingles</div> <div > <router-link to=" <router-link to="/about">About</router-link> <router-link to="/contact" >Contact</router-link > </div> </div>
O que estamos fazendo aqui é, com a primeira div, que é o elemento que ficará alinhado à esquerda, que contém o texto dos Jingles, estamos dando a ele um tamanho de texto xl, e uma espessura de fonte em negrito.
Em seguida, estamos criando outro container div, que conterá os três elementos à direita. Neste div contêiner, estamos novamente iniciando o flexbox escrevendo flex, justificando os elementos ao redor para que tenham algum espaço entre eles e dando a ele uma largura de 5/12 do div que o contém.
Dentro dele, temos três itens de link de roteador que ainda não criamos, mas que nos levarão aos seus respectivos endpoints assim que os criarmos, e apenas darão alguns estilos ao último, dando-lhe uma cor de fundo preta, uma cor de texto branca, um preenchimento de 2px em todos os lados e um raio de borda de 2xl (bastante).
E é isso. Criamos com sucesso a barra de navegação do nosso aplicativo. Agora, vamos criar a seção do herói.
Construindo a seção do herói
Agora, como fizemos com a barra de navegação, vamos criar um arquivo hero.vue dentro da pasta de componentes e importá-lo para nosso arquivo app.vue.
<template> <navbar /> <hero /> </template> <script> import navbar from "./components/navbar.vue"; import hero from "./components/hero.vue"; </script>
Então, iremos para o arquivo hero.vue e começaremos a escrever o código. Aqui, queremos ter três elementos um em cima do outro e, como esse é o comportamento padrão do navegador, não precisamos usar o flexbox aqui. Vejamos o seguinte trecho:
<template> <div > <div >Stay Hungry</div> <div > Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, accusantium eos dolores quisquam porro doloremque culpa reprehenderit fugiat modi commodi numquam exercitationem id voluptas tempora. Ea molestias minus maxime velit. </div> <div> <button >Start reading</button> </div> </div> </template>
O que está acontecendo aqui? Primeiro, no contêiner div, estamos fornecendo uma altura full com o comando h-full. Este full não significa tela inteira, se quiséssemos que ocupasse a tela inteira, diríamos h-screen, em vez disso, estamos dizendo que deve conter os elementos dentro dela e expandir de acordo. Então temos w-full, honestamente, aqui poderíamos muito bem dizer w-screen e isso não mudaria nada.
Como fizemos antes, damos a cor de fundo com o comando bg. Então temos os comandos py-5 e pl-10. Eles estão relacionados ao preenchimento. O primeiro significa dar um preenchimento de 5px a partir do eixo y, ou seja, de cima e de baixo. E o segundo diz que dê um preenchimento de 10px a partir da esquerda. Em seguida, damos a ele uma cor de texto preta e uma borda preta com largura de 1px. Veja, parece confuso no início. Porém, quanto mais você escreve Tailwind CSS, mais essas classes ficam gravadas em sua mente e mais rápido e produtivo você se torna.
Dentro dessa div, temos três elementos: um título, um corpo de texto que é lorem ipsum e um botão que diz começar a ler. Para o título, damos um texto de 7 xl e uma margem inferior de 5 px com o comando mb-5. Fazemos algo semelhante com o texto lorem, mas atribuímos a ele um tamanho de fonte 2xl. O botão tem fundo preto, texto branco, preenchimento de 2px em todos os lados e é arredondado.
E é isso. Criamos com sucesso a seção herói do nosso aplicativo. Agora, vamos criar alguns artigos para nosso aplicativo.
Construindo a seção de artigos
Queremos adicionar pelo menos quatro artigos ao nosso aplicativo. Para isso vamos fazer uso de adereços porque não queremos escrever tudo à mão. Como se diz no desenvolvimento de software, uma regra prática é o código SECO (não se repita).
Agora vamos criar um novo arquivo article.vue na pasta de componentes e adicionar este trecho dentro dele:
<!-- components/article.vue -->
<template>
<div >
<div>
<h2 >{{ title }}</h2>
<p>{{ content }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true,
},
content: {
type: String,
required: true,
},
},
};
</script>
<style></style>
Aqui estamos criando o modelo dos artigos que iremos exibir. Agora você sabe que m significa margem ep significa preenchimento, para fundo escrevemos bg e ao escrever text-xl estamos dando ao texto um tamanho de fonte maior. Mas estamos fazendo outra coisa também, algo que não fizemos antes, estamos fazendo uso da seção de scripts, que trata da lógica javascript.
Aqui, o que estamos usando é chamado de API de opções na terminologia Vue.js. Há também uma API de composição mais recente, mas vamos continuar com a API de opções antiga e bem conhecida para este tutorial. Se você é um desenvolvedor React e deseja mudar para Vue.js, a API de composição pode ser mais adequada para você, mas se você é um iniciante, a API de opções também é sólida.
Estamos definindo adereços, em adereços temos título e conteúdo. Fornecemos seus tipos e se eles são obrigatórios ou não. E dentro de nossa seção de modelos, estamos usando a “sintaxe do bigode” para exibir o título e o conteúdo do artigo. A sintaxe do bigode são as chaves duplas que você vê na seção do modelo. É usado para exibir dados da seção de script.
Agora, vamos importar este componente em nosso arquivo app.vue e usá-lo para exibir alguns artigos.
<template>
<navbar />
<hero />
<div >
<div
v-for="(article, index) in articles"
:key="index"
>
<article :title="article.title" :content="article.content" />
</div>
</div>
</template>
<script>
import Article from "~/components/article.vue";
import navbar from "./components/navbar.vue";
import hero from "./components/hero.vue";
export default {
components: {
Article,
navbar,
hero,
},
data {
return {
articles: (
{
id: 1,
title: "Article 1",
content: "Content of article 1...",
},
{
id: 2,
title: "Article 2",
content: "Content of article 2...",
},
{
id: 3,
title: "Article 3",
content: "Content of article 3...",
},
{
id: 4,
title: "Article 4",
content: "Content of article 4...",
},
),
};
},
};
</script>
Como você pode ver, adicionamos muitas coisas aqui. Até agora, importar e usar componentes não é segredo para nós. Além do nosso fluxo de trabalho geral, temos o método de dados na API de opções, este método de dados trata dos dados do componente. E estamos fazendo isso, criando um array de objetos chamados artigos e adicionando as coisas necessárias que queremos dentro dele. Temos o id, título e conteúdo. Você deve se lembrar que em nosso arquivo article.vue estávamos usando título e conteúdo para fins de exibição.
Agora, na seção de modelo, no componente hero, temos dois divs e o componente Artigo que importamos. A razão pela qual estamos criando duas divs é que queremos fazer uso do flexbox e em vez de alinhar os artigos um sobre o outro, queremos alinhá-los lado a lado, iniciando assim o flexbox na primeira div do contêiner.
Então, dentro dessa div, temos outra div que possui as tags de classe border, border color e width full. No Tailwind CSS, se quisermos adicionar uma borda a um elemento, primeiro precisamos iniciar a borda fornecendo a palavra-chave border que é seguida de como queremos que a borda seja estilizada.
Depois disso, temos uma palavra-chave v-for, que é a maneira específica do Vue.js de percorrer os elementos. Como você pode ver, ele pega as propriedades de artigo e índice na matriz de objetos de artigos, fornece o índice como a chave pelo comando :key=”index” e, para cada elemento dentro da matriz de objetos de artigos, ele cria um novo componente Artigo. . Aqui também, para passar os adereços, precisamos definir :title=”article.title” e o conteúdo da mesma maneira. Agora, nossa aplicação deve ficar assim:
Conclusão
Concluindo nosso tutorial Nuxt e Tailwind, esta combinação fornece claramente uma solução eficiente e elegante para web design. Em projetos que exigem alto desempenho, designs simplificados e recursos de SSR, um aplicativo Nuxt realmente brilha como uma solução exemplar. Porém, para sites muito simples ou sem foco em conteúdo dinâmico, isso pode ser um exagero.
Embora tanto o Nuxt quanto o Tailwind venham com uma curva de aprendizado, é um investimento que vale a pena. A modularidade do Tailwind permite aos usuários ampliar suas funcionalidades com plugins e a flexibilidade do Nuxt oferece vastas oportunidades para documentar e personalizar soluções web com precisão.
Considerando a mudança da indústria em direção a arquiteturas baseadas em componentes, muitas empresas agora terceirizam o desenvolvimento do Vue. Com a popularidade de novas estruturas, como Vue e o design que prioriza a utilidade, há um argumento convincente de que essas ferramentas continuarão significativas nos próximos tempos. Ao adotá-los hoje, você se posiciona na vanguarda, preparado para moldar a próxima onda de inovações na web.
Se você gostou disso, não deixe de conferir nossos outros artigos sobre desenvolvimento web.
- Uma alternativa melhor de PHP para projetos da Web?
- O Progressive Web App: como os PWAs estão evoluindo
- Python para desenvolvimento web
- Como proteger implantações de WordPress sem esgotar o orçamento da sua empresa
- Renderização do lado do servidor versus renderização do lado do cliente: um guia para desenvolvimento web
Perguntas frequentes
Quais são os principais benefícios da integração do Tailwind CSS com um aplicativo Nuxt?
A integração do Tailwind CSS com um aplicativo Nuxt permite que você aproveite um estilo simplificado que prioriza a utilidade, ciclos de desenvolvimento mais rápidos e consistência de design aprimorada. E, com desenvolvedores Vue especializados contratados, eles podem otimizar os benefícios da renderização do lado do servidor do Nuxt para obter desempenho de alto nível.
Como o SSR (Server-Side Rendering) no Nuxt melhora o desempenho da web quando combinado com a abordagem de design que prioriza a utilidade do Tailwind?
Quando Nuxt faz sua mágica SSR, as páginas aparecem super rápido e são otimizadas para SEO. Mas você sabia que, embora o React SSR ofereça um benefício semelhante, o design utilitário do Tailwind entra em ação para facilitar o estilo? Portanto, combinar o carregamento rápido do Nuxt com o Tailwind significa que seu site não apenas parece elegante, mas também funciona como um campeão. É como obter o melhor dos dois mundos!
Posso usar componentes Vue existentes em um aplicativo Nuxt com Tailwind e há alguma consideração especial para estilo?
Sim, você pode usar componentes Vue existentes, incluindo aqueles de estruturas de UI e bibliotecas de componentes, em um aplicativo Nuxt com Tailwind. No entanto, certifique-se de que as classes de utilitário do Tailwind não entrem em conflito com os estilos de componentes existentes e seja consistente na aplicação de sua abordagem de design.
Fonte: BairesDev
