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?

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay