TailWindCSS入门

上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度)2.颜色一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，gre

杰宝多多

6495人浏览 · 2022-06-15 17:59:53

杰宝多多 · 2022-06-15 17:59:53 发布

上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。

好啦话不多说，开始吧！

常用工具类

1.screens(也可以自定义媒体查询屏幕的宽度)

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

2.颜色 类名= 使用目标+颜色+权重（可以自定颜色，否则按照默认配置来显示）

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

在color.js里面有很多颜色的列举

一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green：

文字颜色： text-green  
背景颜色： bg-green  
边框颜色1： border-green      //default，不需要数字描述  
边框颜色2： border-green-700  //数字表示颜色的深浅，越大颜色越深

3.纵横比--aspect

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

4.容器--container

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

6.列--columns

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

7. break-after & break-before

这个我真没太弄懂🤦‍♀️

//使用这些break-after-{value}实用程序来控制列或分页符在元素之后的行为方式。例如，使用该break-after-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>

//使用这些break-before-{value}实用程序来控制列或分页符在元素之前的行为方式。例如，使用该break-before-column实用程序在元素之前强制分栏。

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

//使用这些break-inside-{value}实用程序来控制列或分页符在元素中的行为方式。例如，使用该break-inside-avoid-column实用程序来避免元素内的分栏符。

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

8.box-decoration-slice和box-decoration-clone

//使用box-decoration-slice和box-decoration-clone实用程序来控制是否应该将诸如背景、边框、边框图像、框阴影、剪辑页面、边距和填充等属性呈现为好像元素是一个连续的片段或不同的块。
<span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Hello<br>
  World
</span>
<span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Hello<br>
  World
</span>

9.bos-sizing：控制浏览器如何计算元素的总大小的功能类。

10.display

11.浮动和清除浮动

12.堆叠--solate

//使用isolate和isolation-auto实用程序来控制元素是否应显式创建新的堆叠上下文。
<div class="isolate md:isolation-auto">
  <!-- ... -->
</div>

13 .指定替换元素的内容应如何定位在其容器中

< img class="object-center hover:object-top" src="...">

14.overflow和过度滚动行为overscroll

overscroll-contain overscroll-none防止目标区域中的滚动触发父元素中的滚动，但在支持它的操作系统中滚动超过容器末尾时保留“反弹”效果。

15.position 与设置定位元素{top|right|bottom|left|inset}-{size}的水平或垂直位置

<div>
  <div>
    <div class="sticky top-0 ...">A</div>
    <div>
      <div>
        < img src="..." />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        < img src="..." />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        < img src="..." />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>

16. invisible

//invisible用于隐藏元素，但仍保留其在 DOM 中的位置，影响其他元素的布局（与.hidden显示文档中的比较）。

<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>

17.z-index

//z-{index}使用实用程序控制 Tailwind 中元素的堆叠顺序（或三维定位），无论其显示顺序如何。

<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</div>

18.文本 "text-"

19.字体 "font-"

字体类型 "font-"+{type}

字体粗细 "font-"+{weight}

20.行高 "leading-"+{size}

21.背景 "bg-"

<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>

22. 边框 "rounded-"或"border-"

"rounded-"设置边框的圆角样式，"border-"设置边框颜色、粗细、边框类型等

<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>

23. 边距 "p-" "m-"

内边距padding：使用p{t|r|b|l|x|y}-{size}功能类控制元素一侧的内边距。size是tailwind.config.js中配置的spacing对象的键。

外边距margin：使用 m{t|r|b|l|x|y}-{size},用法同padding

24. 布局

1>. Flex "flex-"

flex-initial允许弹性项目缩小但不增长，考虑到它的初始大小：

flex-1允许弹性项目根据需要增长和缩小，忽略其初始大小：

flex-auto允许弹性项目增长和收缩，考虑到它的初始大小：

flex-none防止弹性项目增长或缩小：

grow允许弹性项目增长以填充任何可用空间：grow-0防止弹性项目增长：

shrink允许弹性项目在需要时缩小: shrink-0防止弹性项目收缩：

<div class="flex">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1 hidden">3</div>
</div>

2>.grid布局

//grid-cols-{n}实用程序创建具有n 个相同大小的列的网格。

<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div> </div>
//使用col-start-{n}和col-end-{n}实用程序使元素在第 n条网格线开始或结束。这些也可以与col-span-{n}实用程序结合使用以跨越特定数量的列。

请注意，CSS 网格线从 1 开始，而不是 0，因此 6 列网格中的全宽元素将从第 1 行开始并在第 7 行结束。
<div class="grid grid-cols-6 gap-4"> <div class="col-start-2 col-span-4 ...">01</div> <div class="col-start-1 col-end-3 ...">02</div> <div class="col-end-7 col-span-2 ...">03</div> <div class="col-start-1 col-end-7 ...">04</div> </div>

//grid-rows-{n}实用程序创建具有n 个大小相等的行的网格。
<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
//使用row-start-{n}和row-end-{n}实用程序使元素在第 n条网格线开始或结束。这些也可以与row-span-{n}实用程序结合使用以跨越特定数量的行。

请注意，CSS 网格线从 1 开始，而不是 0，因此 3 行网格中的全高元素将从第 1 行开始，到第 4 行结束。
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">01</div>
  <div class="row-end-3 row-span-2 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>

25.order

//order-{order}以与它们在 DOM 中出现的顺序不同的顺序呈现 flex 和 grid 项目。

<div class="flex justify-between ..."> <div class="order-last">01</div> <div>02</div> <div>03</div> </div>

26.basis

//使用basis-{size}实用程序设置弹性项目的初始大小。
<div class="basis-1/3 hover:basis-1/2">
  <!-- ... -->
</div>

27. 伪类 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能类

并不是所有功能类都可以放在伪类的后面，只有tailwind文档规定的才可使用，如果需要在tailwind的配置文件中配置variants选项。

//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
  Hover me
</button>
//disabled
<button class="disabled:opacity-50">
  Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">

参考文章：TailWind CSS 学习分享 - 简书

还有很多今天就不一一列举了，需要的小伙伴可查阅官方文档