备忘录吕吕没有备忘录十新建_尾风备忘单

备忘录吕吕没有备忘录十新建

I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to remind a particular class (I’m starting out and I don’t have muscle memory yet for it)

我写了这份备忘单，是因为我发现自己不断引用Tailwind文档来提醒特定的班级(我刚开始，还没有肌肉记忆)

Here are the things I use the most.

这是我最常使用的东西。

• Margin and Padding

  保证金和填充

  • margin: 0 auto

    margin: 0 auto

  Margin and Padding

  保证金和填充

• Width

  宽度

• Max Width

  最大宽度

• Min width

  最小宽度

• Font Family

  字体系列

• Font Size

  字体大小

• Font weight

  字型粗细

• Colors

  色彩

• Text color

  文字颜色

• Background color

  背景颜色

• Center text

  中心文字

• Line Height

  线高

• Flexbox

  弹性盒

  • Container

    容器

  • Items

    物品

  • Direction

    方向

  • Wrapping

    包装纸

  • Align items

    对齐项目

  • Align content

    对齐内容

  • Align self

    自我调整

  • Justify content

    证明内容合理

  • Flex, grow, shrink

    弯曲，成长，收缩

  Flexbox

  弹性盒

• Modifiers

  修饰符

  • Hover

    徘徊

  Modifiers

  修饰符

保证金和填充 (Margin and Padding)

Compose those 3 tables. Add a dash before the value (e.g. pt-2, m-auto)

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

Symbol	Description
p	Padding
m	Margin
-m	Negative margin

符号	描述
p	填充
m	保证金
-m	负边距

Symbol	Description
t	Top
r	Right
b	Bottom
l	Left
x	Horizontal
y	Vertical

符号	描述
Ť	最佳
[R	对
b	底部
升	剩下
X	卧式
ÿ	垂直

Value	Description
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
px	1px
auto	auto

值	描述
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)

I sometimes use margin: 0 auto to center things.

我有时会使用margin: 0 auto来使内容居中。

The class mx-auto applies it.

类mx-auto应用它。

宽度 (Width)

Class	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
w-16	width: 4rem
w-24	width: 6rem
w-32	width: 8rem
w-48	width: 12rem
w-64	width: 16rem
w-auto	width: auto
w-px	width: 1px
w-1⁄2	width: 50%
w-1⁄3	width: 33.33333%
w-2⁄3	width: 66.66667%
w-1⁄4	width: 25%
w-3⁄4	width: 75%
w-1⁄5	width: 20%
w-2⁄5	width: 40%
w-3⁄5	width: 60%
w-4⁄5	width: 80%
w-1⁄6	width: 16.66667%
w-5⁄6	width: 83.33333%
w-full	width: 100%
w-screen	width: 100vw

类	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
W- 二分之一	width: 50%
W- 三分之一	width: 33.33333%
W- 三分之二	width: 66.66667%
W- 四分之一	width: 25%
W- 四分之三	width: 75%
W-5 分之1	width: 20%
W- 五分之二	width: 40%
W- 五分之三	width: 60%
W- 五分之四	width: 80%
W- 六分之一	width: 16.66667%
W- 六分之五	width: 83.33333%
全满	width: 100%
屏幕	width: 100vw

最大宽度 (Max Width)

Class	CSS
max-w-xs	max-width: 20rem
max-w-sm	max-width: 30rem
max-w-md	max-width: 40rem
max-w-lg	max-width: 50rem
max-w-xl	max-width: 60rem
max-w-2xl	max-width: 70rem
max-w-3xl	max-width: 80rem
max-w-4xl	max-width: 90rem
max-w-5xl	max-width: 100rem
max-w-full	max-width: 100%

类	CSS
最大wx	max-width: 20rem
最大w-sm	max-width: 30rem
最大宽	max-width: 40rem
最大重量	max-width: 50rem
最大w xl	max-width: 60rem
最大w-2xl	max-width: 70rem
最大W-3XL	max-width: 80rem
最大W-4XL	max-width: 90rem
最大W-5XL	max-width: 100rem
最大满	max-width: 100%

最小宽度 (Min width)

Class	CSS
min-w-0	min-width: 0
min-w-full	min-width: 100%

类	CSS
min-w-0	min-width: 0
分钟满	min-width: 100%

字体系列 (Font Family)

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

类	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;

