Letter spacing

Tailwind CSS Letter spacing

Use responsive letter spacing styles with TW elements. This is a simple example of how quickly you can change the spaces between letters.

Basic example

To change the space between letters use the .tracking-{spacing} class.

This is the text with .tracking-tighter class.

This is the text with .tracking-tight class.

This is the text with .tracking-normal class.

This is the text with .tracking-wide class.

This is the text with .tracking-wider class.

This is the text with .tracking-widest class.

HTML

        
            
        <p class="tracking-tighter">
          This is the text with .tracking-tighter class.
        </p>
        <p class="tracking-tight">
          This is the text with .tracking-tight class.
        </p>
        <p class="tracking-normal">
          This is the text with .tracking-normal class.
        </p>
        <p class="tracking-wide">This is the text with .tracking-wide class.</p>
        <p class="tracking-wider">
          This is the text with .tracking-wider class.
        </p>
        <p class="tracking-widest">
          This is the text with .tracking-widest class.
        </p>

Letter spacing

Tailwind CSS Letter spacing

Basic example

Access restricted

To view this section you must have an active PRO account

Letter spacing

Tailwind CSS Letter spacing

Basic example

Related resources