Tailwind'de responsive text sizing için line-height'ı da otomatik scale eden bir sistem kurmak

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  theme: {
    // ... diğer theme ayarları
  },
  plugins: [
    plugin(function({ addUtilities, theme, e }) {
      const fontSizes = theme('fontSize');
      const newUtilities = {};

      Object.entries(fontSizes).forEach(([key, value]) => {
        // fontSize değeri array ise (örn: ['2rem', { lineHeight: '2.5rem' }])
        if (Array.isArray(value)) {
          const [fontSize, options] = value;
          // Eğer options'ta lineHeight zaten tanımlı değilse, biz hesaplayalım.
          if (!options.lineHeight) {
            const fontSizeNum = parseFloat(fontSize);
            const fontSizeUnit = fontSize.replace(/[0-9.]/g, '');

            // Temel bir çarpan belirleyelim. (Örnek: font-size  1.5)
            // Bu çarpanı ihtiyaca göre (başlık, paragraf) theme'den alabilirsiniz.
            const lineHeightMultiplier = 1.5;
            const calculatedLineHeight = `${fontSizeNum  lineHeightMultiplier}${fontSizeUnit}`;

            // Yeni utility'yi oluştur.
            newUtilities[`.${e(`text-${key}`)}`] = {
              'font-size': fontSize,
              'line-height': calculatedLineHeight,
            };
          }
        }
        // fontSize değeri string ise (örn: '1rem')
        else if (typeof value === 'string') {
          const fontSizeNum = parseFloat(value);
          const fontSizeUnit = value.replace(/[0-9.]/g, '');
          const lineHeightMultiplier = 1.5;
          const calculatedLineHeight = `${fontSizeNum  lineHeightMultiplier}${fontSizeUnit}`;

          newUtilities[`.${e(`text-${key}`)}`] = {
            'font-size': value,
            'line-height': calculatedLineHeight,
          };
        }
      });

      addUtilities(newUtilities, ['responsive']);
    }),
  ],
};

// tailwind.config.js - Theme kısmı
theme: {
  extend: {
    lineHeightMultipliers: {
      heading: 1.2,
      body: 1.6,
    },
    fontSize: {
      'display': ['4rem', { fontWeight: 'bold' }], // lineHeight otomatik eklenecek
      'lead': ['1.25rem'], // lineHeight otomatik eklenecek
    }
  }
},

// Plugin içinde, key'e göre multiplier seç (basit bir eşleme yapabilirsin)
// Örn: 'display' ve 'h1', 'h2' gibi key'ler için 'heading' çarpanını, diğerleri için 'body' çarpanını kullan.