字体大小 (Font Size)

Class	CSS
text-xs	font-size: .75rem
text-sm	font-size: .875rem
text-base	font-size: 1rem
text-lg	font-size: 1.125rem
text-xl	font-size: 1.25rem
text-2xl	font-size: 1.5rem
text-3xl	font-size: 1.875rem
text-4xl	font-size: 2.25rem
text-5xl	font-size: 3rem

类	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

字型粗细 (Font weight)

Class	CSS
font-hairline	font-weight: 100
font-thin	font-weight: 200
font-light	font-weight: 300
font-normal	font-weight: 400
font-medium	font-weight: 500
font-semibold	font-weight: 600
font-bold	font-weight: 700
font-extrabold	font-weight: 800
font-black	font-weight: 900

类	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

色彩 (Colors)

Tailwind provides us those classes we can use to match the corresponding color:

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

• transparent

  transparent

• black

  black

• gray

  gray

• white

  white

• red

  red

• orange

  orange

• yellow

  yellow

• green

  green

• teal

  teal

• blue

  blue

• indigo

  indigo

• purple

  purple

• pink

  pink

Warning: gray was grey before TailWind 1.0. Keep this in mind if you have an older project around.

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

Every color has various levels. You can use -100 up to -900 to make the color go from less intense to more intense:

每种颜色都有不同的水平。 您可以使用-100到-900来使颜色从较低的强度变为较高的强度：

• orange-100

  orange-100

• orange-200

  orange-200

• orange-300

  orange-300

• orange-400

  orange-400

• orange-500

  orange-500

• orange-600

  orange-600

• orange-700

  orange-700

• orange-800

  orange-800

• orange-900

  orange-900

文字颜色 (Text color)

Prepend text- to any color

在文字前text-任何颜色

背景颜色 (Background color)

Prepend bg- to any color

在任何颜色之前添加bg-

中心文字 (Center text)

Use text-center

使用text-center

线高 (Line Height)

Class	CSS
.leading-none	line-height: 1
.leading-tight	line-height: 1.25
.leading-normal	line-height: 1.5
.leading-loose	line-height: 2

类	CSS
.leading-one	line-height: 1
。领先	line-height: 1.25
.leading-normal	line-height: 1.5
.lead-loose	line-height: 2

弹性盒 (Flexbox)

容器 (Container)

Class	CSS
flex	display: flex
inline-flex	display: inline-flex

类	CSS
柔性	display: flex
在线弯曲	display: inline-flex

物品 (Items)

方向 (Direction)

Class	CSS
flex-row	flex-direction: row
flex-row-reverse	flex-direction: row-reverse
flex-col	flex-direction: column
flex-col-reverse	flex-direction: column-reverse

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

包装纸 (Wrapping)

Class	CSS
flex-no-wrap	flex-wrap: nowrap
flex-wrap	flex-wrap: wrap
flex-wrap-reverse	flex-wrap: wrap-reverse

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

对齐项目 (Align items)

Class	CSS
items-stretch	align-items: stretch
items-start	align-items: flex-start
items-center	align-items: center
items-end	align-items: flex-end
items-baseline	align-items: baseline

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

对齐内容 (Align content)

Class	CSS
content-start	align-content: flex-start
content-center	align-content: center
content-end	align-content: flex-end
content-between	align-content: space-between
content-around	align-content: space-around

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

自我调整 (Align self)

Class	CSS
self-auto	align-self: auto
self-start	align-self: flex-start
self-center	align-self: center
self-end	align-self: flex-end
self-stretch	align-self: stretch

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

证明内容合理 (Justify content)

Class	CSS
justify-start	justify-content: flex-start
justify-center	justify-content: center
justify-end	justify-content: flex-end
justify-between	justify-content: space-between
justify-around	justify-content: space-around

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

弯曲，成长，收缩 (Flex, grow, shrink)

Class	CSS
flex-initial	flex: initial
flex-1	flex: 1
flex-auto	flex: auto
flex-none	flex: none
flex-grow	flex-grow: 1
flex-shrink	flex-shrink: 1
flex-no-grow	flex-grow: 0
flex-no-shrink	flex-shrink: 0

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

修饰符 (Modifiers)

徘徊 (Hover)

hover:

hover:

翻译自: https://flaviocopes.com/tailwind-cheat-sheet/

备忘录吕吕没有备忘录十新建