tailwindcss
- 定制：可以通过tailwind.config.js配置修改默认值 参考
布局
| 名称 | 作用 |
|---|---|
| container | 定义元素宽度 |
| columns-{x} | 定义容器中的子元素的列数 |
| box-border | 定义容器是否包含边框尺寸 |
| display | 定义容器的属性，参考下面display表格 |
| float | 定义原始浮动方向 |
| clear | 定义容器文字紧密布局方式，有清除浮动的效果 |
| object fit | 定义图片延伸方式，有点类似于小程序中的mode 属性效果参考下面object-fit表格 |
| object position | object 的延伸，效果与小程序mode一致，控制显示元素的方向 |
| overflow | 控制溢出显示效果，参考下面overflow表格 |
| position | 定位 |
| top/right/bottom/left | 定位数值 |
| visibility | 控制元素可见度 |
| z-index | z轴的排序 |
**display **
| 值 | 作用 |
|---|---|
| flex | flex布局 |
| inline-flex | 创建一个跟随文本流的flex盒子，可以理解成把一个块元素变成行内元素 |
| block | 块元素 |
| lnline | 行元素 |
| grid | 宫格元素 |
| lnline-grid | 行级宫格元素，参考Display - TailwindCSS中文文档 | TailwindCSS中文网 |
| 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 | 溢出出现滚动条，不溢出不会出现 |
| overflow-scroll | 无论溢不溢出都会出现滚动条 |
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列的数量 | grid-cols-1 |
| col-span | grid项目的跨列数量 | col-span–1、col-start-1、col-span-full |
| grid-row | grid行的数量 | grid-rows-1 |
| row-span | grid项目的跨行数量 | 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容器项目的统一对齐方式 | 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 | 定义数字间隔大小统一 |
| letter spacing | 定义单词间隔 |
| line clamp | 定义文字行数 |
| 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 | 定义元素伪元素的内容配合::before ::after使用 |
背景 （与windicss写法一致）
| 名称 | 描述 |
|---|---|
| attachment | 用于控制背景图像在滚动时的行为方式、可控制固定位置不跟随滚动条滚动而滚动 |
| clip | 控制元素背景边界框 |
| origin | 控制元素背景相对于边框、填充和内容的定位方式 |
| 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线条宽度 |
鼠标悬停状态
| :hover | 鼠标移入时 |
| :focus | 鼠标点击时 |
| :active | 获得焦点时 |
| :visited | 选中过的 |
伪元素
| ::before | |
| :after |
伪类
| 名称 | 描述 |
|---|---|
| last： | 最后一个子元素 |
| only | :only-child 只有一个子元素时 |
| odd: | 奇数 |
| even： | 偶数 |
| empty: | 内容为空时 |
| 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=“ltr”] & |
| open | &[open] |
