如何在Next.js中混用Tailwind CSS类与本地CSS类？

完全可以结合使用，你给出的两种写法存在语法错误，以下是几种可行的正确实现方式：

• 模板字符串拼接
  用ES6模板字符串将Tailwind类和本地CSS类拼接，注意类名之间加空格分隔：

  <img src={user.picture} className={`rounded ${styles.pfp}`} />
  

• 数组+join方法
  把需要的类名放进数组，再用join(' ')转成空格分隔的字符串，适合类名较多或需要动态生成的场景：

  <img src={user.picture} className={['rounded', styles.pfp].join(' ')} />
  

• 使用clsx库（推荐复杂场景）
  如果需要处理条件类名，clsx能让类名组合更简洁。先安装依赖：

  npm install clsx
  

  然后使用：

  import clsx from 'clsx';
  
  // 基础组合
  <img src={user.picture} className={clsx('rounded', styles.pfp)} />
  
  // 带条件判断的示例
  <img src={user.picture} className={clsx('rounded', styles.pfp, { [styles.highlight]: user.isActive })} />
  

关键注意点：所有类名必须用空格分隔，否则浏览器会识别为单个无效类名，导致样式不生效。

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