tailwindcss
- 定制：可以通過tailwind.config.js配置修改默認值 參考
布局
| 名稱 | 作用 |
|---|---|
| container | 定義元素寬度 |
| columns-{x} | 定義容器中的子元素的列數(shù) |
| box-border | 定義容器是否包含邊框尺寸 |
| display | 定義容器的屬性，參考下面display表格 |
| float | 定義原始浮動方向 |
| clear | 定義容器文字緊密布局方式，有清除浮動的效果 |
| object fit | 定義圖片延伸方式，有點類似于小程序中的mode 屬性效果參考下面object-fit表格 |
| object position | object 的延伸，效果與小程序mode一致，控制顯示元素的方向 |
| overflow | 控制溢出顯示效果，參考下面overflow表格 |
| position | 定位 |
| top/right/bottom/left | 定位數(shù)值 |
| visibility | 控制元素可見度 |
| z-index | z軸的排序 |
**display **
| 值 | 作用 |
|---|---|
| flex | flex布局 |
| inline-flex | 創(chuàng)建一個跟隨文本流的flex盒子，可以理解成把一個塊元素變成行內(nèi)元素 |
| block | 塊元素 |
| lnline | 行元素 |
| grid | 宮格元素 |
| lnline-grid | 行級宮格元素，參考Display - TailwindCSS中文文檔 | TailwindCSS中文網(wǎng) |
| table | 表格元素 |
| hidden \none | 刪除元素 |
object fit
| 值 | 效果 |
|---|---|
| object-contain | 占滿盒子，等比例放大 |
| object-cover | 覆蓋盒子，圖片不會變形 |
| object-fill | 拉伸 |
| object-none | 無效果 |
| object-scale-down | 縮小 |
overflow
| 值 | 效果 |
|---|---|
| overflow-x-hidden | x軸溢出隱藏、y軸同理 |
| overflow-visible | 溢出依然顯示 |
| overflow-auto | 溢出出現(xiàn)滾動條，不溢出不會出現(xiàn) |
| overflow-scroll | 無論溢不溢出都會出現(xiàn)滾動條 |
flexbox& grid
| 名稱 | 作用 | 寫法 |
|---|---|---|
| basis | 定義flex項目初始值大小 | basis-1、basis-1/4、md:basis-1 |
| direction | 定義flex容器排序方向 | flex-row、flex-row-reverse、flex-col、flex-col-reverse |
| weap | 定義flex容器是否換行子項目 | flex-wrap、flex-nowrap、flex-wrap-reverse |
| flex | flex項目的占比簡寫 | flex-1、flex-auto、flex-initial、flex-noe |
| shrink | flex項目的縮小比例 | |
| order | flex項目的排序 | order-1、order-1/4、md:order-1、order-first、order-last |
| grid-cols | grid列的數(shù)量 | grid-cols-1 |
| col-span | grid項目的跨列數(shù)量 | col-span–1、col-start-1、col-span-full |
| grid-row | grid行的數(shù)量 | grid-rows-1 |
| row-span | grid項目的跨行數(shù)量 | row-span–1、row-start-1、row-span-full |
| grid auto flow | 定義grid容器項目的放置方法 | |
| gap | grid間隔 | gap-1、gap-x-1、gap-y-1、gap-x-1px |
| justify content | 定義flex容器主軸對齊方式 | justify-start |
| justify items | 定義flex容器項目的統(tǒng)一對齊方式 | justify-items-center |
| justify self | 單獨定義flex項目元素的對齊方式 | justify-self-center |
| align content | 定義flex容器交叉軸對齊方式 | content-center |
| align Items | 定義flex容器交叉軸單個項目的對齊方式 | items-start |
| align self | 單獨定義flex容器項目交叉軸的對齊方式 | |
| place content | grid項目的對齊方式，簡寫，分別是主軸-交叉軸的對齊定義 | place-content-center |
間隔（與windicss寫法和用法都一致）
padding、margin、space between
尺寸 （與windicss寫法和用法都一致）
width、min-width、max-width、height、min-height、max-height
排版 （與windicss寫法和用法都一致）
| 名稱 | 作用 |
|---|---|
| font-family | 定義字體 |
| font size | 定義字體大小 |
| font smoothing | 定義字體平滑程度 |
| font weight | 定義字體粗細 |
| font variant numeric | 定義數(shù)字間隔大小統(tǒng)一 |
| letter spacing | 定義單詞間隔 |
| line clamp | 定義文字行數(shù) |
| line height | 文字行高 |
| list style image | 自定義列表序號圖片 |
| list style position | 自定義列表序號間隔 |
| list style type | 自定義序號類型 |
| text align | 文字對齊方式 |
| text color | 文字顏色 |
| text decoration | 文字下劃線樣式 |
| text decoration color | 下劃線顏色 |
| text decoration style | 下劃線樣式 |
| text decoration thickness | 下劃線厚度 |
| text transform | 文字大小寫相關樣式，可轉換成單詞首字母大寫 |
| text Overflow | 文字溢出設置 |
| text indent | 文本縮進 |
| vertical align | 文本縱向對齊方式 |
| Whitespace | 定義文本空白字符顯示方式 |
| Word Break | 定義文本分詞方式 |
| content | 定義元素偽元素的內(nèi)容配合::before ::after使用 |
背景 （與windicss寫法一致）
| 名稱 | 描述 |
|---|---|
| attachment | 用于控制背景圖像在滾動時的行為方式、可控制固定位置不跟隨滾動條滾動而滾動 |
| clip | 控制元素背景邊界框 |
| origin | 控制元素背景相對于邊框、填充和內(nèi)容的定位方式 |
| position | 背景定位 |
| repeat | 背景重復定義 |
| Gradient Color Stops | 漸變背景 |
邊框與輪廓（與windicss寫法一致）
輪廓邊框之外
effects 控制容器陰影
filters 濾鏡
| 名稱 | 描述 |
|---|---|
| blur | 模糊 |
| brightness | 亮度 |
| contrast | 對比度 |
| drop-shadow | 陰影 |
| grayscale | 灰度 |
| hue rotate | 詭異的濾鏡 |
| Invert | 底片 |
| Backdrop Blur | 背景模糊濾鏡應用于元素 |
transitions 、animation 過渡效果與動畫 （與windicss寫法一致）
transforms 變形
| 名稱 | 描述 |
|---|---|
| scale | 縮放 |
| rotate | 旋轉 |
| translate | 位移 |
| skew | 傾斜 |
| transform origin | 旋轉，定義旋轉的原點 |
Interactivity 互動 （與windicss寫法一致）
定義一些用戶事件，如鼠標形狀、選中顏色、輸入框選中顏色、滾動條樣式、
svg
| 名稱 | 描述 |
|---|---|
| fill | 定義svg fill屬性的值，用于定義svg圖片的顏色 |
| Stroke Width | 定義svg線條寬度 |
鼠標懸停狀態(tài)
| :hover | 鼠標移入時 |
| :focus | 鼠標點擊時 |
| :active | 獲得焦點時 |
| :visited | 選中過的 |
偽元素
| ::before | |
| :after |
偽類
| 名稱 | 描述 |
|---|---|
| last： | 最后一個子元素 |
| only | :only-child 只有一個子元素時 |
| odd: | 奇數(shù) |
| even： | 偶數(shù) |
| empty: | 內(nèi)容為空時 |
| disabled： | 不可選中的 |
| enabled： | 啟用的 |
| checked： | 選中的 |
響應式
| sm: |
| md: |
| lg: |
| xl: |
| 2xl: |
主題 默認亮色主題
| dark: |
使用修飾符
<li class="[&:nth-child(3)]:underline">{item}</li> // 設置第三個子元素的樣式
<li class="lg:[&:nth-child(3)]:hover:underline">{item}</li> // 設置lg 下 第三個子元素鼠標移入時樣式
<div class="[&_p]:mt-4"> // 設置所有p標簽的marig top值
<div class="lg:content-auto"> // 使用預定義變量 content-auto
修飾符大全
| Modifier | CSS |
|---|---|
| hover | &:hover |
| focus | &:focus |
| focus-within | &:focus-within |
| focus-visible | &:focus-visible |
| active | &:active |
| visited | &:visited |
| target | &:target |
| first | &:first-child |
| last | &:last-child |
| only | &:only-child |
| odd | &:nth-child(odd) |
| even | &:nth-child(even) |
| first-of-type | &:first-of-type |
| last-of-type | &:last-of-type |
| only-of-type | &:only-of-type |
| empty | &:empty |
| disabled | &:disabled |
| enabled | &:enabled |
| checked | &:checked |
| indeterminate | &:indeterminate |
| default | &:default |
| required | &:required |
| valid | &:valid |
| invalid | &:invalid |
| in-range | &:in-range |
| out-of-range | &:out-of-range |
| placeholder-shown | &:placeholder-shown |
| autofill | &:autofill |
| read-only | &:read-only |
| before | &::before |
| after | &::after |
| first-letter | &::first-letter |
| first-line | &::first-line |
| marker | &::marker |
| selection | &::selection |
| file | &::file-selector-button |
| backdrop | &::backdrop |
| placeholder | &::placeholder |
| sm | @media (min-width: 640px) |
| md | @media (min-width: 768px) |
| lg | @media (min-width: 1024px) |
| xl | @media (min-width: 1280px) |
| 2xl | @media (min-width: 1536px) |
| [min-…] | @media (min-width: …) |
| max-sm | @media not all and (min-width: 640px) |
| max-md | @media not all and (min-width: 768px) |
| max-lg | @media not all and (min-width: 1024px) |
| max-xl | @media not all and (min-width: 1280px) |
| max-2xl | @media not all and (min-width: 1536px) |
| [max-…] | @media (max-width: …) |
| dark | @media (prefers-color-scheme: dark) |
| portrait | @media (orientation: portrait) |
| landscape | @media (orientation: landscape) |
| motion-safe | @media (prefers-reduced-motion: no-preference) |
| motion-reduce | @media (prefers-reduced-motion: reduce) |
| contrast-more | @media (prefers-contrast: more) |
| contrast-less | @media (prefers-contrast: less) |
@media print |
|
| [supports-…] | @supports (…) |
| aria-checked | &[aria-checked=“true”] |
| aria-disabled | &[aria-disabled=“true”] |
| aria-expanded | &[aria-expanded=“true”] |
| aria-hidden | &[aria-hidden=“true”] |
| aria-pressed | &[aria-pressed=“true”] |
| aria-readonly | &[aria-readonly=“true”] |
| aria-required | &[aria-required=“true”] |
| aria-selected | &[aria-selected=“true”] |
| [aria-…] | &[aria-…] |
| [data-…] | &[data-…] |
| rtl | [dir=“rtl”] & |
| ltr | [dir=“l(fā)tr”] & |
| open | &[open] |
