React中如何简单复用Tailwind按钮样式 复用组件应存放在什么位置

• 方案1：使用Tailwind的@apply指令提取自定义类
  直接在项目引入的Tailwind全局CSS文件中添加自定义公共类，后续所有位置都可以直接调用该类名：

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

修改后你的按钮代码就可以简化为：

<button className="btn-green">Button1</button>

• 方案2：封装独立的Button React组件（灵活性更高，支持自定义参数）
  更符合React项目开发习惯的方案，支持自定义样式、绑定事件等扩展能力：

// Button组件代码
export default function Button({ children, className, ...restProps }) {
  return (
    <button
      className={`py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 ${className || ''}`}
      {...restProps}
    >
      {children}
    </button>
  )
}

修改后你的App组件代码可以简化为：

import Button from './components/Button'

export default function App() {
  return (
    <div className="App">
      <Button>Button1</Button>
      <Button>Button2</Button>
      {/* 支持自定义扩展，比如修改样式、绑定点击事件 */}
      <Button className="bg-red-500 hover:bg-red-700 focus:ring-red-400" onClick={() => console.log('点击')}>
        自定义红色按钮
      </Button>
    </div>
  )
}

• 如果你封装的是全项目通用的基础UI组件，统一存放在src/components/目录下，比如路径为src/components/Button.jsx，所有页面都可以直接导入使用
• 如果该按钮是仅某个页面/模块专属的组件，就放在对应模块的私有组件目录下即可，比如首页专用按钮就放在src/pages/Home/components/Button.jsx，避免全局组件库过于冗余

内容的提问来源于stack exchange，提问作者somniumm