tailwindcss使用介绍

1 布局

1.1 aspect-ratio

用于控制元素纵横比。

Class	Properties
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;

使用方式：

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

1.2 container

Class	Breakpoint	Properties
container	None	width: 100%;
container	sm (640px)	max-width: 640px;
container	md (768px)	max-width: 768px;
container	lg (1024px)	max-width: 1024px;
container	xl (1280px)	max-width: 1280px;
container	2xl (1536px)	max-width: 1536px;

使用方式：

<div class="container mx-auto">
  <!-- 这里放置内容 -->
</div>

最终css：

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

1.3 Columns

columns-1	columns: 1;
columns-2	columns: 2;
columns-3	columns: 3;
columns-4	columns: 4;
columns-5	columns: 5;
columns-6	columns: 6;
columns-7	columns: 7;
columns-8	columns: 8;
columns-9	columns: 9;
columns-10	columns: 10;
columns-11	columns: 11;
columns-12	columns: 12;
columns-auto	columns: auto;
columns-3xs	columns: 16rem; /* 256px */
columns-2xs	columns: 18rem; /* 288px */
columns-xs	columns: 20rem; /* 320px */
columns-sm	columns: 24rem; /* 384px */
columns-md	columns: 28rem; /* 448px */
columns-lg	columns: 32rem; /* 512px */
columns-xl	columns: 36rem; /* 576px */
columns-2xl	columns: 42rem; /* 672px */
columns-3xl	columns: 48rem; /* 768px */
columns-4xl	columns: 56rem; /* 896px */
columns-5xl	columns: 64rem; /* 1024px */
columns-6xl	columns: 72rem; /* 1152px */
columns-7xl	columns: 80rem; /* 1280px */

1.4 box-sizing

|-------------|--------------------------|
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |

1.5 display

block	display: block;
inline-block	display: inline-block;
inline	display: inline;
flex	display: flex;
inline-flex	display: inline-flex;
table	display: table;
inline-table	display: inline-table;
table-caption	display: table-caption;

1.6 float

|-------------|----------------------|
| float-start | float: inline-start; |
| float-end | float: inline-end; |
| float-right | float: right; |
| float-left | float: left; |
| float-none | float: none; |

1.7 clear

清除浮动元素

clear-start	clear: inline-start;
clear-end	clear: inline-end;
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

1.8 object-fit

用于控制如何调整替换元素内容大小的实用程序。

object-contain	object-fit: contain;
object-cover	object-fit: cover;
object-fill	object-fit: fill;
object-none	object-fit: none;
object-scale-down	object-fit: scale-down;

1.9 object-position

用于控制被替换元素的内容在其容器中的定位方式的实用程序。

object-bottom	object-position: bottom;
object-center	object-position: center;
object-left	object-position: left;
object-left-bottom	object-position: left bottom;
object-left-top	object-position: left top;
object-right	object-position: right;
object-right-bottom	object-position: right bottom;
object-right-top	object-position: right top;
object-top	object-position: top;

1.10 overflow

溢出，用于控制元素如何处理对于容器来说太大的内容的实用工具。

overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	overflow: clip;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-clip	overflow-x: clip;
overflow-y-clip	overflow-y: clip;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

1.11 position

|----------|---------------------|
| static | position: static; |
| fixed | position: fixed; |
| absolute | position: absolute; |
| relative | position: relative; |
| sticky | position: sticky; |

1.12 上/右/下/左

