tailwind中文自用

没找到中文的文档，有些记得住的属性没写，没写完，有空再补充

好消息，找到了 tailwind中文
坏消息，是机翻

flex和grid

两个的display：flex、grid
flex内部元素方向：flex-row、flex-row-reverse
flex内部元素换行：flex-wrap、flex-wrap-reverse、flex-nowrap
flex内部元素填充：grow、grow-0
flex内部元素放随：shrink、shrink-0
flex内部元素顺序：order-1、order-first

flex盒子初始大小：因为是flex，会跟随视窗放缩

• basis-0.5 ---原生---> flex-basis: 0.125rem;
• basis-px ---原生---> flex-basis: 1px;
• basis-2/3 ---原生---> flex-basis: 66.666667%;

flex内部元素行为（包含grow、shrink、basis）

• flex-1：允许根据需要进行放缩
• flex-auto：允许根据需要进行放缩，但会考虑初始大小basis
• flex-initial：可缩小，不可以放大，但会考虑初始大小basis
• flex-none：禁止放缩

grid模板列

• grid-cols-3：三等分的列
• grid-cols-subgrid：grid内部元素的内部又有元素，使用这个属性，让他内部的元素继承爷爷元素定义的栏位、数量、gap

grid内部元素大小和跨列

• col-span-2：元素大小2列
• col-start-3：元素放第3列
• col-end-8：元素在第8列前截止

行row的没写，以col类推

排版

