tailwindcss使用@apply指令定义自己的样式

实际需求：tailwindcss 只在table上加样式，让单元格都有border

<table class="my-table w-full border border-gray-300">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

.my-table th, .my-table td {
  @apply border border-gray-300 px-4 py-2;
}

如果是nextjs项目，可以直接把css代码添加到globals.css文件里

参考链接：

https://tailwindcss.com/docs/functions-and-directives#apply-directive