TailwindCSS is known for the “easy to remember classes” but when it comes to line-height
in TailwindCSS, it’s not easy to remember the class. Here is a complete guide to using the line-height
in TailwindCSS.
Line Height Classes in TailwindCSS
By default, there are different classes to use line-height
in TailwindCSS. Starting from leading-3
and ending with leading-10
adds different line heights to text elements. There are some other classes that start after leading-10
. Those classes are leading-tight
, leading-snug
, leading-normal
, leading-relaxed
, leading-loose
. Here is an example of using leading
classes in TailwindCSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p class="text-lg font-normal leading-3"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="text-lg font-normal leading-5"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="text-lg font-normal leading-6"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="text-lg font-normal leading-8"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="text-lg font-normal leading-10"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> |
Here is a working code example and you can see the output in the screenshot below.
Using Line Height with Arbitrary Value in TailwindCSS
You can use the arbitrary values in TailwindCSS to add your custom line-height
value. Here is an example of adding custom values for line-height
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p class="leading-[10px]"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="leading-[20px]"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="leading-[30px]"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="leading-[40px]"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="leading-[50px]"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> |
Adding Line Height in Tailwind Config File
If you are following a design system and want to add your custom line-height
classes to use everywhere. Here is how you can add it in the Tailwind config file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = { theme: { extend: { lineHeight: { 'extra-loose': '2.5', '12': '3rem', '14': '4rem', '16': '5rem', } } }, plugins: [], } |
Then, in your HTML, you can use these classes the same as other classes. Here is how you’ll use them.
1 2 3 4 5 6 7 8 9 10 |
<p class="leading-extra-loose"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> <p class="leading-14"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui voluptas minima eum laboriosam optio quibusdam earum debitis </p> |
Adding Line Height to Paragraphs and Headings as Default
You can also add line-height
to paragraphs, headings, and other elements as default. For this, you need to edit the base layer in Tailwind CSS. Here is an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@tailwind base; @tailwind components; @tailwind utilities; @layer base{ h1{ line-height: 20px; } h2{ line-height: 25px; } p{ line-height: 30px; } } |
Conclusion
The line-height
class in TailwindCSS is called leading-
. There are some default classes in TailwindCSS to add line-height
but you can always add your own. If you are following a design system and want to add a default line-height
values to text elements, you can edit the base layer in TailwindCSS.