Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS Font-Size ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

55 views

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>
text-xs font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
text-3xl font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */
text-4xl font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */
text-5xl font-size: 3rem; /* 48px */ line-height: 1;
text-6xl font-size: 3.75rem; /* 60px */ line-height: 1;
text-7xl font-size: 4.5rem; /* 72px */ line-height: 1;
text-8xl font-size: 6rem; /* 96px */ line-height: 1;
text-9xl font-size: 8rem; /* 128px */ line-height: 1;

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...