Tailwind Spacing
2020-06-01 本文已影响0人
JunChow520
单位（size）
Tailwind间距单位采用rem，rem是相对于HTML的根元素<html>标签而言的，只需在根元素确定一个参考值，即可计算出不同rem的大小。
html{ font-size: 16px; }
例如：浏览器默认字号为16px，常见px于rem单位之间的转换。
| px | rem |
|---|---|
| 4px | 4/16=.25rem |
| 8px | 8/16=.5rem |
| 12px | 12/16=.75rem |
| 14px | 14/16=0.875rem |
| 16px | 16/16=1rem |
| 18px | 18/16=1.125rem |
| 20px | 20/16=1.25rem |
| 24px | 24/16=1.5rem |
| 30px | 30/16=1.875rem |
| 32px | 32/16=2rem |
Tailwind中尺寸中数字所表示的实际单位，以浏览器中默认的16px为参考。
| 大小 | rem | px |
|---|---|---|
| 0 | 0rem | 0px |
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
外边距（margin）
Tailwind外边距margin采用m-{t|r|b|l}-{size}命名工具类的方式为元素指定外边距，外边距的大小单位为rem。如果是负边距则采用-m-{t|r|b|l}-{size}命名方式。
| 命名 | 属性 |
|---|---|
| m | margin |
| mt | margin-top |
| mr | margin-right |
| mb | margin-bottom |
| ml | margin-left |
| m-auto | margin:auto; |
| mx | margin-left、margin-right |
| my | margin-top、margin-bottom |
| mx-auto | margin-left:auto; margin-right:auto; |
| my-auto | margin-top:auto; margin-bottom:auto; |
| m-px | margin:1px; |
| mt-px | margin-top:1px; |
| mr-px | margin-right:1px; |
| mb-px | margin-bottom:1px; |
| ml-px | margin-left;1px; |
内边距（padding）
Tailwind采用p{t|r|b|l}-{size}命名工具类为元素指定的一侧添加内边距（填充），padding的单位为rem，每一份为0.25rem即1/4个rem单位。
| 命名 | 属性 |
|---|---|
| p | padding |
| px | padding-left、padding-right |
| py | padding-top、padding-bottom |
| pl | padding-left |
| pr | padding-right |
| pt | padding-top |
| pb | padding-bottom |
| pl-px | padding-left:1px |
| pr-px | padding-right:1px |
| pt-px | padding-top:1px |
| pb-px | padding-bottom:1px |
间距（space between）
Tailwind中的space-是使用margin属性在父级容器中为子类设置左侧外间距margin-left和顶部外间距margin-top，典型的格式为space-{x|y}-{size} > * + *，主要目的是容器内子类统一设置水平和垂直的间距。
| 类名 | 属性 |
|---|---|
| space-x-{size} | margin-left:{size}; |
| -space-x-{size} | margin-left:-{size}; |
| space-y-{size} | margin-top:{size}; |
| -space-y-{size} | margin-top:-{size}; |
| space-x-px | margin-left:1px; |
| space-y-px | margin-top:1px; |
如果子元素的顺序相反，即使用flex-row-reverse或flex-col-reverse反转后，可使用space-x-reverse和space-y-reverse以确保将间隔空间添加到子元素中。
flex flex-row flex-row-reverse space-x-size space-x-reverse
flex flex-col flex-col-reverse space-y-size space-y-reverse
例如：设置容器中子元素的左间距
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="container mx-auto my-12 p-0 border flex flex-row space-x-4">
<div class="bg-gray-100 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
<div class="bg-gray-400 p-4">4</div>
</div>
space-x-4
例如：设置容器中反转后元素的间距
<div class="container mx-auto my-12 p-0 border flex flex-row flex-row-reverse space-x-4 space-x-reverse">
<div class="bg-gray-100 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
<div class="bg-gray-400 p-4">4</div>
</div>
space-x-reverse
例如：设置容器中子元素的上间距
<div class="container mx-auto my-12 p-0 border flex flex-col space-y-4">
<div class="bg-gray-100 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
<div class="bg-gray-400 p-4">4</div>
</div>
space-y-4
例如：设置容器中已反转子元素的上间距
<div class="container mx-auto my-12 p-0 border flex flex-col flex-col-reverse space-y-4 space-y-reverse">
<div class="bg-gray-100 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
<div class="bg-gray-400 p-4">4</div>
</div>
space-y-reverse
案例源代码
https://codepen.io/junchow/pen/GRoKrdp?editors=1000
