如何在Tailwind CSS中访问Swiper的内置类（如swiper-slide-active）？

一、正确匹配Swiper类的Tailwind选择器方案 #

Swiper渲染后的DOM结构是嵌套层级（外层swiper → 中间swiper-wrapper → 内层swiper-slide），你之前的选择器失效是因为没匹配到正确层级，可通过以下两种方式解决：

1. 组件内使用精确层级选择器 #

直接在Swiper组件的className里，通过层级路径选中目标元素及状态类：

<Swiper
  className="[&>.swiper-wrapper>.swiper-slide]:opacity-70 [&>.swiper-wrapper>.swiper-slide-active]:opacity-100 [&>.swiper-wrapper>.swiper-slide-thumb-active]:ring-2 ring-blue-500"
  modules={[Thumbs]}
  watchSlidesProgress={true}
  onSwiper={setThumbsSwiper}
>
  {/* 你的slide内容 */}
</Swiper>

2. 自定义Tailwind变体（全局复用更优雅） #

在tailwind.config.js中添加针对Swiper状态类的自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('swiper-active', '&.swiper-slide-active');
      addVariant('swiper-thumb-active', '&.swiper-slide-thumb-active');
      addVariant('swiper-visible', '&.swiper-slide-visible');
    },
  ],
}

之后在slide元素上直接使用这些变体：

<Swiper
  modules={[Thumbs]}
  watchSlidesProgress={true}
  onSwiper={setThumbsSwiper}
>
  {slides.map((item) => (
    <div className="swiper-slide opacity-70 swiper-active:opacity-100 swiper-thumb-active:ring-2 ring-blue-500">
      {/* slide内容 */}
    </div>
  ))}
</Swiper>

二、解决swiper/css/thumbs为空的问题 #

最新版Swiper（v10+）中，缩略图相关基础样式已整合进核心CSS，无需单独导入swiper/css/thumbs，确保导入核心样式即可：

import 'swiper/css';
// 若需其他模块样式（如导航、分页）再单独导入
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';

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