inset-0	inset: 0px;
inset-x-0	left: 0px;
right: 0px;
inset-y-0	top: 0px;
bottom: 0px;
start-0	inset-inline-start: 0px;
end-0	inset-inline-end: 0px;
top-0	top: 0px;
right-0	right: 0px;
bottom-0	bottom: 0px;
left-0	left: 0px;
inset-px	inset: 1px;
inset-x-px	left: 1px;
right: 1px;
inset-y-px	top: 1px;
bottom: 1px;
start-px	inset-inline-start: 1px;
end-px	inset-inline-end: 1px;
top-px	top: 1px;
right-px	right: 1px;
bottom-px	bottom: 1px;
left-px	left: 1px;
inset-0.5	inset: 0.125rem; /* 2px */
inset-x-0.5	left: 0.125rem; /* 2px */
right: 0.125rem; /* 2px */
inset-y-0.5	top: 0.125rem; /* 2px */
bottom: 0.125rem; /* 2px */
start-0.5	inset-inline-start: 0.125rem; /* 2px */
end-0.5	inset-inline-end: 0.125rem; /* 2px */
top-0.5	top: 0.125rem; /* 2px */
right-0.5	right: 0.125rem; /* 2px */
bottom-0.5	bottom: 0.125rem; /* 2px */
left-0.5	left: 0.125rem; /* 2px */
inset-1	inset: 0.25rem; /* 4px */
inset-x-1	left: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
inset-y-1	top: 0.25rem; /* 4px */
bottom: 0.25rem; /* 4px */
start-1	inset-inline-start: 0.25rem; /* 4px */
end-1	inset-inline-end: 0.25rem; /* 4px */
top-1	top: 0.25rem; /* 4px */
right-1	right: 0.25rem; /* 4px */
bottom-1	bottom: 0.25rem; /* 4px */
left-1	left: 0.25rem; /* 4px */
inset-1.5	inset: 0.375rem; /* 6px */
inset-x-1.5	left: 0.375rem; /* 6px */
right: 0.375rem; /* 6px */
inset-y-1.5	top: 0.375rem; /* 6px */
bottom: 0.375rem; /* 6px */
start-1.5	inset-inline-start: 0.375rem; /* 6px */
end-1.5	inset-inline-end: 0.375rem; /* 6px */
top-1.5	top: 0.375rem; /* 6px */
right-1.5	right: 0.375rem; /* 6px */
bottom-1.5	bottom: 0.375rem; /* 6px */
left-1.5	left: 0.375rem; /* 6px */
inset-2	inset: 0.5rem; /* 8px */
inset-x-2	left: 0.5rem; /* 8px */
right: 0.5rem; /* 8px */
inset-y-2	top: 0.5rem; /* 8px */
bottom: 0.5rem; /* 8px */
start-2	inset-inline-start: 0.5rem; /* 8px */
end-2	inset-inline-end: 0.5rem; /* 8px */
top-2	top: 0.5rem; /* 8px */
right-2	right: 0.5rem; /* 8px */
bottom-2	bottom: 0.5rem; /* 8px */
left-2	left: 0.5rem; /* 8px */
inset-2.5	inset: 0.625rem; /* 10px */
inset-x-2.5	left: 0.625rem; /* 10px */
right: 0.625rem; /* 10px */
inset-y-2.5	top: 0.625rem; /* 10px */
bottom: 0.625rem; /* 10px */
start-2.5	inset-inline-start: 0.625rem; /* 10px */
end-2.5	inset-inline-end: 0.625rem; /* 10px */
top-2.5	top: 0.625rem; /* 10px */
right-2.5	right: 0.625rem; /* 10px */
bottom-2.5	bottom: 0.625rem; /* 10px */
left-2.5	left: 0.625rem; /* 10px */
inset-3	inset: 0.75rem; /* 12px */
inset-x-3	left: 0.75rem; /* 12px */
right: 0.75rem; /* 12px */
inset-y-3	top: 0.75rem; /* 12px */
bottom: 0.75rem; /* 12px */
start-3	inset-inline-start: 0.75rem; /* 12px */
end-3	inset-inline-end: 0.75rem; /* 12px */
top-3	top: 0.75rem; /* 12px */
right-3	right: 0.75rem; /* 12px */
bottom-3	bottom: 0.75rem; /* 12px */
left-3	left: 0.75rem; /* 12px */
inset-3.5	inset: 0.875rem; /* 14px */
inset-x-3.5	left: 0.875rem; /* 14px */
right: 0.875rem; /* 14px */
inset-y-3.5	top: 0.875rem; /* 14px */
bottom: 0.875rem; /* 14px */
start-3.5	inset-inline-start: 0.875rem; /* 14px */
end-3.5	inset-inline-end: 0.875rem; /* 14px */
top-3.5	top: 0.875rem; /* 14px */
right-3.5	right: 0.875rem; /* 14px */
bottom-3.5	bottom: 0.875rem; /* 14px */
left-3.5	left: 0.875rem; /* 14px */
inset-4	inset: 1rem; /* 16px */
inset-x-4	left: 1rem; /* 16px */
right: 1rem; /* 16px */
inset-y-4	top: 1rem; /* 16px */
bottom: 1rem; /* 16px */
start-4	inset-inline-start: 1rem; /* 16px */
end-4	inset-inline-end: 1rem; /* 16px */
top-4	top: 1rem; /* 16px */
right-4	right: 1rem; /* 16px */
bottom-4	bottom: 1rem; /* 16px */
left-4	left: 1rem; /* 16px */
inset-5	inset: 1.25rem; /* 20px */
inset-x-5	left: 1.25rem; /* 20px */
right: 1.25rem; /* 20px */
inset-y-5	top: 1.25rem; /* 20px */
bottom: 1.25rem; /* 20px */
start-5	inset-inline-start: 1.25rem; /* 20px */
end-5	inset-inline-end: 1.25rem; /* 20px */
top-5	top: 1.25rem; /* 20px */
right-5	right: 1.25rem; /* 20px */
bottom-5	bottom: 1.25rem; /* 20px */
left-5	left: 1.25rem; /* 20px */
inset-6	inset: 1.5rem; /* 24px */
inset-x-6	left: 1.5rem; /* 24px */
right: 1.5rem; /* 24px */
inset-y-6	top: 1.5rem; /* 24px */
bottom: 1.5rem; /* 24px */
start-6	inset-inline-start: 1.5rem; /* 24px */
end-6	inset-inline-end: 1.5rem; /* 24px */
top-6	top: 1.5rem; /* 24px */
right-6	right: 1.5rem; /* 24px */
bottom-6	bottom: 1.5rem; /* 24px */
left-6	left: 1.5rem; /* 24px */
inset-7	inset: 1.75rem; /* 28px */
inset-x-7	left: 1.75rem; /* 28px */
right: 1.75rem; /* 28px */
inset-y-7	top: 1.75rem; /* 28px */
bottom: 1.75rem; /* 28px */
start-7	inset-inline-start: 1.75rem; /* 28px */
end-7	inset-inline-end: 1.75rem; /* 28px */
top-7	top: 1.75rem; /* 28px */
right-7	right: 1.75rem; /* 28px */
bottom-7	bottom: 1.75rem; /* 28px */
left-7	left: 1.75rem; /* 28px */
inset-8	inset: 2rem; /* 32px */
inset-x-8	left: 2rem; /* 32px */
right: 2rem; /* 32px */
inset-y-8	top: 2rem; /* 32px */
bottom: 2rem; /* 32px */
start-8	inset-inline-start: 2rem; /* 32px */
end-8	inset-inline-end: 2rem; /* 32px */
top-8	top: 2rem; /* 32px */
right-8	right: 2rem; /* 32px */
bottom-8	bottom: 2rem; /* 32px */
left-8	left: 2rem; /* 32px */
inset-9	inset: 2.25rem; /* 36px */
inset-x-9	left: 2.25rem; /* 36px */
right: 2.25rem; /* 36px */
inset-y-9	top: 2.25rem; /* 36px */
bottom: 2.25rem; /* 36px */
start-9	inset-inline-start: 2.25rem; /* 36px */
end-9	inset-inline-end: 2.25rem; /* 36px */
top-9	top: 2.25rem; /* 36px */
right-9	right: 2.25rem; /* 36px */
bottom-9	bottom: 2.25rem; /* 36px */
left-9	left: 2.25rem; /* 36px */
inset-10	inset: 2.5rem; /* 40px */
inset-x-10	left: 2.5rem; /* 40px */
right: 2.5rem; /* 40px */
inset-y-10	top: 2.5rem; /* 40px */
bottom: 2.5rem; /* 40px */
start-10	inset-inline-start: 2.5rem; /* 40px */
end-10	inset-inline-end: 2.5rem; /* 40px */
top-10	top: 2.5rem; /* 40px */
right-10	right: 2.5rem; /* 40px */
bottom-10	bottom: 2.5rem; /* 40px */
left-10	left: 2.5rem; /* 40px */
inset-11	inset: 2.75rem; /* 44px */
inset-x-11	left: 2.75rem; /* 44px */
right: 2.75rem; /* 44px */
inset-y-11	top: 2.75rem; /* 44px */
bottom: 2.75rem; /* 44px */
start-11	inset-inline-start: 2.75rem; /* 44px */
end-11	inset-inline-end: 2.75rem; /* 44px */
top-11	top: 2.75rem; /* 44px */
right-11	right: 2.75rem; /* 44px */
bottom-11	bottom: 2.75rem; /* 44px */
left-11	left: 2.75rem; /* 44px */
inset-12	inset: 3rem; /* 48px */
inset-x-12	left: 3rem; /* 48px */
right: 3rem; /* 48px */
inset-y-12	top: 3rem; /* 48px */
bottom: 3rem; /* 48px */
start-12	inset-inline-start: 3rem; /* 48px */
end-12	inset-inline-end: 3rem; /* 48px */
top-12	top: 3rem; /* 48px */
right-12	right: 3rem; /* 48px */
bottom-12	bottom: 3rem; /* 48px */
left-12	left: 3rem; /* 48px */
inset-14	inset: 3.5rem; /* 56px */
inset-x-14	left: 3.5rem; /* 56px */
right: 3.5rem; /* 56px */
inset-y-14	top: 3.5rem; /* 56px */
bottom: 3.5rem; /* 56px */
start-14	inset-inline-start: 3.5rem; /* 56px */
end-14	inset-inline-end: 3.5rem; /* 56px */
top-14	top: 3.5rem; /* 56px */
right-14	right: 3.5rem; /* 56px */
bottom-14	bottom: 3.5rem; /* 56px */
left-14	left: 3.5rem; /* 56px */
inset-16	inset: 4rem; /* 64px */
inset-x-16	left: 4rem; /* 64px */
right: 4rem; /* 64px */
inset-y-16	top: 4rem; /* 64px */
bottom: 4rem; /* 64px */
start-16	inset-inline-start: 4rem; /* 64px */
end-16	inset-inline-end: 4rem; /* 64px */
top-16	top: 4rem; /* 64px */
right-16	right: 4rem; /* 64px */
bottom-16	bottom: 4rem; /* 64px */
left-16	left: 4rem; /* 64px */
inset-20	inset: 5rem; /* 80px */
inset-x-20	left: 5rem; /* 80px */
right: 5rem; /* 80px */
inset-y-20	top: 5rem; /* 80px */
bottom: 5rem; /* 80px */
start-20	inset-inline-start: 5rem; /* 80px */
end-20	inset-inline-end: 5rem; /* 80px */
top-20	top: 5rem; /* 80px */
right-20	right: 5rem; /* 80px */
bottom-20	bottom: 5rem; /* 80px */
left-20	left: 5rem; /* 80px */
inset-24	inset: 6rem; /* 96px */
inset-x-24	left: 6rem; /* 96px */
right: 6rem; /* 96px */
inset-y-24	top: 6rem; /* 96px */
bottom: 6rem; /* 96px */
start-24	inset-inline-start: 6rem; /* 96px */
end-24	inset-inline-end: 6rem; /* 96px */
top-24	top: 6rem; /* 96px */
right-24	right: 6rem; /* 96px */
bottom-24	bottom: 6rem; /* 96px */
left-24	left: 6rem; /* 96px */
inset-28	inset: 7rem; /* 112px */
inset-x-28	left: 7rem; /* 112px */
right: 7rem; /* 112px */
inset-y-28	top: 7rem; /* 112px */
bottom: 7rem; /* 112px */
start-28	inset-inline-start: 7rem; /* 112px */
end-28	inset-inline-end: 7rem; /* 112px */
top-28	top: 7rem; /* 112px */
right-28	right: 7rem; /* 112px */
bottom-28	bottom: 7rem; /* 112px */
left-28	left: 7rem; /* 112px */
inset-32	inset: 8rem; /* 128px */
inset-x-32	left: 8rem; /* 128px */
right: 8rem; /* 128px */
inset-y-32	top: 8rem; /* 128px */
bottom: 8rem; /* 128px */
start-32	inset-inline-start: 8rem; /* 128px */
end-32	inset-inline-end: 8rem; /* 128px */
top-32	top: 8rem; /* 128px */
right-32	right: 8rem; /* 128px */
bottom-32	bottom: 8rem; /* 128px */
left-32	left: 8rem; /* 128px */
inset-36	inset: 9rem; /* 144px */
inset-x-36	left: 9rem; /* 144px */
right: 9rem; /* 144px */
inset-y-36	top: 9rem; /* 144px */
bottom: 9rem; /* 144px */
start-36	inset-inline-start: 9rem; /* 144px */
end-36	inset-inline-end: 9rem; /* 144px */
top-36	top: 9rem; /* 144px */
right-36	right: 9rem; /* 144px */
bottom-36	bottom: 9rem; /* 144px */
left-36	left: 9rem; /* 144px */
inset-40	inset: 10rem; /* 160px */
inset-x-40	left: 10rem; /* 160px */
right: 10rem; /* 160px */
inset-y-40	top: 10rem; /* 160px */
bottom: 10rem; /* 160px */
start-40	inset-inline-start: 10rem; /* 160px */
end-40	inset-inline-end: 10rem; /* 160px */
top-40	top: 10rem; /* 160px */
right-40	right: 10rem; /* 160px */
bottom-40	bottom: 10rem; /* 160px */
left-40	left: 10rem; /* 160px */
inset-44	inset: 11rem; /* 176px */
inset-x-44	left: 11rem; /* 176px */
right: 11rem; /* 176px */
inset-y-44	top: 11rem; /* 176px */
bottom: 11rem; /* 176px */
start-44	inset-inline-start: 11rem; /* 176px */
end-44	inset-inline-end: 11rem; /* 176px */
top-44	top: 11rem; /* 176px */
right-44	right: 11rem; /* 176px */
bottom-44	bottom: 11rem; /* 176px */
left-44	left: 11rem; /* 176px */
inset-48	inset: 12rem; /* 192px */
inset-x-48	left: 12rem; /* 192px */
right: 12rem; /* 192px */
inset-y-48	top: 12rem; /* 192px */
bottom: 12rem; /* 192px */
start-48	inset-inline-start: 12rem; /* 192px */
end-48	inset-inline-end: 12rem; /* 192px */
top-48	top: 12rem; /* 192px */
right-48	right: 12rem; /* 192px */
bottom-48	bottom: 12rem; /* 192px */
left-48	left: 12rem; /* 192px */
inset-52	inset: 13rem; /* 208px */
inset-x-52	left: 13rem; /* 208px */
right: 13rem; /* 208px */
inset-y-52	top: 13rem; /* 208px */
bottom: 13rem; /* 208px */
start-52	inset-inline-start: 13rem; /* 208px */
end-52	inset-inline-end: 13rem; /* 208px */
top-52	top: 13rem; /* 208px */
right-52	right: 13rem; /* 208px */
bottom-52	bottom: 13rem; /* 208px */
left-52	left: 13rem; /* 208px */
inset-56	inset: 14rem; /* 224px */
inset-x-56	left: 14rem; /* 224px */
right: 14rem; /* 224px */
inset-y-56	top: 14rem; /* 224px */
bottom: 14rem; /* 224px */
start-56	inset-inline-start: 14rem; /* 224px */
end-56	inset-inline-end: 14rem; /* 224px */
top-56	top: 14rem; /* 224px */
right-56	right: 14rem; /* 224px */
bottom-56	bottom: 14rem; /* 224px */
left-56	left: 14rem; /* 224px */
inset-60	inset: 15rem; /* 240px */
inset-x-60	left: 15rem; /* 240px */
right: 15rem; /* 240px */
inset-y-60	top: 15rem; /* 240px */
bottom: 15rem; /* 240px */
start-60	inset-inline-start: 15rem; /* 240px */
end-60	inset-inline-end: 15rem; /* 240px */
top-60	top: 15rem; /* 240px */
right-60	right: 15rem; /* 240px */
bottom-60	bottom: 15rem; /* 240px */
left-60	left: 15rem; /* 240px */
inset-64	inset: 16rem; /* 256px */
inset-x-64	left: 16rem; /* 256px */
right: 16rem; /* 256px */
inset-y-64	top: 16rem; /* 256px */
bottom: 16rem; /* 256px */
start-64	inset-inline-start: 16rem; /* 256px */
end-64	inset-inline-end: 16rem; /* 256px */
top-64	top: 16rem; /* 256px */
right-64	right: 16rem; /* 256px */
bottom-64	bottom: 16rem; /* 256px */
left-64	left: 16rem; /* 256px */
inset-72	inset: 18rem; /* 288px */
inset-x-72	left: 18rem; /* 288px */
right: 18rem; /* 288px */
inset-y-72	top: 18rem; /* 288px */
bottom: 18rem; /* 288px */
start-72	inset-inline-start: 18rem; /* 288px */
end-72	inset-inline-end: 18rem; /* 288px */
top-72	top: 18rem; /* 288px */
right-72	right: 18rem; /* 288px */
bottom-72	bottom: 18rem; /* 288px */
left-72	left: 18rem; /* 288px */
inset-80	inset: 20rem; /* 320px */
inset-x-80	left: 20rem; /* 320px */
right: 20rem; /* 320px */
inset-y-80	top: 20rem; /* 320px */
bottom: 20rem; /* 320px */
start-80	inset-inline-start: 20rem; /* 320px */
end-80	inset-inline-end: 20rem; /* 320px */
top-80	top: 20rem; /* 320px */
right-80	right: 20rem; /* 320px */
bottom-80	bottom: 20rem; /* 320px */
left-80	left: 20rem; /* 320px */
inset-96	inset: 24rem; /* 384px */
inset-x-96	left: 24rem; /* 384px */
right: 24rem; /* 384px */
inset-y-96	top: 24rem; /* 384px */
bottom: 24rem; /* 384px */
start-96	inset-inline-start: 24rem; /* 384px */
end-96	inset-inline-end: 24rem; /* 384px */
top-96	top: 24rem; /* 384px */
right-96	right: 24rem; /* 384px */
bottom-96	bottom: 24rem; /* 384px */
left-96	left: 24rem; /* 384px */
inset-auto	inset: auto;
inset-1/2	inset: 50%;
inset-1/3	inset: 33.333333%;
inset-2/3	inset: 66.666667%;
inset-1/4	inset: 25%;
inset-2/4	inset: 50%;
inset-3/4	inset: 75%;
inset-full	inset: 100%;
inset-x-auto	left: auto;
right: auto;
inset-x-1/2	left: 50%;
right: 50%;
inset-x-1/3	left: 33.333333%;
right: 33.333333%;
inset-x-2/3	left: 66.666667%;
right: 66.666667%;
inset-x-1/4	left: 25%;
right: 25%;
inset-x-2/4	left: 50%;
right: 50%;
inset-x-3/4	left: 75%;
right: 75%;
inset-x-full	left: 100%;
right: 100%;
inset-y-auto	top: auto;
bottom: auto;
inset-y-1/2	top: 50%;
bottom: 50%;
inset-y-1/3	top: 33.333333%;
bottom: 33.333333%;
inset-y-2/3	top: 66.666667%;
bottom: 66.666667%;
inset-y-1/4	top: 25%;
bottom: 25%;
inset-y-2/4	top: 50%;
bottom: 50%;
inset-y-3/4	top: 75%;
bottom: 75%;
inset-y-full	top: 100%;
bottom: 100%;
start-auto	inset-inline-start: auto;
start-1/2	inset-inline-start: 50%;
start-1/3	inset-inline-start: 33.333333%;
start-2/3	inset-inline-start: 66.666667%;
start-1/4	inset-inline-start: 25%;
start-2/4	inset-inline-start: 50%;
start-3/4	inset-inline-start: 75%;
start-full	inset-inline-start: 100%;
end-auto	inset-inline-end: auto;
end-1/2	inset-inline-end: 50%;
end-1/3	inset-inline-end: 33.333333%;
end-2/3	inset-inline-end: 66.666667%;
end-1/4	inset-inline-end: 25%;
end-2/4	inset-inline-end: 50%;
end-3/4	inset-inline-end: 75%;
end-full	inset-inline-end: 100%;
top-auto	top: auto;
top-1/2	top: 50%;
top-1/3	top: 33.333333%;
top-2/3	top: 66.666667%;
top-1/4	top: 25%;
top-2/4	top: 50%;
top-3/4	top: 75%;
top-full	top: 100%;
right-auto	right: auto;
right-1/2	right: 50%;
right-1/3	right: 33.333333%;
right-2/3	right: 66.666667%;
right-1/4	right: 25%;
right-2/4	right: 50%;
right-3/4	right: 75%;
right-full	right: 100%;
bottom-auto	bottom: auto;
bottom-1/2	bottom: 50%;
bottom-1/3	bottom: 33.333333%;
bottom-2/3	bottom: 66.666667%;
bottom-1/4	bottom: 25%;
bottom-2/4	bottom: 50%;
bottom-3/4	bottom: 75%;
bottom-full	bottom: 100%;
left-auto	left: auto;
left-1/2	left: 50%;
left-1/3	left: 33.333333%;
left-2/3	left: 66.666667%;
left-1/4	left: 25%;
left-2/4	left: 50%;
left-3/4	left: 75%;
left-full	left: 100%;

