Tailwind CSS 行高

行高

用于控制元素的前行距（行高）的功能類。

相對行高

使用 ?leading-none?、 ?leading-tight?、 ?leading-snug?、 ?leading-normal?、 ?leading-relaxed? 和 ?leading-loose? 等功能類，根據(jù)元素當前的字體大小，給它一個相對的行高。

<p class="leading-none ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-tight ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-snug ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-normal ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-relaxed ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-loose ...">Lorem ipsum dolor sit amet ...</p>

固定行高

使用 ?leading-{size}? 功能類給一個元素一個固定的行高，而不管當前的字體大小。當您需要非常精確地控制一個元素的最終大小時，這些功能類非常有用。

<p class="leading-3 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-4 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-5 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-6 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-7 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-8 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-9 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-10 ...">Lorem ipsum dolor sit amet ...</p>

響應式

要在特定的斷點處控制元素的行高，請在任何現(xiàn)有的行高功能類前添加 ?{screen}:? 前綴。例如，使用 ?md:leading-loose? 來僅在中等大小及以上的屏幕應用 ?leading-loose? 功能類。

<p class="leading-none md:leading-loose ...">Lorem ipsum dolor sit amet ...</p>

關于 Tailwind 的響應式設計功能的更多信息，請查看 響應式設計 文檔。

需要注意的是，默認情況下，Tailwind 的 font-size 實用程序都設置了自己的默認行高。這意味著任何時候您使用響應式字體大小實用程序（如 ?sm:text-xl?），您為較小斷點設置的任何顯式行高都將被覆蓋。

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Lorem ipsum dolor sit amet ...
</p>

如果要在設置斷點特定字體大小后覆蓋默認行高，請確保也設置斷點特定行高：

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Lorem ipsum dolor sit amet ...
</p>

在不同的字體大小上使用相同的行高通常不會給您帶來良好的排版效果。 line-height 通常會隨著 font-size 的增加而變小，因此這里的默認行為通常會為您節(jié)省大量工作。如果您發(fā)現(xiàn)自己在與它作斗爭，您始終可以自定義字體大小比例且不包括默認行高。

自定義

默認情況下，Tailwind 提供六個 relative 實用程序和八個 ?line-height? 實用程序。您可以通過自定義 Tailwind 主題配置的 ?lineHeight ?部分來更改、添加或刪除這些內容。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        lineHeight: {
         'extra-loose': '2.5',
         '12': '3rem',
        }
      }
    }
  }

變體

默認情況下， 針對 line height 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?lineHeight ?屬性來控制為 line height 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       lineHeight: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項目中使用 line height 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?lineHeight ?屬性設置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     lineHeight: false,
    }
  }