Tailwind CSS tutorial #22: Line Height
Published: 2022-11-29 10:51:29

In the article, we will go into detail on how to use `Line Height`.

## Line Height
**Format**
> `leading-{normal|relaxed|loose}`

| Tailwind Class | CSS Property |
| ------ | ------ |
| `leading-3		` | ` line-height: .75rem; /* 12px */`|
| `leading-4		` | `line-height: 1rem; /* 16px */`|
| `leading-5	` | `line-height: 1.25rem; /* 20px */`|
| `leading-6		` | `line-height: 1.5rem; /* 24px */`|
| `leading-7		` | `lline-height: 1.75rem; /* 28px */`|
| `leading-8	` | `line-height: 2rem; /* 32px */`|
| `leading-9		` | `line-height: 2.25rem; /* 36px */ `|
| `leading-10		` | `line-height: 2.5rem; /* 40px */`|
| `leading-none		` | ` line-height: 1;`|
| `leading-tight	` | `line-height: 1.25;`|
| `leading-snug			` | ` line-height: 1.375;`|
| `leading-normal		` | `line-height: 1.5;`|
| `leading-relaxed		` | ` line-height: 1.625;`|
| `leading-loose		` | `line-height: 2;`|

## **Code**
```html
<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <p class="text-md leading-normal">Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villagers.</p>  
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">letter-spacing:</span>: -0.05em</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">leading-normal</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <p class="text-md leading-relaxed ">Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villagers.</p>  
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">letter-spacing</span>: -0.025em</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">leading-relaxed </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <p class="text-md leading-loose">Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villagers.</p>  
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">letter-spacing:</span>: 0</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">leading-loose</div>
  </li>
</ul
```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Line%20Height.html)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxwqi1ajsga8kam234xn.png)


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Letter Spacing](https://dev.to/shubhicodes/tailwind-css-tutorial-21-letter-spacing-m2f), [GitHub Profile](https://dev.to/shubhicodes/why-your-github-profile-should-stand-out-20p3) and [Font Variant Numeric](https://dev.to/shubhicodes/tailwind-css-tutorial-20-font-variant-numeric-1656).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi) & [LinkedIn](https://www.linkedin.com/in/shubhangi-m/).

Keep learning! Keep coding!! 💛