Estoy trabajando en un proyecto con Tailwind CSS 4 y me encontré con que el uso de plugins ha cambiado respecto a versiones anteriores.

Espero que este artículo ayude a quienes se enfrenten al mismo problema.

Para comenzar, debemos instalar el plugin que queremos utilizar. En este caso, instalaremos @tailwindcss/typography.

bun install -D @tailwindcss/typography

Luego, es necesario agregar el plugin en el archivo src/styles/global.css:

@plugin "@tailwindcss/typography";

Y listo, ahora podemos utilizar el plugin en nuestro proyecto.

<article
class="prose prose-invert"
>
    {{ markdown }}
</article>

También, para agregar todas las clases de Tailwind con una sola clase,

@layer base {
    .markdown {
        @apply prose prose-invert mx-auto;
    }
}

Con esto, al agregar únicamente la clase markdown a un elemento, se aplicarán todas las clases de Tailwind Typography que necesitemos.

<article
class="markdown"
>
    {{ markdown }}
</article>