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
border
*,
::before,
::after {
box-sizing:border-box; //!!!
border-width: 0;
border-style: solid;
border-color: theme('borderColor.DEFAULT', currentColor);
}
!!!官网没有这项配置,但使用中发现这一项也是默认的。(在Vue框架下)

margin
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
button
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
img
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
list
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
responsive layout
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>


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>
