CSS: font-size:

TailwindCSS: text-

<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

Satır yüksekliğini ayarlama:
Herhangi bir yazı tipi boyutu yardımcı programına bir satır yüksekliği değiştiricisi ekleyerek yazı tipi boyutunu ayarlarken aynı zamanda bir öğenin satır yüksekliğini de ayarlayın. Örneğin, 1,25rem yazı tipi boyutunu 2rem satır yüksekliğiyle ayarlamak için text-xl/8 kullanın.

Satır yüksekliği ölçeğinizde tanımlanan herhangi bir değeri kullanabilir veya tasarım belirteçlerinizden sapmanız gerekiyorsa rastgele değerler kullanabilirsiniz.

<p class="text-sm/[17px] ..."></p>

tailwind.config.js dosyanızın theme.fontSize bölümünü kullanarak kendi özel yazı tipi boyutu yardımcı programlarınızı yapılandırabilirsiniz.

module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}

Keyfi değerler:
Temanıza dahil edilmesi mantıklı olmayan tek seferlik bir yazı tipi boyutu değeri kullanmanız gerekiyorsa, herhangi bir rasgele değer kullanarak anında bir özellik oluşturmak için köşeli parantez kullanın.

<p class="text-[14px]">
  <!-- ... -->
</p>