Utilities for controlling the font size of an element.
<p class="text-xs ...">The quick brown fox ...</p>
<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>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>
To control the font size of an element at a specific breakpoint, add a {screen}:
prefix to any existing font size utility. For example, use md:text-lg
to apply the text-lg
utility at only medium screen sizes and above.
<p class="text-base md:text-lg ...">The quick brown fox jumps over the lazy dog.</p>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
By default, Tailwind provides 10 font-size
utilities. You change, add, or remove these by editing the theme.fontSize
section of your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
fontSize: {
- 'xs': '.75rem',
- 'sm': '.875rem',
+ 'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
- '3xl': '1.875rem',
- '4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
+ '7xl': '5rem',
}
}
}
You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight]
in your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
fontSize: {
sm: ['14px', '20px'],
base: ['16px', '24px'],
lg: ['20px', '28px'],
xl: ['24px', '32px'],
}
}
}
You can also specify a default line-height using object syntax:
// tailwind.config.js
module.exports = {
theme: {
fontSize: {
sm: ['14px', {
lineHeight: '20px',
}],
}
}
}
We already provide default line heights for each .text-{size}
class.
If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form [fontSize, { letterSpacing, lineHeight }]
in your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
fontSize: {
'2xl': ['24px', {
letterSpacing: '-0.01em',
}],
// Or with a default line-height as well
'3xl': ['32px', {
letterSpacing: '-0.02em',
lineHeight: '40px',
}],
}
}
}
默認情況下, 只有 響應式 的 text sizing 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 fontSize
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ fontSize: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 text sizing 功能,可以在你的設定檔裡的 corePlugins
屬性中將 fontSize
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ fontSize: false,
}
}