tailwindcss - API

小刘鸭地下城
84 阅读6分钟

布局

Container

Class断点  属性
containerNonewidth: 100%;
sm (640px)max-width: 640px;
md (768px)max-width: 768px;
lg (1024px)max-width: 1024px;
xl (1280px)max-width: 1280px;
2xl (1536px)max-width: 1536px;

Columns

列宽根据列数调整

<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

列数根据列宽调整

<div class="columns-3xs ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

gap-x 执行列宽

<div class="gap-8 columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

Break After、Break Before、Break Inside

用于控制 column 或页元素应如何分隔

Class属性
break-after-columnbreak-after: column;
break-before-columnbreak-before: column;
break-inside-avoid-columnbreak-inside: avoid-column;

break-after-column 后面内容成为一列 break-before-column 前面内容成为一列 break-inside-avoid-column 后面内容不受 column 影响

<div class="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p class="break-after-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

isolation

用于控制元素是否应显式创建上下文

<div class="isolate ...">
  <!-- ... -->
</div>

Flexbox & Grid

Flex Basis

用于控制 Flex 项目初始大小

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>

Flex

用于控制 flex 项如何增长和收缩

Class属性作用
flex-1flex: 1 1 0%;允许 Flex 项根据需要增长和收缩，忽略其初始大小
flex-autoflex: 1 1 auto;允许 Flex 项目根据其初始大小进行放大和缩小
flex-initialflex: 0 1 auto;允许 Flex 项目收缩但不增长，考虑其初始大小
flex-noneflex: none;防止 Flex 项增大或缩小

Flex Grow

使用 grow 允许 Flex 项目增长以填充任何可用空间

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="grow h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Flex Shrink

用于控制 flex 项收缩方式

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="shrink w-64 h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Spacing

使用 space-x-* 工具控制元素之间的水平间距。

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

使用 space-y-* 工具控制元素之间的垂直间距。

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

Sizing

Size

用于同时设置元素的宽度和高度

使用 size-full 将元素的宽度和高度设置为父容器宽度和高度的100%。

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

Typography

Font Size

使用 text-* 实用程序控制元素的字体大小和行高

在设置字体大小的同时，通过向任何字体大小实用程序添加行高修饰符来设置元素的行高。例如，使用 text-xl/8

<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

Letter Spacing

使用 tracking-* 实用程序控制元素的字母间距。

<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>

Line Clamp

用于将文本限制到特定行数

使用 line-clamp-* 实用程序在特定行数后截断文本块。

<article>
  <time>Mar 10, 2020</time>
  <h2>Boost your conversion rate</h2>
  <p class="line-clamp-3">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</p>
  <div>
    <img src="..." />
    Lindsay Walton
  </div>
</article>

Line Height

使用 leading-none 、 leading-tight 、 leading-snug 、 leading-normal 、 leading-relaxed 和 leading-loose 实用程序根据元素当前的字体大小为元素提供相对行高。

<p class="leading-normal ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>

Text Color

使用颜色不透明度修改器控制元素文本颜色的不透明度。

<p class="text-sky-400/100">The quick brown fox...</p>
<p class="text-sky-400/75">The quick brown fox...</p>
<p class="text-sky-400/50">The quick brown fox...</p>
<p class="text-sky-400/25">The quick brown fox...</p>
<p class="text-sky-400/0">The quick brown fox...</p>

Text Decoration

使用 decoration-* 工具更改元素的文本装饰颜色、样式、厚度。 decoration-sky-500、decoration-solid、decoration-1

Text Underline Offset

使用 underline-offset-* 实用程序更改文本下划线的偏移量。

<p class="underline underline-offset-1 ...">The quick brown fox...</p>
<p class="underline underline-offset-2 ...">The quick brown fox...</p>
<p class="underline underline-offset-4 ...">The quick brown fox...</p>
<p class="underline underline-offset-8 ...">The quick brown fox...</p>

Text Transform

Class属性
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;
<p class="normal-case ...">The quick brown fox ...</p>
<p class="uppercase ...">The quick brown fox ...</p>
<p class="lowercase ...">The quick brown fox ...</p>
<p class="capitalize ...">The quick brown fox ...</p>

Text Overflow

