全部 / 前端 / 技术 · 2022年7月16日 0

Tailwindcss 抽取公共样式

广告位招租 (vx: ghostcode, 备注:网站广告)

最近用 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;
  }
}