行高

用于控制页面元素行高的工具类。

Class reference

Class Properties
.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;

用法

通过 .leading-{size} 工具类控制页面元素的行高。

.leading-none

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-tight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-snug

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-relaxed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-loose

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

<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>

响应式

要控制某个页面元素在特定断点(breakpoint)处的行高,请在控制行高的工具类前面添加 {screen}: 前缀。例如,通过 md:leading-loose 使 leading-loose 工具类仅作用于中等及以上大小的屏幕。

如需进一步了解 Tailwind 的响应式设计功能,请参阅 响应式设计 章节。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

定制

行高

默认情况下,Tailwind 提供了 6 个 line-height 工具类。你可以在 Tailwind 配置文件中编辑 theme.lineHeight 配置段的内容来修改、添加或删除工具类。

// tailwind.config.js
module.exports = {
theme: {
lineHeight: {
      none: 1,
      tight: 1.25,
-     snug: 1.375,
      normal: 1.5,
-     relaxed: 1.625,
+     relaxed: 1.75,
      loose: 2,
}
}
}

Responsive and pseudo-class variants

By default, only responsive variants are generated for line height utilities.

You can control which variants are generated for the line height utilities by modifying the lineHeight property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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

Disabling

If you don't plan to use the line height utilities in your project, you can disable them entirely by setting the lineHeight property to false in the corePlugins section of your config file:

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