1.13 visibility

|-----------|-----------------------|
| visible | visibility: visible; |
| invisible | visibility: hidden; |
| collapse | visibility: collapse; |

1.14 z-index

z-0	z-index: 0;
z-10	z-index: 10;
z-20	z-index: 20;
z-30	z-index: 30;
z-40	z-index: 40;
z-50	z-index: 50;
z-auto	z-index: auto;

2 Flexbox & Grid

2.1 Flex Basis

basis-5/12	flex-basis: 41.666667%;
basis-6/12	flex-basis: 50%;
basis-7/12	flex-basis: 58.333333%;
basis-8/12	flex-basis: 66.666667%;
basis-9/12	flex-basis: 75%;
basis-10/12	flex-basis: 83.333333%;
basis-11/12	flex-basis: 91.666667%;
basis-full	flex-basis: 100%;

2.2 Flex Direction

flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

2.3 Flex Wrap

flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

2.4 Flex

flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

2.5 Flex Grow

flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

2.6 Flex Shrink

shrink	flex-shrink: 1;
shrink-0	flex-shrink: 0;

2.7 Order

用于控制伸缩和网格项的顺序的实用程序。

order-1	order: 1;
order-2	order: 2;
order-3	order: 3;
order-4	order: 4;
order-5	order: 5;
order-6	order: 6;
order-7	order: 7;
order-8	order: 8;

