Tutorials


Adjusting Line Height in Tailwind CSS


Adjusting Line Height in Tailwind CSS

Line height in Tailwind CSS controls the vertical spacing between lines of text, which can significantly affect the readability and aesthetics of text blocks. Tailwind provides utilities to set line height easily, allowing you to manage text spacing without writing custom CSS.

1. Line Height Utilities

Tailwind CSS offers predefined line height utilities that you can apply directly to your text elements. These utilities use a scale to adjust the line height, ranging from tight to loose.

Utility Classes

  • leading-{value}: Sets the line height of the text.

Common Values:

  • leading-tight: Sets the line height to a tight value.
  • leading-snug: Sets the line height to a snug value.
  • leading-normal: Sets the line height to a normal value (default).
  • leading-relaxed: Sets the line height to a relaxed value.
  • leading-loose: Sets the line height to a loose value.

Values (in tailwind.config.js):

  • leading-tight: 1.25 (125%)
  • leading-snug: 1.375 (137.5%)
  • leading-normal: 1.5 (150%)
  • leading-relaxed: 1.625 (162.5%)
  • leading-loose: 2 (200%)

Example Usage:

Tight Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tight Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-tight bg-blue-500 text-white p-4">
    This is an example of tight line height. The lines are very close to each other.
  </p>
</body>
</html>

Snug Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snug Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-snug bg-red-500 text-white p-4">
    This is an example of snug line height. The lines are slightly more spaced out than tight.
  </p>
</body>
</html>

Normal Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Normal Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-normal bg-green-500 text-white p-4">
    This is an example of normal line height. The spacing is the default for this text.
  </p>
</body>
</html>

Relaxed Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relaxed Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-relaxed bg-yellow-500 text-white p-4">
    This is an example of relaxed line height. The lines are more spaced out for easier reading.
  </p>
</body>
</html>

Loose Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loose Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-loose bg-gray-500 text-white p-4">
    This is an example of loose line height. The lines are very spaced out.
  </p>
</body>
</html>

2. Customizing Line Height

You can customize the line heights in your tailwind.config.js file if you need values outside of the default scale.

Configuration Example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        'super-tight': '1.1',
      },
    },
  },
};

Using Custom Line Heights:

Extra Loose Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extra Loose Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-extra-loose bg-gray-800 text-white p-4">
    This is an example of extra loose line height, which is even more spaced out than loose.
  </p>
</body>
</html>

Super Tight Line Height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Tight Line Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="leading-super-tight bg-blue-900 text-white p-4">
    This is an example of super tight line height, which is very close together.
  </p>
</body>
</html>

Summary

  • Line Height Utilities:

    • leading-tight: Tight line height (1.25).
    • leading-snug: Snug line height (1.375).
    • leading-normal: Normal line height (1.5).
    • leading-relaxed: Relaxed line height (1.625).
    • leading-loose: Loose line height (2).

  • Custom Line Heights:

    • You can define custom line heights in the tailwind.config.js file and use them in your HTML.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about