tailwindCss中中括号([])的作用

在 Tailwind CSS 里，方括号 [] 主要用于使用任意值，它能让你突破预定义类的限制，灵活运用自定义的数值。以下是具体介绍：

自定义尺寸

在 Tailwind 中，对于宽、高、边距、内边距等属性，有很多预定义的类，不过有时候这些类不能满足你的需求，这时就可以用方括号来自定义数值。

<div class="w-[250px] h-[120px] bg-blue-500"></div>

在这个例子中，w-[250px] 把元素的宽度设为 250px，h-[120px] 把元素的高度设为 120px，而不是使用 Tailwind 预定义的尺寸类。

自定义颜色

除了使用 Tailwind 预定义的颜色类，你也可以用方括号指定自定义的颜色值。

<div class="bg-[#FFA500] text-white p-4">
  这是一个带有自定义背景颜色的盒子
</div>

这里的 bg-[#FFA500] 把元素的背景颜色设为橙色（十六进制值 #FFA500）。

自定义间距

在处理外边距和内边距时，你可以用方括号来设置自定义的间距值。

<div class="mt-[30px] pl-[20px] bg-gray-200">
  这个元素有自定义的顶部外边距和左侧内边距
</div>

在上述代码中，mt-[30px] 把元素的顶部外边距设为 30px，pl-[20px] 把元素的左侧内边距设为 20px。

注意事项

• 性能方面：大量使用任意值会增加 CSS 文件的体积，因为 Tailwind 需要为每个任意值生成对应的 CSS 规则。所以，在使用时要有所节制。
• 响应式设计：你可以把任意值和响应式前缀（如 sm:、md: 等）结合使用，以实现响应式的自定义样式。

<div class="w-[200px] md:w-[300px] bg-green-300">
  这个元素在小屏幕上宽度是200px，在中等屏幕及以上宽度是300px
</div>

通过使用方括号，你可以在 Tailwind 中更灵活地运用自定义样式，同时还能享受 Tailwind 带来的便捷和一致性。