Crie Seu Primeiro Aplicativo Vue e Nuxt 3 com Tailwind
Neste tutorial, você aprenderá como criar um aplicativo básico usando Nuxt 3 e Tailwind. O Nuxt é um framework web construído com Vue.js que facilita a construção de aplicações web modernas.
Pré-requisitos
Para começar com o Nuxt, você precisará instalar as seguintes dependências:
- Node.js - visite nosso tutorial de instalação!
- Visual Studio Code (ou um editor/IDE de sua preferência)
- Volar (uma extensão do VSCode que fornece um servidor de linguagem para Vue.js, melhorando a experiência de trabalho com templates Vue.js)..
Criando um novo projeto Nuxt 3
Comece criando um novo projeto Nuxt 3 executando o seguinte comando no seu terminal:
$ npx nuxi init my-nuxt-app
Isso criará um novo projeto chamado
my-nuxt-app
no seu diretório atual.Instalando dependências
As dependências do projeto não são instaladas automaticamente. Você pode instalá-las executando:
$ cd my-nuxt-app && npm install
Configurando o Tailwind CSS
O Tailwind CSS requer Node.js 12.13.0 ou superior.
Instale o Tailwind via npm
Instale o
@nuxtjs/tailwindcss
bem como o Tailwind e suas dependências peer usando npm:npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
Adicione o módulo
@nuxtjs/tailwindcss
à seção buildModules
do seu arquivo nuxt.config.js
:// nuxt.config.js
export default {
buildModules: ['@nuxtjs/tailwindcss']
}
Crie seu arquivo de configuração
Em seguida, gere seu arquivo
tailwind.config.js
:npx tailwindcss init
Isso criará um arquivo
tailwind.config.js
mínimo na raiz do seu projeto:// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
No seu arquivo
tailwind.config.js
, configure a opção purge
com os caminhos para todas as suas páginas e componentes para que o Tailwind possa remover estilos não utilizados em builds de produção:// tailwind.config.js
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Saiba mais sobre a configuração do Tailwind na documentação de configuração.
Iniciando o servidor de desenvolvimento
Você pode iniciar o servidor de desenvolvimento executando:
$ npm run dev
O servidor de desenvolvimento estará rodando em localhost:3000. Abra isso no seu navegador para ver o projeto em ação.
Agora você deve ser capaz de usar o Tailwind CSS no seu projeto Nuxt.