Tailwindcss 抽取公共样式

最近用 React + Tailwindcss 做了一个简单的页面：https://productly-kappa.vercel.app/

遇到了一个复用的问题：一个样式多次使用，怎么办？

官方也给了一些建议：https://tailwindcss.com/docs/reusing-styles

这次我们只讨论一种：@apply。

<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}