Class属性
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

Text Wrap

Class属性
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

Word Break

Class属性
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
break-keepword-break: keep-all;

Content

需要和伪元素一块使用

Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-sky-400 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

Backgrounds

Background Attachment

Class属性
bg-fixedbackground-attachment: fixed;
bg-localbackground-attachment: local;
bg-scrollbackground-attachment: scroll;

Background Clip

Class属性
bg-clip-borderbackground-clip: border-box;
bg-clip-paddingbackground-clip: padding-box;
bg-clip-contentbackground-clip: content-box;
bg-clip-textbackground-clip: text;
<div class="text-5xl font-extrabold ...">
  <span
    class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
  >
    Hello world
  </span>
</div>

Background Position

Class属性
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-leftbackground-position: left;
bg-left-bottombackground-position: left bottom;
bg-left-topbackground-position: left top;
bg-rightbackground-position: right;
bg-right-bottombackground-position: right bottom;
bg-right-topbackground-position: right top;
bg-topbackground-position: top;

Background Repeat

Class属性
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

Background Size

Class属性
bg-autobackground-size: auto;
bg-coverbackground-size: cover;
bg-containbackground-size: contain;

Borders

Border Radius

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

Divide Width

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

Effects

Box Shadow

内阴影

<div class="shadow-inner ..."></div>

Tables

Border Collapse

表格线条是否合并为一条

Class属性
border-collapseborder-collapse: collapse;
border-separateborder-collapse: separate;

Transitions & Animation

Animation

animate-spin 旋转、animate-ping 放大、animate-pulse 显隐、animate-bounce 跳动

Interactivity

Accent Color

accent-* 改变控件颜色

Appearance

Class属性
appearance-noneappearance: none;
appearance-autoappearance: auto;

appearance-none 删除原生控件样式，用于创建表单

<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

<div class="grid">
  <select class="appearance-none row-start-1 col-start-1 bg-slate-50 dark:bg-slate-800 ...">
    <option>Yes</option>
    <option>No</option>
    <option>Maybe</option>
  </select>
  <svg class="pointer-events-none row-start-1 col-start-1 ...">
    <!-- ... -->
  </svg>
</div>

Caret Color

caret-* 改变输入框光标的颜色

Scroll Margin

滚动元素的偏移量，通常用于锚点坐标滚动

<div class="snap-x ...">
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Scroll Padding

滚动容器的偏移量，通常用于锚点坐标滚动

<div class="scroll-pl-6 snap-x ...">
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Scroll Snap Align

滚动元素处于什么位置

Class属性
snap-startscroll-snap-align: start;
snap-endscroll-snap-align: end;
snap-centerscroll-snap-align: center;
snap-align-nonescroll-snap-align: none;
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Scroll Snap Stop

滚动是否跳过元素

Class属性
snap-normalscroll-snap-stop: normal;
snap-alwaysscroll-snap-stop: always;
<div class="snap-x snap-mandatory ...">
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Scroll Snap Type

滚动元素如何使用 snap

Class属性
snap-nonescroll-snap-type: none;
snap-xscroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-yscroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-bothscroll-snap-type: both var(--tw-scroll-snap-strictness);
snap-mandatory--tw-scroll-snap-strictness: mandatory;
snap-proximity--tw-scroll-snap-strictness: proximity;
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Touch Action

触摸屏元素如何滚动和缩放

Class属性
touch-autotouch-action: auto;
touch-nonetouch-action: none;
touch-pan-xtouch-action: pan-x;
touch-pan-lefttouch-action: pan-left;
touch-pan-righttouch-action: pan-right;
touch-pan-ytouch-action: pan-y;
touch-pan-uptouch-action: pan-up;
touch-pan-downtouch-action: pan-down;
touch-pinch-zoomtouch-action: pinch-zoom;
touch-manipulationtouch-action: manipulation;

User Select

文本选择

Class属性
select-noneuser-select: none;
select-textuser-select: text;
select-alluser-select: all;
select-autouser-select: auto;

Will Change

Class属性
will-change-autowill-change: auto;
will-change-scrollwill-change: scroll-position;
will-change-contentswill-change: contents;
will-change-transformwill-change: transform;
avatar
文章
阅读
粉丝