减少 Tailwind 中重复和冗长的 className
有几种方法可以减少 Tailwind 中重复和冗长的 className： 1. 使用 @apply 语法 在自定义的 CSS 文件中，使用 Tailwind 的 @apply 语法将常用的样式组合成一个自定义的类。例如： /* styles.css */ .btn-primary { @apply bg-blue-500 text-white py-2 px-4 rounded; } 然后在组件中使用： <button className="btn-primary">Click me</button> 这样可以减少 JSX 文件中的 className 冗余。 2. 封装组件 将常用的样式封装成可复用的组件。例如，将按钮样式封装为一个 Button 组件： const Button = ({ children, className, ...props }) => ( <button className={`bg-blue-500 text-white py-2 px-4 rounded ${className}`} {...props} > {children} </button> ); // 使用 <Button className="my-2">Click me</Button>; 通过这种方式，可以保持代码的简洁并提高复用性。 3. 使用 clsx 或 classnames 库 这些库可以帮助你有条件地组合多个 className，减少重复性。例如： ...