tailwindcss学习笔记之color、margin、padding、border

1、color

color分为文字颜色、边框颜色、背景颜色，分别使用 bg- 、border-、 text- 前缀。

1.1、常见类

1.2、[pre]-[<value>]用法

[pre]-[<value>]用于去设置一个完整的自定义值，如：

<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>

1.3、[pre]-(custom-property)用法

[pre]-(custom-property)用于去设置一个css变量，貌似我不会用到，暂时不考虑，官方示例：

<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>

1.4、<color>/[100-1]改变颜色透明度

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

1.5、英文标识类

以下22种颜色有[1-9]00、950，以及无数字后缀，共11种选择，用法如：[pre]-red，[pre]-red-950。

2、margin

2.1、m-<number>

使用`m-<number>`工具像`m-4` 和 `m-8`来控制元素所有方向的外边距，示例

<div class="m-8 ...">m-8</div>

2.2、某一边的外边距

使用 `mt-<number>`，`mr-<number>`，`mb-<number>`，和`ml-<number>` 像 `ml-2`、`mt-6`来控制某一边的外边距，示例：

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>

2.3、mx-<number>水平方向外边距

使用`mx-<number>`像`mx-4`和`mx-8`来控制水平方向的外边距，示例：

<div class="mx-8 ...">mx-8</div>

2.4、my-<number>垂直方向外边距

使用`my-<number>`像`my-4`和`my-8`来控制垂直方向的外边距，示例：

<div class="my-8 ...">my-8</div>

2.5、负边距

To use a negative margin value, prefix the class name with a dash to convert it to a negative value。

要使用负边距值，请在类名前加上一个破折号，将其转换为负值，示例：

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>

2.6、使用逻辑属性

logical properties：逻辑属性，指在编程或设计中运用基本逻辑思维的属性设置方式，例如CSS中的margin-inline-start这类与书写方向无关的属性。现在CSS推荐使用逻辑属性来支持从右到左的布局。

使用`ms-<number>` 或 `me-<number>` 像 `ms-4` 和 `me-8` 来设置 `margin-inline-start`和 `margin-inline-end` 这样的逻辑属性，示例：

<div>
  <div dir="ltr">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
  <div dir="rtl">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
</div>

2.7、space-[x|y]-<number>子元素间距

使用`space-x-<number>` 或者 `space-y-<number>` 像 `space-x-4` 和 `space-y-8` 来控制子元素的间距，示例：

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

2.8、[<value>]自定义值

使用像 `m-[<value>]`, `mx-[<value>]`, 和 `mb-[<value>]` 来设置一个自定义外边距值，示例：

<div class="m-[5px] ...">
  <!-- ... -->
</div>

2.9、使用变量

使用 `m-(<custom-property)` 类似的语法来设置变量，示例：

<div class="m-(--my-margin) ...">
  <!-- ... -->
</div>

这种写法只是 `m-[var(<custom-property>)]` 的一个简写，会自动为你增加 `var()` 函数调用。

3、padding

padding的用法与margin基本类似，这里根据自己的理解归纳列举出来。

总结1：赋值方法共4类

• p[*]-<number>：calc(var(--spacing) * <number>)
• p[*]-[value]：自定义值，要写完成版，如4px;
• p[*]-(<custom-property>)：自定义变量
• p[*]-px：1px赋值

总结2：方向指向共5类

• p-*：四个方向赋值
• 单边赋值：上（pt-）、右（pr-）、下（pb-）、左（pl）
• ps-*：padding-inline-start
• pe-*：padding-inline-end
• py-*：padding-block

4、border

4.1、border-color

具体颜色赋值规则参考本篇第一部分的内容，不同的是border存在单边赋值的情况，具体如下

• border-t-[color]：border-top-color
• border-r-[color]：border-right-color
• border-b-[color]：border-bottom-color
• border-l-[color]：border-left-color
• border-s-[color]：border-inline-start-color
• border-e-[color]：border-inline-end-color
• border-x-[color]：border-inline-color
• border-y-[color]：border-block-color
• divide-[color]：& > :not(:last-child)

4.1.1、基本示例

<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>

4.1.2、改变透明度

<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>

4.1.3、Individual sides 单一面

<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>

4.1.4、水平和垂直面

<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>

4.1.5、logical properties 使用逻辑属性

Use utilities like border-s-indigo-500 and border-e-lime-100 to set the border-inline-start-color and border-inline-end-color logical properties, which map to either the left or right border based on the text direction.

所谓逻辑属性，指的是方向由文字的方向决定的，也可以理解成外层方向决定的。

<div dir="ltr">
  <div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
  <div class="border-s-indigo-500 ..."></div>
</div>

4.1.6、Divider between children

<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

4.1.7、使用自定义值

Use the border-[<value>] syntax to set the border color based on a completely custom value:

<div class="border-[#243c5a] ...">
  <!-- ... -->
</div>

4.1.8、使用变量

For CSS variables, you can also use the border-(<custom-property>) syntax:

<div class="border-(--my-border) ...">
  <!-- ... -->
</div>

4.1.9、Applying on focus 应用焦点

Prefix a border-color utility with a variant like focus:* to only apply the utility in that state:

<input class="border-2 border-gray-700 focus:border-pink-600 ..." />

4.2、border-width

4.2.1、按控制方式分类

4.2.2、按赋值方式分类

4.3、border-style 边框样式

4.3.1、基本使用示例

<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>

4.3.2、border-none去除边框

<button class="border-none ...">Save Changes</button>

4.3.3、divider style设置分割线样式

<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

4.4、border-radius

4.4.1、按赋值方式分类

4.4.2、按控制方式分类

4.4.3、大小的基本使用

<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>

4.4.4、单字母控制一边两角

<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>

4.4.5、两字母控制一角

<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>

4.4.6、逻辑属性使用

<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
</div>
<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
</div>

4.4.7、rounded-full创建 pill buttons（药丸按钮）

<button class="rounded-full ...">Save Changes</button>

4.4.8、rounded-none 去除存在的圆角

<button class="rounded-none ...">Save Changes</button>