前端一些效果class=“h-[1px] w-[250px]“中括号[]用法

<div>
    <h2 class="text-3xl font-extrabold text-center">欢迎回来</h2>
    <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
        <spen class="h-[1px] w-16 bg-gray-200"></spen>
        <spen>账号密码登录</spen>
        <spen class="h-[1px] w-16 bg-gray-200"></spen>
    </div>
</div>

class="h-[1px]"
<!--上下等价-->
.h-\[1px\] {
  height: 1px;
}

class="my-5"

<!--上下等价-->

.my-5 {
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

class="mb-4"

<!--文字距离下面文字的空间距离,上下写法等价-->
.mb-4 {
  margin-bottom: 1rem; /* 16px */
}

space-x-2

<!--文字留白距离,左右各2px-->

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

w-16

<!--宽度等于4rem,4rem=64px-->

.w-16 {
  width: 4rem; /* 64px */
}


w-[64px]

<!--代码全部等价-->

效果如下: