排版
用于显示标题、段落和文本内容。利用 TailwindCSS 强大的原子类系统,Resolid React UI 可以实现各种类型的布局。 更具体的例子请参考 TailwindCSS 文档。 在这里,我举几个典型的例子。
字体
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="font-sans">The quick brown fox jumps over the lazy dog.</p>
<p className="font-serif">The quick brown fox jumps over the lazy dog.</p>
<p className="font-mono">The quick brown fox jumps over the lazy dog.</p>
字体大小
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="text-xs">The quick brown fox jumps over the lazy dog.</p>
<p className="text-sm">The quick brown fox jumps over the lazy dog.</p>
<p className="text-base">The quick brown fox jumps over the lazy dog.</p>
<p className="text-lg">The quick brown fox jumps over the lazy dog.</p>
<p className="text-xl">The quick brown fox jumps over the lazy dog. </p>
字体粗细
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="font-light">The quick brown fox jumps over the lazy dog.</p>
<p className="font-normal">The quick brown fox jumps over the lazy dog.</p>
<p className="font-medium">The quick brown fox jumps over the lazy dog.</p>
<p className="font-bold">The quick brown fox jumps over the lazy dog.</p>
字体样式
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="italic">The quick brown fox jumps over the lazy dog.</p>
<p className="not-italic">The quick brown fox jumps over the lazy dog.</p>
文字装饰
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="underline">The quick brown fox jumps over the lazy dog.</p>
<p className="overline">The quick brown fox jumps over the lazy dog.</p>
<p className="line-through">The quick brown fox jumps over the lazy dog.</p>
<p className="no-underline">The quick brown fox jumps over the lazy dog.</p>