排版
用于控制元素字体平滑的工具。
¥Basic usage
¥Applying font smoothing
使用 subpixel-antialiased
工具使用子像素抗锯齿渲染文本,使用 antialiased
工具使用灰度抗锯齿渲染文本。
¥Use the subpixel-antialiased
utility to render text using subpixel antialiasing and the antialiased
utility to render text using grayscale antialiasing.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="subpixel-antialiased ...">The quick brown fox ...</p>
<p class="antialiased ...">The quick brown fox ...</p>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:subpixel-antialiased
to only apply the subpixel-antialiased
utility on hover.
<p class="antialiased hover:subpixel-antialiased">
<!-- ... -->
</p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:subpixel-antialiased
to apply the subpixel-antialiased
utility at only medium screen sizes and above.
<p class="antialiased md:subpixel-antialiased">
<!-- ... -->
</p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.