2.8 grid-template-columns

用于指定网格布局中的列

grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;
grid-cols-subgrid	grid-template-columns: subgrid;

2.9 grid-column

用于控制元素在网格列之间的大小和放置方式的实用程序。

col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;
col-span-3	grid-column: span 3 / span 3;
col-span-4	grid-column: span 4 / span 4;
col-span-5	grid-column: span 5 / span 5;
col-span-6	grid-column: span 6 / span 6;
col-span-7	grid-column: span 7 / span 7;
col-span-8	grid-column: span 8 / span 8;
col-span-9	grid-column: span 9 / span 9;
col-span-10	grid-column: span 10 / span 10;
col-span-11	grid-column: span 11 / span 11;
col-span-12	grid-column: span 12 / span 12;
col-span-full	grid-column: 1 / -1;
col-start-1	grid-column-start: 1;
col-start-2	grid-column-start: 2;
col-start-3	grid-column-start: 3;
col-start-4	grid-column-start: 4;
col-start-5	grid-column-start: 5;
col-start-6	grid-column-start: 6;
col-start-7	grid-column-start: 7;
col-start-8	grid-column-start: 8;
col-start-9	grid-column-start: 9;
col-start-10	grid-column-start: 10;
col-start-11	grid-column-start: 11;
col-start-12	grid-column-start: 12;
col-start-13	grid-column-start: 13;
col-start-auto	grid-column-start: auto;
col-end-1	grid-column-end: 1;
col-end-2	grid-column-end: 2;
col-end-3	grid-column-end: 3;
col-end-4	grid-column-end: 4;
col-end-5	grid-column-end: 5;
col-end-6	grid-column-end: 6;
col-end-7	grid-column-end: 7;
col-end-8	grid-column-end: 8;
col-end-9	grid-column-end: 9;
col-end-10	grid-column-end: 10;
col-end-11	grid-column-end: 11;
col-end-12	grid-column-end: 12;
col-end-13	grid-column-end: 13;
col-end-auto	grid-column-end: auto;

