项目注意点

49 阅读1分钟

tailwindcss 使用动态样式

// 基础样式
const baseStyles = "px-4 py-2 rounded font-medium transition-all duration-200"; 
// 根据变体添加不同样式 
const variantStyles = variant === 'primary' 
? "bg-blue-600 text-white hover:bg-blue-700 border border-blue-600" 
: "bg-white text-blue-600 hover:bg-blue-50 border border-blue-600"; 

<button className={`${baseStyles} ${variantStyles}`}>