/* //常用语句 */
bg-purple-100  背景颜色
text-purple-100 文本颜色
text-center   水平对齐 可用于字体和按键的中心对齐
align-middle  垂直对齐
!w-[80%]    //width: 80% !important;
shadow-sm  盒子阴影
cursor-pointer 指针样式
outline-none 无边框 
font-italic  斜体

hover:bg-purple-500 鼠标悬停时
focus:bg-purple-900  鼠标点击时
flex justify-center items-center  元素居中
flex justify-between  两端对齐
min-h-sceen / min-h-100vh 高度满屏
min-h-80vh 最小高度（可以延伸）
h-80vh / calc(100vh - 10px)
w-full / w-100vw 宽度满屏

w-[95%] lg:w-[85%] ~= w-95vw  lg:w-85vw

文字和水平线
<div flex justify-center items-center><p m-l-4 text-4>区块链</p> 
</div>

<div flex ><div ml-auto>右对齐</div></div>
<div flex ><div ml-auto px-2 hover:bg-red>X</div></div> //删除按键
m-auto / mx-auto 居中
ml-auto 右对齐
mr-auto 左对齐
px-4 / py-4  左右/上下两边内边距（padding: 1rem;） 其它写法：px-[20px]
pt-4  上部内边距1rem(padding-top: 1rem;)
mx-4 / my-4  左右/上下两边外边距

inline 行内元素
block 块状元素
inline-block 行内块状元素（img和input为行内块状元素）
  inline行内元素，width和height无效，类似文字的展示方式，是属于“紧缩式”布局方式，无论怎么放都挤在一起。
  block大块头，放到哪里，就要把一整行占着；display:flex的情况除外；
  inline-block，兼具两者的好处，可以挤在一起，也可以有“尺度”（可以设置width和height）的挤在一起。

盒子居中对齐:
display: flex;
align-items: center;
justify-content: center; 

animate-fade-in  渐入
<div border-t-dashed border-1></div>  虚线分割线

/* flex布局，两端对齐 */
<div flex mb-2 justify-between>  
  <p mr-2>自定义角色</p>
  <div w-65vw lg:w-42vw> xxx </div>
</div> 

 /* 响应式 */
根据常用的设备分辨率方案，默认内置了 5 个断点，sm、md、lg、xl、2xl ：
断点前缀    最小宽度    CSS
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) { ... }

/* 定位手机屏幕 */
这种方式最令人们惊讶的地方是，要为移动设备设计样式，您需要使用无前缀的功能类，而不是带 sm: 前缀的版本。不要将 sm: 理解为”在小屏幕上”，而应将其视为”在小断点处”
请注意，我们不必为 sm 断点或 xl 断点指定背景色，您只需要指定一个功能类何时开始生效，而不是何时结束。

使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们，下面是一些案例：
<div class="text-center sm:text-left"></div>  //在手机端居中，在屏幕变大时靠左
flex-1 flex justify-end lg:hidden  //手机端时显示，屏幕变大时隐藏
relative hidden lg:flex items-center ml-auto  //在电脑端的样式（在手机端时隐藏）
hidden lg:flex items-center px-4  //在电脑端的样式（在手机端时隐藏）
hidden lg:block ml-auto //在电脑端的样式（在手机端时隐藏）
ml-auto lg:hidden//在手机端时居中，电脑端隐藏