Cirrus

#Letter Spacing

New
0.7.0

These are utility classes that specify the letter spacing (tracking) of an element.

ClassStyles
tracking-tightest
letter-spacing: -.075em !important
tracking-tighter
letter-spacing: -.05em !important
tracking-tight
letter-spacing: -.025em !important
tracking-normal
letter-spacing: 0 !important
tracking-loose
letter-spacing: .025em !important
tracking-looser
letter-spacing: .05em !important
tracking-loosest
letter-spacing: .1em !important
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Below is a demo of all utility classes that apply letter spacing styles.

tracking-tightest

The quick brown fox jumps over the lazy dog.

tracking-tighter

The quick brown fox jumps over the lazy dog.

tracking-tight

The quick brown fox jumps over the lazy dog.

tracking-normal

The quick brown fox jumps over the lazy dog.

tracking-loose

The quick brown fox jumps over the lazy dog.

tracking-looser

The quick brown fox jumps over the lazy dog.

tracking-loosest

The quick brown fox jumps over the lazy dog.

<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>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$LETTER-SPACING: true,
    )
) !default;

All utility classes mentioned here support viewport based application. All you need to do is add a <viewport>:<class> at the end of the class(es) you are using. For example, use md:tracking-tight to apply tracking-tight on medium screens and above.

<div class="md:tracking-tight">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting the letter-spacing property. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        letter-spacing: (
            2x-tighter: '-.1rem'
        )
    )
) !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.