字体：font-sans、font-serif
字大小：text-xs、text-9xl
斜体：italic、not-italic
字粗细：font-thin最细、font-black最粗
字母间距：tracking-tighter最小、tracking-widest最宽
行高：leading-3、leading-tight、leading-relaxed
列表样式：list-disc符号列表、list-decimal数字列表
文本对齐：text-left、text-justify
文字颜色：text-black、text-slate-50、text-[#ffffff]
文字划线：上中下
文字划线颜色
文字划线样式
文字划线粗细
文本下划线偏移：underline-offset-0
文本转换：全部大/小写，全部首字母大写、段落首字母大写
文本溢出
文本换行
文本缩进：文本之间空白大小
垂直对齐
空白区域：文本里的换行符和空格管不管
连字符：换行有没有连字符、一个词换多次行几个连字符

（不懂）字体平滑度

• antialiased：抗锯齿
• subpixel-antialiased：子像素抗锯齿

特殊字形

例如2²，H₂O这种

几行后截断文本

• line-clamp-1
• line-clamp-2

列表子项前置图标

• list-image-[url(checkmark.png)]

列表子项前置符号位置：1.和·

• list-outside
• list-inside

控制伪元素

• after:content-['_↗']
• before:content-[attr(before)]

词语换行断开

• break-words
• break-all

背景

背景色，背景图像位置，背景重复

背景滚动

• bg-fixed：相对视窗固定
• bg-local：随视窗和容器滚动
• bg-scroll：随视窗滚动，不跟随容器滚动

背景边界（直接裁剪）

• bg-clip-border：背景覆盖边框后面
• bg-clip-padding：背景覆盖padding后面
• bg-clip-content：背景覆盖容器后面
• bg-clip-text：裁剪背景配合文本，使背景透过文本可见

背景相对（根据对应属性展示背景，不裁剪）

• bg-origin-border：背景有边框后面那么大
• bg-origin-padding：背景有padding后面那么大
• bg-origin-content：背景只有容器大小那么大

背景尺寸

• bg-auto：默认大小
• bg-cover：缩放背景，直到填满
• bg-contain：缩放知道碰到外边缘，不裁剪拉伸，但会出现重复

背景色渐变

• bg-gradient-to-r from-gray-500 to-blue-800：到右边，从gray500到blue800
• bg-gradient-to-tr from-cyan-500 to-blue-500：到右上，从cyan500到blue500
  以此类推

边框

边框圆角
边框宽度
边框颜色
边框样式
元素间边框宽度：divide-x
元素间边框颜色：divide-black
元素间边框样式：divide-dashed
border占用空间，outline不占用空间，不会影响元素的尺寸和位置
border 可应用于几乎所有有形的html元素，而outline 是针对链接、表单控件、ImageMap和span等元素设计。
轮廓宽度：outline-0、outline-1
轮廓颜色
轮廓样式
轮廓偏移
环是tailwind预定义的边框样式，即开即用
环宽
环颜色
环偏移量
环偏移区域的颜色

效果

阴影
阴影颜色
透明度
颜色混合模式

过滤器

（颜色效果的标签前面加上backdrop，会变成对元素背后的元素生效）

模糊效果

• blur-none
• blur-sm
  以此类推

亮度

• brightness-0
  以此类推

对比度

• contrast-0
  以此类推

投影效果

此投影不同于shadow之处在于，他的光线是可以穿透的，他的投影是边框的投影，而shadow会被div挡住，只有边框有阴影

• drop-shadow-none
• drop-shadow-sm
  以此类推

灰度

• grayscale-0
• grayscale

（不懂）色相旋转：角度

• hue-rotate-0
• hue-rotate-15

反转颜色

• invert-0
• invert

饱和度：0、50、100、150、200

• saturate-0

棕色还是原色？？？

• sepia-0
• sepia

表格

边框合并

边框间距

表格布局

标题位置

元素动效和动画

过渡动效：colors、opacity、shadow、transform

• transition-none
• transition-all
• transition
  以此类推

过渡时间

• duration-0
  以此类推

过渡时间的函数：快、快慢快之类的

• ease-linear：线性
• ease-in：缓慢进入
• ease-out
• ease-in-out

开始动效前的延时

• delay-0
  以此类推

动画

• animate-spin：线性旋转动画，表示加载中
• animate-ping：使元素发出波纹，表示提醒
• animate-pulse：使元素淡入淡出，表示加载中
• animate-bounce：使元素上下弹，表示提醒

转换

缩放：缩放的百分比

• scale-95
• scale-150
• scale-x-95
  以此类推

绕中心旋转：旋转度数

• rotate-0
• rotate-90

偏移

• translate-x-0 ---原生---> transform: translateX(0px);
• translate-x-px ---原生---> transform: translateX(1px);
• translate-x-0.5 ---原生---> transform: translateX(0.125rem);
  以此内推

倾斜：立体的倾斜 0|1|2|3|6|12

• skew-y-0
• skew-x-1
  以此类推

围着指定地方旋转：左上角、中心、上面

• origin-center
• origin-top
• origin-top-right
  以此内推

交互性

滚动行为：在用导航或者scrollAPI操作时，指定滚动行为

• scroll-auto：默认，一般点了导航，画面直接显示导航位置画面，不出现滚上去的视觉效果
• scroll-smooth：平滑地滚到导航位置

（不懂）滚动元素的外边距：为每一个元素定义，会影响元素的吸附（即回弹位置）

• scroll-m-0
• scroll-mx-0
• scroll-ml-0
• 以此类推

（不懂）包裹滚动元素盒子的内边距：为盒子定义

• scroll-p-0
• scroll-px-0
• scroll-pl-0

指定滚动元素吸附位置：为每一个元素定义

• snap-start
• snap-end
• snap-center
• snap-align-none

（触摸屏上看）唰的拉过去要不要停下来被吸附：为每个元素定义

• snap-normal：不停下来
• snap-always：遇到就停下

吸附的严格程度：滑过一点就吸附回去？滑过再多一点点才吸附回去？

• snap-none
• snap-x
• snap-y
• snap-both
• snap-mandatory：比默认容易滑过去
• snap-proximity：浏览器默认

（触摸屏上看）能拖动的方向，包括能不能缩放

• touch-auto
• touch-none
• touch-pan-x
• touch-pan-left
  其余以此类推，y轴的是up和down
• touch-manipulation：等于auto去除了双击缩放之类的功能
• touch-pinch-zoom：启用多指移动缩放页面

防止被选中

• select-none
• select-text
• select-all
• select-auto

强调色：比如选择框的颜色

• accent-slate-950
  以此类推

表单样式：比如select的框框

• appearance-none
• appearance-auto

（不懂）控制文本输入光标颜色

• caret-gray-500
  以此类推

元素响应点击事件

pointer-events-none
pointer-events-auto

控制元素大小

• resize-none
• resize-y
• resize-x
• resize：xy轴都能拖动

SVG

填充颜色：可以透明或者继承

• fill-white
• fill-slate-50
  以此类推

线段颜色：可以透明或者继承

• stroke-white
• stroke-slate-50
  以此类推

线段粗细

• stroke-0
• stroke-1
• stroke-2