設定元素寬度的功能
使用 w-auto
讓瀏覽器自動為元素計算並選擇寬度。你可以用他還原已設定的寬度。
<div class="w-24 md:w-auto ..."></div>
使用 w-screen
讓元素佔據整個可視寬度。
<div class="h-12 w-screen"></div>
使用 w-{number}
或 w-px
來設定元素的固定寬度。
w-8
w-12
w-16
w-24
<div>
<div class="w-8 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-24 ..."></div>
</div>
<div class="flex ...">
<div class="w-1/2 ... ">w-1/2</div>
<div class="w-1/2 ... ">w-1/2</div>
</div>
<div class="flex ...">
<div class="w-2/5 ...">w-2/5</div>
<div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
<div class="w-1/3 ...">w-1/3</div>
<div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
<div class="w-1/4 ...">w-1/4</div>
<div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
<div class="w-1/5 ...">w-1/5</div>
<div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
<div class="w-1/6 ...">w-1/6</div>
<div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>
要在特定斷點控制元素寬度,可在寬度功能前加上前綴詞 {screen}:
。例如:中等以上尺寸螢幕使用 md:w-full
以套用 w-full
功能。
<div class="w-1/2 md:w-full ...">
<!-- ... -->
</div>
更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。
Tailwind 的寬度預設是由 預設間距 及額外寬度設定組合而成。
在 tailwind.config.js
裡頭, theme.spacing
或 theme.extend.spacing
可同時設定間距裡的 padding, margin, 寬度和高度。
// tailwind.config.js
module.exports = {
theme: {
extend: {
+ spacing: {
+ '72': '18rem',
+ '84': '21rem',
+ '96': '24rem',
+ }
}
}
}
在 tailwind.config.js
裡頭, theme.width
可另行設定寬度。
// tailwind.config.js
module.exports = {
theme: {
extend: {
+ width: {
+ '1/7': '14.2857143%',
+ '2/7': '28.5714286%',
+ '3/7': '42.8571429%',
+ '4/7': '57.1428571%',
+ '5/7': '71.4285714%',
+ '6/7': '85.7142857%',
+ }
}
}
}
更多有關 theme 的資訊,可參考客製化 theme 文件
默認情況下, 只有 響應式 的 width 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 width
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ width: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 width 功能,可以在你的設定檔裡的 corePlugins
屬性中將 width
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ width: false,
}
}