tools.tailwind-cheatsheet.totalCount
布局
27响应式容器
display: block
display: inline-block
display: inline
display: flex
display: inline-flex
display: grid
display: inline-grid
display: none
position: relative
position: absolute
position: fixed
position: sticky
position: static
z-index: 0
z-index: 10
z-index: 50
overflow: hidden
overflow: auto
overflow: scroll
overflow-x: auto
overflow-y: auto
float: left
float: right
clear: both
object-fit: cover
object-fit: contain
Flexbox
30flex-direction: row
flex-direction: column
flex-direction: row-reverse
flex-direction: column-reverse
flex-wrap: wrap
flex-wrap: nowrap
flex: 1 1 0%
flex: 1 1 auto
flex: none
flex-grow: 1
flex-shrink: 1
flex-shrink: 0
justify-content: flex-start
justify-content: center
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
align-items: flex-start
align-items: center
align-items: flex-end
align-items: stretch
align-items: baseline
align-self: auto
align-self: center
align-self: stretch
gap: 0px
gap: 16px
column-gap: 16px
row-gap: 16px
Grid
13grid-template-columns: repeat(1, ...)
grid-template-columns: repeat(2, ...)
grid-template-columns: repeat(3, ...)
grid-template-columns: repeat(4, ...)
grid-template-columns: repeat(12, ...)
grid-column: span 1
grid-column: span 2
grid-column: 1 / -1
grid-row: span 2
grid-template-rows: repeat(3, ...)
grid-auto-columns: auto
grid-auto-flow: row
grid-auto-flow: column
间距
21padding: 0px
padding: 8px
padding: 16px
padding: 24px
padding: 32px
padding-left/right: 16px
padding-top/bottom: 16px
padding-top: 16px
padding-bottom: 16px
padding-left: 16px
padding-right: 16px
margin: 0px
margin: 16px
margin: auto
margin-left/right: auto
margin-left/right: 16px
margin-top/bottom: 16px
margin-top: 16px
margin-bottom: 16px
子元素水平间距 16px
子元素垂直间距 16px
尺寸
22width: 100%
width: auto
width: 100vw
width: 50%
width: 33.33%
width: 16px
width: 32px
width: 64px
width: 128px
width: 256px
max-width: 24rem (384px)
max-width: 28rem (448px)
max-width: 32rem (512px)
max-width: 36rem (576px)
max-width: 42rem (672px)
max-width: 100%
height: 100%
height: 100vh
height: 16px
height: 32px
min-height: 100vh
min-width: 0px
排版
35font-size: 12px
font-size: 14px
font-size: 16px
font-size: 18px
font-size: 20px
font-size: 24px
font-size: 30px
font-size: 36px
font-weight: 100
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 900
font-style: italic
font-style: normal
text-align: left
text-align: center
text-align: right
text-align: justify
line-height: 1
line-height: 1.25
line-height: 1.5
line-height: 2
letter-spacing: -0.025em
letter-spacing: 0em
letter-spacing: 0.025em
text-transform: uppercase
text-transform: lowercase
text-transform: capitalize
文字溢出省略号
限制2行并截断
white-space: nowrap
单词换行
等宽字体
颜色
12文字白色
文字黑色
文字灰色 #6b7280
文字深灰 #111827
文字红色 #ef4444
文字蓝色 #3b82f6
文字绿色 #22c55e
文字黄色 #eab308
文字紫色 #a855f7
主题减弱前景色
主题主色文字
危险色文字
背景
18白色背景
黑色背景
透明背景
浅灰背景
深灰背景
红色背景
蓝色背景
主题主色背景
柔和背景色
卡片背景色
从左到右渐变
从上到下渐变
渐变起始色
渐变结束色
渐变中间色
background-size: cover
background-position: center
background-repeat: no-repeat
边框
211px solid 边框
无边框
2px solid 边框
4px solid 边框
顶部边框
底部边框
左边框
右边框
浅灰边框色
主色边框
border-radius: 4px
border-radius: 2px
border-radius: 6px
border-radius: 8px
border-radius: 12px
border-radius: 16px
border-radius: 9999px
border-radius: 0
去除 outline
1px 轮廓
2px 轮廓
效果
20opacity: 0
opacity: 0.5
opacity: 1
小型阴影
中型阴影
大型阴影
超大阴影
无阴影
filter: blur(8px)
filter: blur(4px)
filter: blur(16px)
灰度滤镜
亮度 75%
亮度 125%
mix-blend-mode: multiply
背景模糊
cursor: pointer
cursor: not-allowed
禁止选中文本
禁用鼠标事件
动画
5旋转动画
缩放脉冲动画
透明度脉冲
弹跳动画
无动画
过渡
20启用过渡效果
所有属性过渡
颜色过渡
透明度过渡
变换过渡
transition-duration: 75ms
transition-duration: 150ms
transition-duration: 300ms
transition-duration: 500ms
ease-in 缓入
ease-out 缓出
ease-in-out 缓入缓出
transform: scale(0.95)
transform: scale(1)
transform: scale(1.05)
transform: rotate(45deg)
transform: rotate(90deg)
transform: translateX(16px)
transform: translateY(16px)
transform: translateY(-4px)
工具说明
Referência rápida de classes Tailwind CSS com busca por palavras-chave cobrindo layout, espaçamento, cores, tipografia, animações e todas as outras categorias.
tailwindcss速查class类名cheatsheet