我正在建立一个投资组合网站，大部分已经完成了。然而，我注意到一些奇怪的事情与Tailwind CSS。我已经应用了样式，它的大部分工作，但有些样式不适用。有些适用于某些断点，但在其他断点消失，即使我还没有找到一个规则，说它应该。
通常，这主要发生在溢出效果、悬停和列表样式中。
我已经包含了管理网站工作经验区段的元件。父元件如下：

import React from 'react'
import { motion } from 'framer-motion'
import ExperienceCard from './ExperienceCard'
import { Experience } from '../typings'

type Props = {
  experiences: Experience[]
}

const WorkExperience = ({ experiences }: Props) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      transition={{ duration: 1.5 }}
      className='h-screen flex relative overflow-hidden flex-col text-left
      md:flex-row max-w-full px-10 justify-evenly mx-auto items-center'
    >

      <h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
        Experience
      </h3>

      <div className='w-full flex space-x-5 overflow-x-scroll p-10 snap-x snap-mandatory
      scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]'>
        {experiences?.map((exp) => (
          <ExperienceCard key={exp._id} experience={exp} />
        ))}
      </div>
    </motion.div>
  )
}

export default WorkExperience

子组件的代码：

import React from 'react'
import Image from 'next/image'
import { motion } from 'framer-motion'
import { Experience } from '../typings'
import { urlFor } from '../sanity'

type Props = {
  experience: Experience
}

const ExperienceCard = ({ experience }: Props) => {
  console.log(experience);

  return (
    <article
      className='flex flex-col rounded-lg items-center space-y-7 flex-shrink-0
       w-[500px] h-[500px] md:w-[600px] md:h-[600px] xl:w-[900px] snap-center p-10 bg-[#292929] hover:opacity-100
       opacity-40 cursor-pointer transition-opacity duration-200 overflow-hidden'
    >
      <motion.img
        initial={{
          y: -100,
          opacity: 0,
        }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 1.2 }}
        viewport={{ once: true }}
        src={urlFor(experience?.companyImage).url()}
        alt='logo'
        className='h-32 w-32 rounded-full xl:w-[200px] xl:h-[200px] object-cover object-center'
      />

      <div className='px-0 md:px-10'>
        <h4 className='text-4xl font-light'>{experience?.jobTitle}</h4>
        <p className='font-bold text-2xl mt-1'>{experience?.company}</p>

        <div className='flex space-x-2 my-2'>
          {experience?.technologies.map((tech) => (
            <img
              key={tech._id}
              src={urlFor(tech?.image).url()}
              alt='techStack'
              className='rounded-full h-10 w-10' />
          ))}
        </div>

        <p className='uppercase py-5 text-gray-300'>
          {new Date(experience.dateStarted).toDateString()}
          &nbsp; &#8212; &nbsp; {experience.isCurrentlyWorkingHere
            ? 'Present'
            : new Date(experience.dateEnded).toDateString()}
        </p>

        <ul className='list-disc space-y-4 ml-5 text-lg overflow-scroll pr-5 scrollbar-thin scrollbar-track-black scrollbar-thumb-[#F7AB0A]/80 max-h-96'>
          {experience?.points.map((point, i) => (
            <li key={i}>{point}</li>
          ))}
        </ul>
      </div>
    </article>
  )
}

export default ExperienceCard

顺风配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar')
  ],
}

Postcss配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

globals.css档案：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .heroButton {
    @apply px-6 py-2 border border-[#242424] rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-[#F7AB0A]/40 hover:text-[#F7AB0A]/40
  }

  .contactInput {
    @apply outline-none bg-slate-400/10 rounded-sm border-b px-6 py-4 border-[#242424]
    text-gray-500 placeholder-gray-500 transition-all focus:border-[#F7AB0A]/40
    focus:text-[#F7AB0A]/40 hover:border-[#F7AB0A]/40
  }
}

当我用Tailwind将鼠标悬停在应用类样式上时，它确实看起来像它应该的样子，以表明它已经被识别。我很困惑，为什么它有时会工作，但后来它停止了，有些东西就永远不会工作...
我试过改变类的样式顺序，不同的值，看看是否发生了什么。不多。还通过浏览器检查了样式是否在那里。我可以看到它在元素上，但视觉上它没有应用？
在这个案例中，我使用了Firefox和Chromium。