控制文字對齊的功能
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
<p class="text-left ...">Lorem ipsum dolor sit amet ...</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
<p class="text-center ...">Lorem ipsum dolor sit amet ...</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
<p class="text-right ...">Lorem ipsum dolor sit amet ...</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
<p class="text-justify ...">Lorem ipsum dolor sit amet ...</p>
如要讓元素的文字對齊有響應式的效果,可在現有文字對齊功能前加上前綴詞 {screen}:
。例如:中型或以上的螢幕尺寸使用 md:text-center
以套用 text-center
功能。
<p class="text-left md:text-center ...">Lorem ipsum dolor sit amet ...</p>
更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。
默認情況下, 只有 響應式 的 text alignment 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 textAlign
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ textAlign: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 text alignment 功能,可以在你的設定檔裡的 corePlugins
屬性中將 textAlign
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ textAlign: false,
}
}