React+Tailwind环境下如何添加自定义Swiper分页？

问题1：自定义分页容器不显示 #

你的自定义分页容器放在<Swiper>组件外部，Swiper初始化时可能因React组件挂载顺序问题，无法正确定位该DOM元素。

解决方式：
使用useRef获取分页容器的DOM引用，直接传递给pagination.el，避免依赖类选择器的模糊查找：

import { useRef } from 'react';
import Swiper from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

function CustomSwiper() {
  const paginationRef = useRef(null);

  return (
    <div className="relative">
      <Swiper
        className="my-swiper"
        spaceBetween={10}
        slidesPerView="auto"
        navigation
        pagination={{
          el: paginationRef.current,
          type: "bullets",
          clickable: true,
          bulletClass: "custom-bullet",
          bulletActiveClass: "custom-bullet-active",
        }}
      >
        {/* 幻灯片内容 */}
        <div className="swiper-slide">Slide 1</div>
        <div className="swiper-slide">Slide 2</div>
        <div className="swiper-slide">Slide 3</div>
      </Swiper>
      <div className="absolute bottom-0 left-0 w-full flex justify-center pb-4">
        <div ref={paginationRef} className="swiper-pagination"></div>
      </div>
    </div>
  );
}

问题2：Tailwind样式不生效 #

直接给bulletClass传递Tailwind类会失效，原因有两点：

1. Tailwind JIT模式未扫描到Swiper动态生成的元素类名，不会生成对应CSS；
2. Swiper默认的bullet样式优先级高于Tailwind类。

解决方式：

方式一：全局CSS结合Tailwind指令（推荐）

在全局CSS文件中定义自定义类，用@apply复用Tailwind样式：

/* global.css */
.custom-bullet {
  @apply w-3 h-3 bg-amber-400 rounded-full opacity-50 cursor-pointer;
}
.custom-bullet-active {
  @apply bg-green-400 opacity-100;
}

方式二：强制提升样式优先级（临时方案）

使用Tailwind的!important前缀强制覆盖默认样式：

pagination={{
  // ...其他配置
  bulletClass: "bg-amber-400 !opacity-50 !w-3 !h-3 !rounded-full",
  bulletActiveClass: "bg-green-400 !opacity-100",
}}

额外注意事项 #

必须导入Swiper分页组件的CSS文件，否则分页元素的基础样式不会加载：

import 'swiper/css/pagination';

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