Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.tracking-tight letter-spacing: -0.05em;
.tracking-normal letter-spacing: 0;
.tracking-wide letter-spacing: 0.05em;

Customizing

Responsive and State Variants

By default, only responsive variants are generated for tracking utilities.

You can control which variants are generated for the tracking utilities by modifying the tracking property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   tracking: ['responsive'],
+   tracking: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the tracking utilities in your project, you can disable them entirely by setting the tracking property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   tracking: ['responsive'],
+   tracking: false,
}
}