如何使用裁剪器实现下列样式

Question

需要实现的样式

如图所示，如何使用尾风来实现以下样式?非常感谢

我实现的样式如下

我实现的样式不正确。

    <div class="p-4 bg-white shadow flex flex-wrap divide-x divide-y">
      <div class="p-4 text-center w-1/3">1</div>
      <div class="p-4 text-center w-1/3">1</div>
      <div class="p-4 text-center w-1/3">1</div>
      <div class="p-4 text-center w-1/3">1</div>
      <div class="p-4 text-center w-1/3">1</div>
    </div>

Answer 1

与其使用flex，不如通过班级使用CSS网格。然后，您可以使用gap-px指定所有网格单元之间的1px间隙。

要拥有颜色1px边框，只需在父网格元素上设置背景色，例如使用bg-gray-200类。

要获得边界半径，可以使用rounded-lg。使用overflow-hidden确保正确地裁剪子元素。

见下文的概念证明：

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<!-- Top level div only for display purposes -->
<div class="w-screen h-screen grid place-items-center">
  <div class="shadow-xl grid grid-cols-3 gap-px bg-gray-200 rounded-lg overflow-hidden">
    <div class="px-16 py-8 bg-white text-center">1</div>
    <div class="px-16 py-8 bg-white text-center">2</div>
    <div class="px-16 py-8 bg-white text-center">3</div>
    <div class="px-16 py-8 bg-white text-center">4</div>
    <div class="px-16 py-8 bg-white text-center">5</div>
    <div class="px-16 py-8 bg-white text-center">6</div>
  </div>
</div>

​