Tailwind 指令備忘單

Tailwind CSS 是一個實用程式優先的 CSS 框架，其中包含一些類，可以直接在標記中組合這些類別來建立任何設計。

特徵：

實用至上：

Tailwind css 是一個實用程式優先的 css 框架，它提供低階實用程式類別來建立自訂設計，而無需編寫 css。這種方法允許我們實現完全自訂的元件設計，而無需編寫一行自訂 CSS。 「你不會浪費精力發明類別名稱」.

內容清除：

這是從將在生產環境中使用的最終 CSS 檔案中刪除未使用的 CSS 類別的過程。這是一個優化過程，最終的 CSS 尺寸更小，更易於維護並顯示出更高的效能。

命令：

底線：

underline 
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double

文字樣式

text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text

背景顏色

bg-<color>-<shade>

邊界半徑

rounded-<size> 

字體樣式

font-<style> //mono, serif, sans
font-bold
font-thin

斜體：

italic

能見度

隱藏元素：

hidden

顯示（與隱藏相反）：

block

填充

p-<size>   /* All sides */
px-<size>  /* Horizontal (left and right) */
py-<size>  /* Vertical (top and bottom) */
pl-<size>  /* Left */
pr-<size>  /* Right */
pt-<size>  /* Top */
pb-<size>  /* Bottom */

保證金

m-<size>   /* All sides */
mx-<size>  /* Horizontal (left and right) */
my-<size>  /* Vertical (top and bottom) */
ml-<size>  /* Left */
mr-<size>  /* Right */
mt-<size>  /* Top */
mb-<size>  /* Bottom */

Flexbox

flex
flex-<direction> // row or column

證明內容合理

justify-<option>

對齊項目

items-<option> //start,end,center

響應式設計

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

尺寸

h-<size>
w-<size>

邊框

border
border-<size>
border-<color>

懸停狀態

hover:<utility>

以上是Tailwind 指令備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！