// 引入一些 tailwind 中的工具类
|
|
// #region ====================== Layout ======================
|
/* Floats
|
--------------------------------------------------------- */
|
.float-start {
|
float: inline-start;
|
}
|
.float-end {
|
float: inline-end;
|
}
|
.float-right {
|
float: right;
|
}
|
.float-left {
|
float: left;
|
}
|
|
/* Position
|
--------------------------------------------------------- */
|
.static {
|
position: static;
|
}
|
|
.fixed {
|
position: fixed;
|
}
|
|
.absolute {
|
position: absolute;
|
}
|
|
.relative {
|
position: relative;
|
}
|
|
.sticky {
|
position: sticky;
|
}
|
|
/* overflow
|
--------------------------------------------------------- */
|
.overflow-auto {
|
overflow: auto !important;
|
}
|
|
.overflow-hidden {
|
overflow: hidden;
|
}
|
|
.overflow-x-hidden {
|
overflow-x: hidden;
|
}
|
|
.overflow-y-hidden {
|
overflow-y: hidden;
|
}
|
|
// #endregion
|
|
// #region ====================== Flexbox & Grid ======================
|
/* 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;
|
}
|
|
/* Flex Grow
|
--------------------------------------------------------- */
|
.grow {
|
flex-grow: 1;
|
}
|
|
.grow-0 {
|
// 默认 grow 为0，即不会占据剩余宽度
|
flex-grow: 0;
|
}
|
|
/* Flex shrink
|
--------------------------------------------------------- */
|
.shrink {
|
// 默认 shrink 为1，即轴过长会按比例收缩
|
flex-shrink: 1;
|
}
|
|
.shrink-0 {
|
flex-shrink: 0;
|
}
|
|
/* Flex Wrap
|
--------------------------------------------------------- */
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.flex-nowrap {
|
// 默认过长不换行
|
flex-wrap: nowrap;
|
}
|
|
.flex-wrap-reverse {
|
flex-wrap: wrap-reverse;
|
}
|
/* Justify Content
|
--------------------------------------------------------- */
|
|
.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;
|
}
|
|
/* Align Items
|
--------------------------------------------------------- */
|
.items-start {
|
align-items: flex-start;
|
}
|
.items-end {
|
align-items: flex-end;
|
}
|
.items-center {
|
align-items: center;
|
}
|
// #endregion
|
|
/* Align Self
|
--------------------------------------------------------- */
|
.self-start {
|
align-self: flex-start;
|
}
|
.self-end {
|
align-self: flex-end;
|
}
|
.self-center {
|
align-self: center;
|
}
|
|
// #endregion
|
|
// #region ====================== Sizing ======================
|
/* Width
|
--------------------------------------------------------- */
|
.w-0 {
|
width: 0px;
|
}
|
.w-px {
|
width: 1px;
|
}
|
.w-0\.5 {
|
width: 0.125rem;
|
} /* 2px */
|
.w-1 {
|
width: 0.25rem;
|
} /* 4px */
|
.w-1\.5 {
|
width: 0.375rem;
|
} /* 6px */
|
.w-2 {
|
width: 0.5rem;
|
} /* 8px */
|
.w-2\.5 {
|
width: 0.625rem;
|
} /* 10px */
|
.w-3 {
|
width: 0.75rem;
|
} /* 12px */
|
.w-3\.5 {
|
width: 0.875rem;
|
} /* 14px */
|
.w-4 {
|
width: 1rem;
|
} /* 16px */
|
.w-5 {
|
width: 1.25rem;
|
} /* 20px */
|
.w-6 {
|
width: 1.5rem;
|
} /* 24px */
|
.w-7 {
|
width: 1.75rem;
|
} /* 28px */
|
.w-8 {
|
width: 2rem;
|
} /* 32px */
|
.w-9 {
|
width: 2.25rem;
|
} /* 36px */
|
.w-10 {
|
width: 2.5rem;
|
} /* 40px */
|
.w-11 {
|
width: 2.75rem;
|
} /* 44px */
|
.w-12 {
|
width: 3rem;
|
} /* 48px */
|
.w-14 {
|
width: 3.5rem;
|
} /* 56px */
|
.w-16 {
|
width: 4rem;
|
} /* 64px */
|
.w-20 {
|
width: 5rem;
|
} /* 80px */
|
.w-24 {
|
width: 6rem;
|
} /* 96px */
|
.w-28 {
|
width: 7rem;
|
} /* 112px */
|
.w-32 {
|
width: 8rem;
|
} /* 128px */
|
.w-36 {
|
width: 9rem;
|
} /* 144px */
|
.w-40 {
|
width: 10rem;
|
} /* 160px */
|
.w-44 {
|
width: 11rem;
|
} /* 176px */
|
.w-48 {
|
width: 12rem;
|
} /* 192px */
|
.w-52 {
|
width: 13rem;
|
} /* 208px */
|
.w-56 {
|
width: 14rem;
|
} /* 224px */
|
.w-60 {
|
width: 15rem;
|
} /* 240px */
|
.w-64 {
|
width: 16rem;
|
} /* 256px */
|
.w-72 {
|
width: 18rem;
|
} /* 288px */
|
.w-80 {
|
width: 20rem;
|
} /* 320px */
|
.w-96 {
|
width: 24rem;
|
} /* 384px */
|
.w-auto {
|
width: auto;
|
}
|
.w-1\/2 {
|
width: 50%;
|
}
|
.w-1\/3 {
|
width: 33.333333%;
|
}
|
.w-2\/3 {
|
width: 66.666667%;
|
}
|
.w-1\/4 {
|
width: 25%;
|
}
|
.w-2\/4 {
|
width: 50%;
|
}
|
.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.666667%;
|
}
|
.w-2\/6 {
|
width: 33.333333%;
|
}
|
.w-3\/6 {
|
width: 50%;
|
}
|
.w-4\/6 {
|
width: 66.666667%;
|
}
|
.w-5\/6 {
|
width: 83.333333%;
|
}
|
.w-1\/12 {
|
width: 8.333333%;
|
}
|
.w-2\/12 {
|
width: 16.666667%;
|
}
|
.w-3\/12 {
|
width: 25%;
|
}
|
.w-4\/12 {
|
width: 33.333333%;
|
}
|
.w-5\/12 {
|
width: 41.666667%;
|
}
|
.w-6\/12 {
|
width: 50%;
|
}
|
.w-7\/12 {
|
width: 58.333333%;
|
}
|
.w-8\/12 {
|
width: 66.666667%;
|
}
|
.w-9\/12 {
|
width: 75%;
|
}
|
.w-10\/12 {
|
width: 83.333333%;
|
}
|
.w-11\/12 {
|
width: 91.666667%;
|
}
|
.w-full {
|
width: 100%;
|
}
|
.w-screen {
|
width: 100vw;
|
}
|
|
/* Height
|
--------------------------------------------------------- */
|
.h-0 {
|
height: 0px;
|
}
|
.h-px {
|
height: 1px;
|
}
|
.h-0\.5 {
|
height: 0.125rem;
|
} /* 2px */
|
.h-1 {
|
height: 0.25rem;
|
} /* 4px */
|
.h-1\.5 {
|
height: 0.375rem;
|
} /* 6px */
|
.h-2 {
|
height: 0.5rem;
|
} /* 8px */
|
.h-2\.5 {
|
height: 0.625rem;
|
} /* 10px */
|
.h-3 {
|
height: 0.75rem;
|
} /* 12px */
|
.h-3\.5 {
|
height: 0.875rem;
|
} /* 14px */
|
.h-4 {
|
height: 1rem;
|
} /* 16px */
|
.h-5 {
|
height: 1.25rem;
|
} /* 20px */
|
.h-6 {
|
height: 1.5rem;
|
} /* 24px */
|
.h-7 {
|
height: 1.75rem;
|
} /* 28px */
|
.h-8 {
|
height: 2rem;
|
} /* 32px */
|
.h-9 {
|
height: 2.25rem;
|
} /* 36px */
|
.h-10 {
|
height: 2.5rem;
|
} /* 40px */
|
.h-11 {
|
height: 2.75rem;
|
} /* 44px */
|
.h-12 {
|
height: 3rem;
|
} /* 48px */
|
.h-14 {
|
height: 3.5rem;
|
} /* 56px */
|
.h-16 {
|
height: 4rem;
|
} /* 64px */
|
.h-20 {
|
height: 5rem;
|
} /* 80px */
|
.h-24 {
|
height: 6rem;
|
} /* 96px */
|
.h-28 {
|
height: 7rem;
|
} /* 112px */
|
.h-32 {
|
height: 8rem;
|
} /* 128px */
|
.h-36 {
|
height: 9rem;
|
} /* 144px */
|
.h-40 {
|
height: 10rem;
|
} /* 160px */
|
.h-44 {
|
height: 11rem;
|
} /* 176px */
|
.h-48 {
|
height: 12rem;
|
} /* 192px */
|
.h-52 {
|
height: 13rem;
|
} /* 208px */
|
.h-56 {
|
height: 14rem;
|
} /* 224px */
|
.h-60 {
|
height: 15rem;
|
} /* 240px */
|
.h-64 {
|
height: 16rem;
|
} /* 256px */
|
.h-72 {
|
height: 18rem;
|
} /* 288px */
|
.h-80 {
|
height: 20rem;
|
} /* 320px */
|
.h-96 {
|
height: 24rem;
|
} /* 384px */
|
.h-auto {
|
height: auto;
|
}
|
.h-1\/2 {
|
height: 50%;
|
}
|
.h-1\/3 {
|
height: 33.333333%;
|
}
|
.h-2\/3 {
|
height: 66.666667%;
|
}
|
.h-1\/4 {
|
height: 25%;
|
}
|
.h-2\/4 {
|
height: 50%;
|
}
|
.h-3\/4 {
|
height: 75%;
|
}
|
.h-1\/5 {
|
height: 20%;
|
}
|
.h-2\/5 {
|
height: 40%;
|
}
|
.h-3\/5 {
|
height: 60%;
|
}
|
.h-4\/5 {
|
height: 80%;
|
}
|
.h-1\/6 {
|
height: 16.666667%;
|
}
|
.h-2\/6 {
|
height: 33.333333%;
|
}
|
.h-3\/6 {
|
height: 50%;
|
}
|
.h-4\/6 {
|
height: 66.666667%;
|
}
|
.h-5\/6 {
|
height: 83.333333%;
|
}
|
.h-full {
|
height: 100%;
|
}
|
.h-screen {
|
height: 100vh;
|
}
|
|
/* Size
|
--------------------------------------------------------- */
|
.size-0 {
|
width: 0px;
|
height: 0px;
|
}
|
|
.size-px {
|
width: 1px;
|
height: 1px;
|
}
|
|
.size-0\.5 {
|
width: 0.125rem; /* 2px */
|
height: 0.125rem; /* 2px */
|
}
|
.size-1 {
|
width: 0.25rem; /* 4px */
|
height: 0.25rem; /* 4px */
|
}
|
.size-1\.5 {
|
width: 0.375rem; /* 6px */
|
height: 0.375rem; /* 6px */
|
}
|
.size-2 {
|
width: 0.5rem; /* 8px */
|
height: 0.5rem; /* 8px */
|
}
|
.size-2\.5 {
|
width: 0.625rem; /* 10px */
|
height: 0.625rem; /* 10px */
|
}
|
.size-3 {
|
width: 0.75rem; /* 12px */
|
height: 0.75rem; /* 12px */
|
}
|
.size-3\.5 {
|
width: 0.875rem; /* 14px */
|
height: 0.875rem; /* 14px */
|
}
|
.size-4 {
|
width: 1rem; /* 16px */
|
height: 1rem; /* 16px */
|
}
|
.size-5 {
|
width: 1.25rem; /* 20px */
|
height: 1.25rem; /* 20px */
|
}
|
.size-6 {
|
width: 1.5rem; /* 24px */
|
height: 1.5rem; /* 24px */
|
}
|
.size-7 {
|
width: 1.75rem; /* 28px */
|
height: 1.75rem; /* 28px */
|
}
|
.size-8 {
|
width: 2rem; /* 32px */
|
height: 2rem; /* 32px */
|
}
|
.size-9 {
|
width: 2.25rem; /* 36px */
|
height: 2.25rem; /* 36px */
|
}
|
.size-10 {
|
width: 2.5rem; /* 40px */
|
height: 2.5rem; /* 40px */
|
}
|
.size-11 {
|
width: 2.75rem; /* 44px */
|
height: 2.75rem; /* 44px */
|
}
|
.size-12 {
|
width: 3rem; /* 48px */
|
height: 3rem; /* 48px */
|
}
|
.size-14 {
|
width: 3.5rem; /* 56px */
|
height: 3.5rem; /* 56px */
|
}
|
.size-16 {
|
width: 4rem; /* 64px */
|
height: 4rem; /* 64px */
|
}
|
.size-20 {
|
width: 5rem; /* 80px */
|
height: 5rem; /* 80px */
|
}
|
.size-24 {
|
width: 6rem; /* 96px */
|
height: 6rem; /* 96px */
|
}
|
.size-28 {
|
width: 7rem; /* 112px */
|
height: 7rem; /* 112px */
|
}
|
.size-32 {
|
width: 8rem; /* 128px */
|
height: 8rem; /* 128px */
|
}
|
.size-36 {
|
width: 9rem; /* 144px */
|
height: 9rem; /* 144px */
|
}
|
.size-40 {
|
width: 10rem; /* 160px */
|
height: 10rem; /* 160px */
|
}
|
.size-44 {
|
width: 11rem; /* 176px */
|
height: 11rem; /* 176px */
|
}
|
.size-48 {
|
width: 12rem; /* 192px */
|
height: 12rem; /* 192px */
|
}
|
.size-52 {
|
width: 13rem; /* 208px */
|
height: 13rem; /* 208px */
|
}
|
.size-56 {
|
width: 14rem; /* 224px */
|
height: 14rem; /* 224px */
|
}
|
.size-60 {
|
width: 15rem; /* 240px */
|
height: 15rem; /* 240px */
|
}
|
.size-64 {
|
width: 16rem; /* 256px */
|
height: 16rem; /* 256px */
|
}
|
.size-72 {
|
width: 18rem; /* 288px */
|
height: 18rem; /* 288px */
|
}
|
.size-80 {
|
width: 20rem; /* 320px */
|
height: 20rem; /* 320px */
|
}
|
.size-96 {
|
width: 24rem; /* 384px */
|
height: 24rem; /* 384px */
|
}
|
.size-auto {
|
width: auto;
|
height: auto;
|
}
|
.size-1\/2 {
|
width: 50%;
|
height: 50%;
|
}
|
.size-1\/3 {
|
width: 33.333333%;
|
height: 33.333333%;
|
}
|
.size-2\/3 {
|
width: 66.666667%;
|
height: 66.666667%;
|
}
|
.size-1\/4 {
|
width: 25%;
|
height: 25%;
|
}
|
.size-2\/4 {
|
width: 50%;
|
height: 50%;
|
}
|
.size-3\/4 {
|
width: 75%;
|
height: 75%;
|
}
|
.size-1\/5 {
|
width: 20%;
|
height: 20%;
|
}
|
.size-2\/5 {
|
width: 40%;
|
height: 40%;
|
}
|
.size-3\/5 {
|
width: 60%;
|
height: 60%;
|
}
|
.size-4\/5 {
|
width: 80%;
|
height: 80%;
|
}
|
.size-1\/6 {
|
width: 16.666667%;
|
height: 16.666667%;
|
}
|
.size-2\/6 {
|
width: 33.333333%;
|
height: 33.333333%;
|
}
|
.size-3\/6 {
|
width: 50%;
|
height: 50%;
|
}
|
.size-4\/6 {
|
width: 66.666667%;
|
height: 66.666667%;
|
}
|
.size-5\/6 {
|
width: 83.333333%;
|
height: 83.333333%;
|
}
|
.size-1\/12 {
|
width: 8.333333%;
|
height: 8.333333%;
|
}
|
.size-2\/12 {
|
width: 16.666667%;
|
height: 16.666667%;
|
}
|
.size-3\/12 {
|
width: 25%;
|
height: 25%;
|
}
|
.size-4\/12 {
|
width: 33.333333%;
|
height: 33.333333%;
|
}
|
.size-5\/12 {
|
width: 41.666667%;
|
height: 41.666667%;
|
}
|
.size-6\/12 {
|
width: 50%;
|
height: 50%;
|
}
|
.size-7\/12 {
|
width: 58.333333%;
|
height: 58.333333%;
|
}
|
.size-8\/12 {
|
width: 66.666667%;
|
height: 66.666667%;
|
}
|
.size-9\/12 {
|
width: 75%;
|
height: 75%;
|
}
|
.size-10\/12 {
|
width: 83.333333%;
|
height: 83.333333%;
|
}
|
.size-11\/12 {
|
width: 91.666667%;
|
height: 91.666667%;
|
}
|
.size-full {
|
width: 100%;
|
height: 100%;
|
}
|
// #endregion
|
|
// #region ====================== Typography ======================
|
/* Font Size
|
--------------------------------------------------------- */
|
.text-xs {
|
font-size: 0.75rem; /* 12px */
|
line-height: 1rem; /* 16px */
|
}
|
.text-sm {
|
font-size: 0.875rem; /* 14px */
|
line-height: 1.25rem; /* 20px */
|
}
|
.text-base {
|
font-size: 1rem; /* 16px */
|
line-height: 1.5rem; /* 24px */
|
}
|
.text-lg {
|
font-size: 1.125rem; /* 18px */
|
line-height: 1.75rem; /* 28px */
|
}
|
.text-xl {
|
font-size: 1.25rem; /* 20px */
|
line-height: 1.75rem; /* 28px */
|
}
|
.text-2xl {
|
font-size: 1.5rem; /* 24px */
|
line-height: 2rem; /* 32px */
|
}
|
.text-3xl {
|
font-size: 1.875rem; /* 30px */
|
line-height: 2.25rem; /* 36px */
|
}
|
.text-4xl {
|
font-size: 2.25rem; /* 36px */
|
line-height: 2.5rem; /* 40px */
|
}
|
.text-5xl {
|
font-size: 3rem; /* 48px */
|
line-height: 1;
|
}
|
.text-6xl {
|
font-size: 3.75rem; /* 60px */
|
line-height: 1;
|
}
|
.text-7xl {
|
font-size: 4.5rem; /* 72px */
|
line-height: 1;
|
}
|
.text-8xl {
|
font-size: 6rem; /* 96px */
|
line-height: 1;
|
}
|
.text-9xl {
|
font-size: 8rem; /* 128px */
|
line-height: 1;
|
}
|
|
/* Text Align
|
--------------------------------------------------------- */
|
.text-left {
|
text-align: left;
|
}
|
.text-center {
|
text-align: center;
|
}
|
.text-right {
|
text-align: right;
|
}
|
.text-justify {
|
text-align: justify;
|
}
|
.text-start {
|
text-align: start;
|
}
|
.text-end {
|
text-align: end;
|
}
|
// #endregion
|
|
// #region ====================== Borders ======================
|
/* Border Width
|
--------------------------------------------------------- */
|
.border-0 {
|
border-width: 0px;
|
}
|
// #endregion
|
