設定元素高度的功能
<div class="h-auto ...">h-auto</div>
<div class="h-screen p-6 ...">h-screen</div>
h-8
h-12
h-16
h-24
<div>
<div class="h-8 ..."></div>
<div class="h-12 ..."></div>
<div class="h-16 ..."></div>
<div class="h-24 ..."></div>
</div>
設定為父元素高度
Use h-full
to set an element’s height to 100% of its parent, as long as the parent has a defined height.
若父元素有定義高度,則子元素可以使用 h-full
將高度設定為父元素高度的100%。
<div class="h-48">
<div class="h-full ...">h-full</div>
</div>
要在特定斷點控制元素高度,可在高度功能前加上前綴詞 {screen}:
。例如:中等以上尺寸螢幕使用 md:h-full
以套用 h-full
功能。
<div class="h-8 md:h-full"></div>
更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。
Tailwind 的高度預設是由 預設間距 及額外高度設定組合而成。
在 tailwind.config.js
裡頭, theme.spacing
可同時設定間距裡的 padding, margin, 寬度和高度。
// tailwind.config.js
module.exports = {
theme: {
spacing: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
tailwind.config.js
裡頭, theme.width
可另行設定高度。
// tailwind.config.js
module.exports = {
theme: {
height: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
默認情況下, 只有 響應式 的 height 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 height
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ height: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 height 功能,可以在你的設定檔裡的 corePlugins
屬性中將 height
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ height: false,
}
}