tailwind自适应原理，常用class，常见坑以及个人补充功能

tailwind自适应原理，常用class，常见坑以及个人补充功能

自适应：

通过添加md:flex实用程序，它会出现display: flex在中等屏幕和更大的屏幕上。

当父级是flex容器时，我们要确保图像不会缩小，因此我们添加了它md:flex-shrink-0以防止在中型和更大尺寸的屏幕上缩小

在小屏幕上，图像默认情况下自动为全角。在中等屏幕及以上的屏幕上，我们已使用将宽度限制为固定大小md:w-56。

在小屏幕上，内容部分用于mt-4在内容和图像之间添加一些边距。

未加前缀的实用程序（如uppercase）对所有屏幕尺寸都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

bg-red-500 背景 红色 全局有效
sm:bg-red-500 仅sm有效

这种方法最令人们惊讶的地方是，要为移动设备设计样式，您需要使用实用程序的无前缀版本，而不是带sm:前缀的版本。不要将其sm:视为“在小屏幕上”的含义，而应将其视为“在小断点处”。

因此，通常最好先为设计实现移动布局，然后在对sm屏幕有意义的所有更改上进行分层，然后再对md屏幕等进行分层。

Tailwind的断点仅包含a min-width，不包括a max-width，这意味着您在较小的断点处添加的任何实用程序也将应用于较大的断点。

伪类：

<form>
  <input class="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ...">
  <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
    Sign Up
  </button>
</form>

顺风包括造型上的元素一流的支持hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, group-hover, group-focus, and focus-within.

添加first:前缀以仅在实用程序是其父级的第一个孩子时才应用它。当在某种循环中生成元素时，这最有用。

.px-4 {

    padding-left: 1rem!important;
    padding-right: 1rem!important;
}

.py-2 {

    padding-top: .5rem!important;
    padding-bottom: .5rem!important;
}
m-2 {
    margin: .5rem!important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
}

.gap-4 {
    grid-gap: 1rem!important;
    gap: 1rem!important;
}
.grid {
    display: grid!important;
}
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)!important;
}

.p-6 {
    padding: 1.5rem!important;
}
.max-w-sm {
    max-width: 24rem!important;
}
.mx-auto {
    margin-left: auto!important;
    margin-right: auto!important;
}
.flex {
    display: flex!important;
}
.rounded-lg {
    border-radius: .5rem!important;
}
.leading-tight {
    line-height: 1.25!important;
}

常用：

圆角：

<div class="rounded-sm"></div>
<div class="rounded"></div>
<div class="rounded-md"></div>
<div class="rounded-lg"></div>

input focus默认样式去除：

<input type="text" class="outline-none" />

阴影：

<div class="shadow-xs"></div>
<div class="shadow-sm"></div>
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>
<div class="shadow-2xl"></div>

字体大小：

.text-xs	font-size: .75rem;
.text-sm	font-size: .875rem;
.text-base	font-size: 1rem;
.text-lg	font-size: 1.125rem;
.text-xl	font-size: 1.25rem;
.text-2xl	font-size: 1.5rem;
.text-3xl	font-size: 1.875rem;
.text-4xl	font-size: 2.25rem;
.text-5xl	font-size: 3rem;
.text-6xl	font-size: 4rem;

width:

.w-0	width: 0;
.w-1	width: 0.25rem;
.w-2	width: 0.5rem;
.w-3	width: 0.75rem;
.w-4	width: 1rem;
.w-5	width: 1.25rem;
.w-6	width: 1.5rem;
.w-8	width: 2rem;
.w-10	width: 2.5rem;
.w-12	width: 3rem;
.w-16	width: 4rem;
.w-20	width: 5rem;
.w-24	width: 6rem;
.w-32	width: 8rem;
.w-40	width: 10rem;
.w-48	width: 12rem;
.w-56	width: 14rem;
.w-64	width: 16rem;
.w-auto	width: auto;
.w-px	width: 1px;
.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: 0;
.h-1	height: 0.25rem;
.h-2	height: 0.5rem;
.h-3	height: 0.75rem;
.h-4	height: 1rem;
.h-5	height: 1.25rem;
.h-6	height: 1.5rem;
.h-8	height: 2rem;
.h-10	height: 2.5rem;
.h-12	height: 3rem;
.h-16	height: 4rem;
.h-20	height: 5rem;
.h-24	height: 6rem;
.h-32	height: 8rem;
.h-40	height: 10rem;
.h-48	height: 12rem;
.h-56	height: 14rem;
.h-64	height: 16rem;
.h-auto	height: auto;
.h-px	height: 1px;
.h-full	height: 100%;
.h-screen	height: 100vh;

taildind坑：

• 不能自定义宽高
• 没有子元素选择器，如果想为子元素一并设置某些样式，只能用继承，仅可继承的属性有效
• box-shadow效果单一
• 设置字体有font和text两个关键字
• 没有首行缩进
• min-width、min-heiht等属性可选值过少
• grid布局兼容性差，不建议使用，国内的UC浏览器不支持
• 没有常用的小图标类 如search，arrow等
• 没有自定义li样式
• 不是所有class都可以添加自适应前缀
• 没有!important

补充：

首行缩进2字符

.text-indent-2 与 text-base一起用，避免出现文字大小不是1rem导致对齐异常问题

.text-indent-2 {
	text-indent: 2rem;
}

单行文本溢出省略：

.oneline-overflow-elision {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

多行文本溢出省略：

.moreline-overflow-elision-2 {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.moreline-overflow-elision-3 {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.moreline-overflow-elision-4 {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
...

绝对定位居中：

.absolute-col-center {
    top: 50%;
	transform: translateY(-50%);
}
.absolute-row-center {
    left: 50%;
    transform: translageX(-50%);
}