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:
- 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 purgecom 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.