接下來是 間隔 大小 文字 背景圖 編框 區塊效果
Space
padding / margin
# 簡單說用法
{ p / m }{ ? / x / y / t / b }- { num }
# example:
p-0.5 => padding: 0.125rem;
m-0.5 => margin: 0.125rem;
Size
width / height
# 簡單說用法
{ w / h }-{ num }
{ w / h }-auto
## 100%
{ w / h }-full
## 100 vw / vh
{ w / h }-screen
## 百分比切割
w-{ num/2 | num/3 | num/4 | num/5 | num/6 | num/12 }
h-{ num/2 | num/3 | num/4 | num/5 | num/6 }
# example:
w-0.5 => width: 0.125rem;
h-0.5 => height: 0.125rem;
min-width / min-height
min-width
| 常用的 Class | Properties |
|---|
| min-w-0 | min-width: 0px; |
| min-w-full | min-width: 100%; |
min-height
| 常用的 Class | Properties |
|---|
| min-h-0 | min-height: 0px; |
| min-h-full | min-height: 100%; |
| min-h-screen | min-height: 100vh; |
max-width / max-height
max-width
| 常用的 Class | Properties |
|---|
| max-w-screen-sm | max-width: 640px; |
| max-w-screen-md | max-width: 768px; |
| max-w-screen-lg | max-width: 1024px; |
| max-w-screen-xl | max-width: 1280px; |
| max-w-screen-2xl | max-width: 1536px; |
max-height
| 常用的 Class | Properties |
|---|
| max-h-full | max-height: 100%; |
| max-h-screen | max-height: 100vh; |
Text
font-family
font-sans => font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif => font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono =>font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size
### 常用
text-{ xs / sm / base / lg / xl }
xs font-size: 0.75rem line-height: 1rem
sm font-size: 0.75rem line-height: 1rem
base font-size: 1rem line-height: 1.5rem
lg font-size: 1.125rem line-height: 1.75rem
xl font-size: 1.25rem line-height: 1.75rem
font-weight
### 常用
font-{ light / normal / medium / semibold / bold}
light font-weight: 300;
normal font-weight: 400;
medium font-weight: 500;
semibold font-weight: 600;
bold font-weight: 700;
text-align
### 常用
text-{ left / center / right / justify }
left text-align: left;
center text-align: center;
right text-align: right;
justify text-align: justify;
text-overflow
### 常用
truncate
text-{ ellipsis / clip }
# 文字超出寬度會變成 '...'
truncate overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-ellipsis text-overflow: ellipsis;
text-clip text-overflow: clip;
* content
是用於 element 的 ::before 和 ::after 偽元素的樣式修改
before:content-['Hello_World'] => 會輸出成 Hello World 於此 element before
Background
background-attachment
## 常見
bg-{ fixed / local / scroll }
fixed background-attachment: fixed;
local background-attachment: local;
scroll background-attachment: scroll;
background-clip / background-origin
## 常見
bg-clip-{ border / padding / content / text }
bg-origin-{ border / padding / content }
clip
border background-clip: border-box;
padding background-clip: padding-box;
content background-clip: content-box;
text background-clip: text;
origin
border background-origin: border-box;
padding background-origin: padding-box;
content background-origin: content-box;
background-position
## 常見
bg-{ bottom / center / left / right / top }
bg-{ left / right }-{ bottom / top }
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-right background-position: right;
bg-left background-position: left;
bg-top background-position: top;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
background-repeat
## 常見
bg-{ repeat / no-repeat }
bg-repeat-{ x / y / round / space }
repeat background-repeat: repeat;
no-repeat background-repeat: no-repeat;
repeat-x background-repeat: repeat-x;
repeat-y background-repeat: repeat-y;
repeat-round background-repeat: round;
repeat-space background-repeat: space;
background-size
## 常見
bg-{ auto / cover / contain }
auto background-size: auto;
cover background-size: cover;
contain background-size: contain;
background-image
Arbitrary values
## 常見
## 引用圖片
bg-[url('/img/xxxxxxxx.svg')]
bg-none background-image: none;
* Gradient Color Stops
## 顏色漸層
bg-gradient-to-{ t / tr / r / br / b / bl / l / tl }
t background-image: linear-gradient(to top, var(--tw-gradient-stops));
tr background-image: linear-gradient(to top right, var(--tw-gradient-stops));
r background-image: linear-gradient(to right, var(--tw-gradient-stops));
br background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
b background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bl background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
l background-image: linear-gradient(to left, var(--tw-gradient-stops));
tl background-image: linear-gradient(to top left, var(--tw-gradient-stops));
開始 from-{ tailwindcss-colors }-{ num }
中間 via-{ tailwindcss-colors }-{ num }
結束 to-{ tailwindcss-colors }-{ num }
Border
border-radius
## 常用
### 標準
rounded-none border-radius: 0px;
rounded border-radius: 0.25rem;
rounded-md border-radius: 0.375rem;
rounded-lg border-radius: 0.5rem;
rounded-full border-radius: 9999px;
## 方位
rounded-{ t / r / b / l / tl / tr / br / bl }-{ none / sm / md / lg / xl / 2xl / 3xl /full }
border-width
## 常用
border 1px
border-{ 0 / 2 / 4 / 8 } 0px / 2px / 4px / 8px
border-{ x / y }
border-{ x / y }-{ 0 / 2 / 4 / 8 }
border-{ t / r / b / l }
border-{ t / r / b / l }-{ 0 / 2 / 4 / 8 }
border-color
border-{ color }-{ num }
color 超多種
number 100-900
border-{ x / y / t / r / b / l }-{ color }-{ num }
border-style
## 常用
border-solid => border-style: solid;
border-dashed => border-style: dashed;
border-dotted => border-style: dotted;
border-double => border-style: double;
border-hidden => border-style: hidden;
border-none => border-style: none;
outline-width
## 常用
outline-{ 0 / 2 / 4 / 8 }
outline-color
## 常用
outline-{ color }
outline-{ color }-{ number }
color 超多種
number 100-900
outline-style
## 常用
outline
outline-{ none / dashed / dotted / double / hidden }
Effects
box-shadow
## 常用
shadow
shadow-{ sm / md / lg / xl / 2xl / inner / none }
* box-shadow-color
shadow-{ color }
shadow-{ color }-{ number }
color 超多種
number 100-900
Opacity
## 常用
opacity-{ 100 / 75 / 50 / 25 / 略... }
總結
其實官方文件其實講得很仔細，我透過微整理的方式了解它某些功能我可能比較少使用，或是哪幾種特別的用法比較重要加以星號，可以注意一下，發現 Adding Custom Styles，這章節蠻重要的，之後會再微整理，