2.10 grid-template-rows

grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7	grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8	grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9	grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10	grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11	grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12	grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;
grid-rows-subgrid	grid-template-rows: subgrid;

2.11 grid-row

row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-7	grid-row: span 7 / span 7;
row-span-8	grid-row: span 8 / span 8;
row-span-9	grid-row: span 9 / span 9;
row-span-10	grid-row: span 10 / span 10;
row-span-11	grid-row: span 11 / span 11;
row-span-12	grid-row: span 12 / span 12;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-8	grid-row-start: 8;
row-start-9	grid-row-start: 9;
row-start-10	grid-row-start: 10;
row-start-11	grid-row-start: 11;
row-start-12	grid-row-start: 12;
row-start-13	grid-row-start: 13;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-8	grid-row-end: 8;
row-end-9	grid-row-end: 9;
row-end-10	grid-row-end: 10;
row-end-11	grid-row-end: 11;
row-end-12	grid-row-end: 12;
row-end-13	grid-row-end: 13;
row-end-auto	grid-row-end: auto;

2.12 grid-auto-flow

grid-flow-row	grid-auto-flow: row;
grid-flow-col	grid-auto-flow: column;
grid-flow-dense	grid-auto-flow: dense;
grid-flow-row-dense	grid-auto-flow: row dense;
grid-flow-col-dense	grid-auto-flow: column dense;

