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?
Top comments (0)