DEV Community

Laura Simoni
Laura Simoni

Posted on

Como instalar TailwindCss no Nuxt 3

O problema:

Estou fazendo o curso mastering nuxt 3 e me peguei com o seguinte problema:
Fiz uma instalação limpa do nuxt3 mas ia precisar do tailwind + tailwind typography no projeto... Eu não queria pegar o codigo pronto do curso, quis instalar eu mesma, então aqui vai a papinha :D

Instalando Tailwind

Primeiro temos que instalar o tailwind e suas dependências no projeto, eu estou usando o npm.

Em seguida o comando init - isso faz com que o arquivo tailwind.config.js seja gerado.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Feito isto, precisamos criar o arquivo main.css que vai conter as diretivas do tailwind.
no meu caso ficou assim:
Image description

e o conteúdo do arquivo main.css será:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

agora, no nuxt.config.ts, precisamos importar tudo isso para que o tailwind funcione:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Pronto, o Tailwind já está instalado! Se você iniciar o server agora, já pode usar.
Mas se ainda quiser instalar o plugin tailwind typography, lê mais um pouquinho aí pra baixo :D

Instalando Tailwind Typography

Tá, eu fiz um drama, mas a coisa na verdade é muito simples.
é só instalar o tailwind typography com npm:

npm install -D @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

e depois editar o tailwind.config.js adicionando esse import:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'), // é só isso aqui
    // ...
  ],
}
Enter fullscreen mode Exit fullscreen mode

e pronto, no meu projeto ficou funcionando sem problemas e no de vocês?

Top comments (0)