2.13 grid-auto-columns

auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

2.14 grid-auto-rows

auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

2.15 gap

gap-0	gap: 0px;
gap-x-0	column-gap: 0px;
gap-y-0	row-gap: 0px;
gap-px	gap: 1px;
gap-x-px	column-gap: 1px;
gap-y-px	row-gap: 1px;
gap-0.5	gap: 0.125rem; /* 2px */
gap-x-0.5	column-gap: 0.125rem; /* 2px */
gap-y-0.5	row-gap: 0.125rem; /* 2px */
gap-1	gap: 0.25rem; /* 4px */
gap-x-1	column-gap: 0.25rem; /* 4px */
gap-y-1	row-gap: 0.25rem; /* 4px */
gap-1.5	gap: 0.375rem; /* 6px */
gap-x-1.5	column-gap: 0.375rem; /* 6px */
gap-y-1.5	row-gap: 0.375rem; /* 6px */
gap-2	gap: 0.5rem; /* 8px */
gap-x-2	column-gap: 0.5rem; /* 8px */
gap-y-2	row-gap: 0.5rem; /* 8px */
gap-2.5	gap: 0.625rem; /* 10px */
gap-x-2.5	column-gap: 0.625rem; /* 10px */
gap-y-2.5	row-gap: 0.625rem; /* 10px */
gap-3	gap: 0.75rem; /* 12px */
gap-x-3	column-gap: 0.75rem; /* 12px */
gap-y-3	row-gap: 0.75rem; /* 12px */
gap-3.5	gap: 0.875rem; /* 14px */
gap-x-3.5	column-gap: 0.875rem; /* 14px */
gap-y-3.5	row-gap: 0.875rem; /* 14px */
gap-4	gap: 1rem; /* 16px */
gap-x-4	column-gap: 1rem; /* 16px */
gap-y-4	row-gap: 1rem; /* 16px */
gap-5	gap: 1.25rem; /* 20px */
gap-x-5	column-gap: 1.25rem; /* 20px */
gap-y-5	row-gap: 1.25rem; /* 20px */
gap-6	gap: 1.5rem; /* 24px */
gap-x-6	column-gap: 1.5rem; /* 24px */
gap-y-6	row-gap: 1.5rem; /* 24px */
gap-7	gap: 1.75rem; /* 28px */
gap-x-7	column-gap: 1.75rem; /* 28px */
gap-y-7	row-gap: 1.75rem; /* 28px */
gap-8	gap: 2rem; /* 32px */
gap-x-8	column-gap: 2rem; /* 32px */
gap-y-8	row-gap: 2rem; /* 32px */
gap-9	gap: 2.25rem; /* 36px */
gap-x-9	column-gap: 2.25rem; /* 36px */
gap-y-9	row-gap: 2.25rem; /* 36px */
gap-10	gap: 2.5rem; /* 40px */
gap-x-10	column-gap: 2.5rem; /* 40px */
gap-y-10	row-gap: 2.5rem; /* 40px */
gap-11	gap: 2.75rem; /* 44px */
gap-x-11	column-gap: 2.75rem; /* 44px */
gap-y-11	row-gap: 2.75rem; /* 44px */
gap-12	gap: 3rem; /* 48px */
gap-x-12	column-gap: 3rem; /* 48px */
gap-y-12	row-gap: 3rem; /* 48px */
gap-14	gap: 3.5rem; /* 56px */
gap-x-14	column-gap: 3.5rem; /* 56px */
gap-y-14	row-gap: 3.5rem; /* 56px */
gap-16	gap: 4rem; /* 64px */
gap-x-16	column-gap: 4rem; /* 64px */
gap-y-16	row-gap: 4rem; /* 64px */
gap-20	gap: 5rem; /* 80px */
gap-x-20	column-gap: 5rem; /* 80px */
gap-y-20	row-gap: 5rem; /* 80px */
gap-24	gap: 6rem; /* 96px */
gap-x-24	column-gap: 6rem; /* 96px */
gap-y-24	row-gap: 6rem; /* 96px */
gap-28	gap: 7rem; /* 112px */
gap-x-28	column-gap: 7rem; /* 112px */
gap-y-28	row-gap: 7rem; /* 112px */
gap-32	gap: 8rem; /* 128px */
gap-x-32	column-gap: 8rem; /* 128px */
gap-y-32	row-gap: 8rem; /* 128px */
gap-36	gap: 9rem; /* 144px */
gap-x-36	column-gap: 9rem; /* 144px */
gap-y-36	row-gap: 9rem; /* 144px */
gap-40	gap: 10rem; /* 160px */
gap-x-40	column-gap: 10rem; /* 160px */
gap-y-40	row-gap: 10rem; /* 160px */
gap-44	gap: 11rem; /* 176px */
gap-x-44	column-gap: 11rem; /* 176px */
gap-y-44	row-gap: 11rem; /* 176px */
gap-48	gap: 12rem; /* 192px */
gap-x-48	column-gap: 12rem; /* 192px */
gap-y-48	row-gap: 12rem; /* 192px */
gap-52	gap: 13rem; /* 208px */
gap-x-52	column-gap: 13rem; /* 208px */
gap-y-52	row-gap: 13rem; /* 208px */
gap-56	gap: 14rem; /* 224px */
gap-x-56	column-gap: 14rem; /* 224px */
gap-y-56	row-gap: 14rem; /* 224px */
gap-60	gap: 15rem; /* 240px */
gap-x-60	column-gap: 15rem; /* 240px */
gap-y-60	row-gap: 15rem; /* 240px */
gap-64	gap: 16rem; /* 256px */
gap-x-64	column-gap: 16rem; /* 256px */
gap-y-64	row-gap: 16rem; /* 256px */
gap-72	gap: 18rem; /* 288px */
gap-x-72	column-gap: 18rem; /* 288px */
gap-y-72	row-gap: 18rem; /* 288px */
gap-80	gap: 20rem; /* 320px */
gap-x-80	column-gap: 20rem; /* 320px */
gap-y-80	row-gap: 20rem; /* 320px */
gap-96	gap: 24rem; /* 384px */
gap-x-96	column-gap: 24rem; /* 384px */
gap-y-96	row-gap: 24rem; /* 384px */

