Tailwind Typography Kullanımı

Tailwind Typography Eklentisi

WordPress'ten gelen içerik <h2>, <p>, <ul> gibi ham HTML etiketleri içerir. Tailwind varsayılan olarak tüm stilleri sıfırladığı için bu etiketler düz metin gibi görünür.

1. Eklentiyi Kurun

Terminalde şu komutu çalıştırın:

npm install -D @tailwindcss/typography

2. Config'e Ekleyin

tailwind.config.ts (veya .js) dosyasını açın ve plugins kısmına ekleyin:

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  // ... diğer ayarlar
  plugins: [
    require("@tailwindcss/typography"),
  ],
};
export default config;

3. Kullanım

İçeriği render ettiğiniz div veya article etiketine prose sınıfını ekleyin:

<div className="prose" dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

4. Özelleştirme

Farklı boyutlar ve renkler için ek sınıflar kullanabilirsiniz:

prose-sm, prose-lg, prose-xl (Boyutlar)
prose-blue, prose-indigo (Link renkleri)
prose-invert (Koyu mod desteği)