如何在Next.js+TypeScript+Tailwind中为Splide活跃滑块加自定义类？

问题根源 #

你配置里的classes.active是给Splide整体容器/轨道的活跃状态类，不是单个幻灯片的活跃类，所以不会作用到目标幻灯片元素上。Splide专门提供了slideActive字段来指定活跃幻灯片的自定义类。

正确配置示例 #

修改options配置，把classes.active替换为classes.slideActive：

options={{
  type: 'slide',
  classes: {
    slideActive: 'krushnaa', // 替换为slideActive字段
  },
  arrows: false,
  pagination: false,
  gap: '20px',
  perPage: 6,
  breakpoints: {
    1024: {
      perPage: 6,
    },
    1023: {
      perPage: 1,
    },
  },
}}

额外注意事项 #

如果krushnaa是你自定义的Tailwind类（包含上下边框样式），需确保Tailwind不会将其从最终样式中移除：

• 若组件文件在Tailwind的content配置范围内，直接使用该类即可被识别；
• 若通过动态类名添加，需要把krushnaa加入tailwind.config.ts的safelist：

// tailwind.config.ts
export default {
  // 其他配置项
  safelist: ['krushnaa'],
}

替代方案：直接使用Tailwind内置类 #

如果不需要自定义类，也可以直接把边框样式写在slideActive中：

slideActive: 'border-t-2 border-b-2 border-blue-500',

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