2.16 justify-content

justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

2.17 justify-items

justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

2.18 justify-self

justify-self-auto	justify-self: auto;
justify-self-start	justify-self: start;
justify-self-end	justify-self: end;
justify-self-center	justify-self: center;
justify-self-stretch	justify-self: stretch;

2.19 align-content

content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;
content-baseline	align-content: baseline;
content-stretch	align-content: stretch;

2.20 align-items

items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

2.21 align-self

self-auto	align-self: auto;
self-start	align-self: flex-start;
self-end	align-self: flex-end;
self-center	align-self: center;
self-stretch	align-self: stretch;
self-baseline	align-self: baseline;

2.22 place-content

place-content-center	place-content: center;
place-content-start	place-content: start;
place-content-end	place-content: end;
place-content-between	place-content: space-between;
place-content-around	place-content: space-around;
place-content-evenly	place-content: space-evenly;
place-content-baseline	place-content: baseline;
place-content-stretch	place-content: stretch;

2.23 place-items

place-items-start	place-items: start;
place-items-end	place-items: end;
place-items-center	place-items: center;
place-items-baseline	place-items: baseline;
place-items-stretch	place-items: stretch;

2.24 place-self

place-self-auto	place-self: auto;
place-self-start	place-self: start;
place-self-end	place-self: end;
place-self-center	place-self: center;
place-self-stretch	place-self: stretch;