#Letter Spacing
These are utility classes that specify the letter spacing (tracking) of an element.
Class | Styles |
---|---|
tracking-tightest |
|
tracking-tighter |
|
tracking-tight |
|
tracking-normal |
|
tracking-loose |
|
tracking-looser |
|
tracking-loosest |
|
These are utility classes that specify the letter spacing (tracking) of an element.
Class | Styles |
---|---|
tracking-tightest |
|
tracking-tighter |
|
tracking-tight |
|
tracking-normal |
|
tracking-loose |
|
tracking-looser |
|
tracking-loosest |
|
Below is a demo of all utility classes that apply a border radius of some sort. The syntax follows the form of u-round-[xs|sm|md|lg|xl|full]
.
tracking-tightest
tracking-tighter
tracking-tight
tracking-normal
tracking-loose
tracking-looser
tracking-loosest
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-tightest</b>
</p>
<h4 class="tracking-tightest font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-tighter</b>
</p>
<h4 class="tracking-tighter font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-tight</b>
</p>
<h4 class="tracking-tight font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-normal</b>
</p>
<h4 class="tracking-normal font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-loose</b>
</p>
<h4 class="tracking-loose font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-looser</b>
</p>
<h4 class="tracking-looser font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="mb-4">
<p class="text-gray-600 mb-0">
<b>tracking-loosest</b>
</p>
<h4 class="tracking-loosest font-normal mt-0">The quick brown fox jumps over the lazy dog.</h4>
</div>
The classes specified above are the default utility classes for setting the border-radius property. You can add, change, or remove classes within the _config.scss
file of Cirrus.
// _config.scss
$config: (
extend: (
letter-spacing: (
2x-tighter: '-.1em'
)
)
) !default;
This would generate the following classes.
.tracking-2x-tighter {
letter-spacing: -.1rem !important;
}
Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.