Como instalar TailwindCss no Nuxt 3

Laura Simoni — Fri, 22 Dec 2023 11:35:11 +0000

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

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;

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: {},
    },
  },
})

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

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

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

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

DEV Community: Laura Simoni

Como instalar TailwindCss no Nuxt 3

O problema:

Instalando Tailwind

Instalando Tailwind Typography