尾风备忘单

您将要在Tailwind中使用的常见CSS属性及其相对类的参考列表

我写了这份备忘单，是因为我发现自己不断引用Tailwind文档来提醒特定的班级（我正在起步，还没有足够的记忆力）

这是我最常使用的东西。

保证金和填充

组成这3个表。在值之前添加破折号（例如，pt-2，m-auto）

象征 描述
p 填充
m 利润
-m 负边距
象征 描述
Ť 最佳
[R 正确的
b 底部
升 剩下
X 水平的
ÿ 垂直的
价值 描述
0 0
1 0.25rem
2 0.5rem
3 0.75rem
4 1rem
5 1.25rem
6 1.5rem
8 2rem
10 2.5rem
12 3rem
16 4rem
20 5rem
24 6rem
32 8rem
像素 1px
汽车 auto

margin: 0 auto

我有时会用margin: 0 auto使事物居中。

班级mx-auto应用它。

宽度

班级 CSS
w-1 width: 0.25rem
w-2 width: 0.5rem
w-3 width: 0.75rem
w-4 width: 1rem
w-6 width: 1.5rem
w-8 width: 2rem
w-10 width: 2.5rem
w-12 width: 3rem
16周 width: 4rem
w-24 width: 6rem
w-32 width: 8rem
w-48 width: 12rem
w-64 width: 16rem
自动 width: auto
宽像素 width: 1px
-1⁄2 width: 50%
-1⁄3 width: 33.33333%
-2⁄3 width: 66.66667%
-1⁄4 width: 25%
-3⁄4 width: 75%
-1⁄5 width: 20%
-2⁄5 width: 40%
-3⁄5 width: 60%
-4⁄5 width: 80%
-1⁄6 width: 16.66667%
-5⁄6 width: 83.33333%
全满 width: 100%
屏幕 width: 100vw

最大宽度

班级 CSS
最大wx max-width: 20rem
最大w-sm max-width: 30rem
最大w-md max-width: 40rem
最大w-lg max-width: 50rem
最大w xl max-width: 60rem
最大w-2xl max-width: 70rem
max-w-3xl max-width: 80rem
最大w-4xl max-width: 90rem
最大W-5XL max-width: 100rem
最大满 max-width: 100%

最小宽度

班级 CSS
min-w-0 min-width: 0
最小满 min-width: 100%

字体系列

班级 CSS
字体无 font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
字体衬线 font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
字体单 font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

字体大小

班级 CSS
文字-xs font-size: .75rem
短信 font-size: .875rem
文字库 font-size: 1rem
文本lg font-size: 1.125rem
文字-xl font-size: 1.25rem
文字2xl font-size: 1.5rem
文字3xl font-size: 1.875rem
文字4xl font-size: 2.25rem
文字5xl font-size: 3rem

字型粗细

班级 CSS
字体-细线 font-weight: 100
细字体 font-weight: 200
轻字体 font-weight: 300
普通字体 font-weight: 400
字体中等 font-weight: 500
字体半粗体 font-weight: 600
粗体 font-weight: 700
字体粗体 font-weight: 800
黑色字体 font-weight: 900

颜色

Tailwind为我们提供了可用于匹配相应颜色的那些类：

  • transparent
  • black
  • gray
  • white
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

警告：gray曾是grey在TailWind 1.0之前。如果您有一个较旧的项目，请记住这一点。

每种颜色都有不同的水平。您可以使用-100取决于-900使颜色从不那么强烈变为更强烈：

  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900

文字颜色

前置text-任何颜色

背景颜色

前置bg-任何颜色

中心文字

使用text-center

线高

班级 CSS
.leading-none line-height: 1
。领先 line-height: 1.25
.leading-normal line-height: 1.5
.lead-loose line-height: 2

弹性盒

容器

班级 CSS
柔性 display: flex
内联柔性 display: inline-flex

项目

方向

班级 CSS
排排 flex-direction: row
伸缩行反向 flex-direction: row-reverse
弹性col flex-direction: column
flex-col-reverse flex-direction: column-reverse

包装纸

班级 CSS
无缠绕 flex-wrap: nowrap
柔性包装 flex-wrap: wrap
flex-wrap-reverse flex-wrap: wrap-reverse

对齐项目

班级 CSS
项目拉伸 align-items: stretch
项目开始 align-items: flex-start
物品中心 align-items: center
项目结束 align-items: flex-end
项目基准 align-items: baseline

对齐内容

班级 CSS
内容开始 align-content: flex-start
内容中心 align-content: center
内容端 align-content: flex-end
内容之间 align-content: space-between
围绕内容 align-content: space-around

自我调整

班级 CSS
自动 align-self: auto
自启动 align-self: flex-start
自我中心 align-self: center
自我终结 align-self: flex-end
自我舒展 align-self: stretch

证明内容合理

班级 CSS
证明开始 justify-content: flex-start
居中 justify-content: center
端到端 justify-content: flex-end
合理的 justify-content: space-between
左右对齐 justify-content: space-around

弯曲，成长，收缩

班级 CSS
弹性初始 flex: initial
flex-1 flex: 1
弹性自动 flex: auto
无弹性 flex: none
弹性成长 flex-grow: 1
弯曲收缩 flex-shrink: 1
无弹性 flex-grow: 0
无收缩 flex-shrink: 0

修饰符

徘徊

hover:

免费下载我的CSS手册


更多CSS教程：


在线技术百科！