排版
用于控制文本样式的工具。
¥Basic usage
¥Italicizing text
italic
工具可用于将文本设为斜体。同样,not-italic
工具可用于正常显示文本 - 通常用于在不同断点处重置斜体文本。
¥The italic
utility can be used to make text italic. Likewise, the not-italic
utility can be used to display text normally — typically to reset italic text at different breakpoints.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="italic ...">The quick brown fox ...</p>
<p class="not-italic ...">The quick brown fox ...</p>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:not-italic
to only apply the not-italic
utility on hover.
<p class="italic hover:not-italic">
<!-- ... -->
</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:not-italic
to apply the not-italic
utility at only medium screen sizes and above.
<p class="italic md:not-italic">
<!-- ... -->
</p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.