tailwind--tailwind CSS is a utility-first CSS framework for creating custom interfaces quickly

tailwind 特点

• tailwind是PostCSS的一个插件。

• 使用PostCSS的插件cssnano等工具缩小 CSS，并使用Brotli压缩 CSS，减小文件大小。更多请参考optimization

• 使用PostCSS的插件Autoprefixer实现对各版本浏览器的支持。更多请参考Autoprefixer

• 不必命名很复杂的类。

• 可以在不离开HTML的情况下编写CSS，有点像编写内联CSS，不必频繁切换文件，节省大量时间和精力。

• 提供很大的自定义空间，虽然tailwind css带有内置的默认配置，但是可以从配置文件中覆盖它，手动定义任何样式。

• 提供pre-build classes，可以轻松构建复杂的响应式布局。

参考文章

tailwind 不足

• 浏览器代码时，不是特别直观

• 有learining curve，需要一些时间才能掌握。

tailwind basestyle

1. border

*,
::before,
::after {
  box-sizing:border-box; //！！！
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

！！！官网没有这项配置，但使用中发现这一项也是默认的。（在Vue框架下）

2. margin

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

3. button

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

4. img

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

5. list

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

6. responsive layout

Breakpoint prefixer

container

7. postion

• static（normal flow/ignoring any offsets/not for absolutely positioned element）

  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="static w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>

• fixed（position related to the browser window/calculating any offests relative to the viewpoint/for absolutely positioned element ）

  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="fixed w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>

• relative（normal flow/ignoring any offsets/ for absolutely positioned element）

  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="relative w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>

• absolute（outside the normal flow/calculating any offsets relative to the nearest parent other than `static`）

• sticky

<div>
    <dl>
      <dt class="sticky top-0 bg-blue-200">A</dt>
      <dd>Andrew W.K.</dd>
      <dd>Apparat</dd>
      <dd>Arcade Fire</dd>
      <dd>At The Drive-In</dd>
      <dd>Aziz Ansari</dd>
    </dl>
    <dl>
      <dt class="sticky top-0 bg-blue-200">C</dt>
      <dd>Chromeo</dd>
      <dd>Common</dd>
      <dd>Converge</dd>
      <dd>Crystal Castles</dd>
      <dd>Cursive</dd>
    </dl>
    <dl>
</div>

8. offset

Use the {top|right|bottom|left|inset}-{size} utilities to set the horizontal or vertical position of a positioned element.

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">09</div>
</div>