有些样式适用，有些则不适用，我不明白为什么

Question

我正在建立一个投资组合网站，大部分都已完成。 但是，我注意到 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: {},
  },
}

全局变量.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。

Answer 1

同样的事情发生在我身上

我通过向package.json 文件添加一个新脚本解决了这个问题

“dev”脚本：

"scripts": {
    "build-css": "tailwindcss build src/input.css -o dist/output.css",
    "dev": "npx tailwindcss -i src/input.css -o dist/output.css --watch"
  }

并运行它：

npm run dev

这将观察 HTML 中的变化并相应地编译 CSS。

Answer 2

我在你的 css 中看到 heroButton 和 contactInput 但我在你的 jsx 中没有看到它们？还是我想念他们？