开启Tailwind JIT模式后shadow、transition及transform属性失效问题求助

• 核心问题定位：你将colors配置写在了theme根节点下，而非theme.extend内，这会直接覆盖Tailwind所有默认颜色配置，阴影样式依赖的黑色系透明度变量会因此丢失，直接导致shadow样式失效，这是最可能的问题根源。
• 检查配置对齐版本：如果你使用的是Tailwind v3及以上版本，无需手动声明mode: 'jit'（默认开启），且原purge配置项已重命名为content，写法不对会导致扫描文件异常，部分类名无法生成。
• 检查重复属性：你在类名中重复声明了transform属性，一处在深色模式分支，一处在公共类名中，虽然不会直接导致失效，但建议仅保留公共类名中的transform即可，避免冗余。
• 检查开发服务缓存：JIT模式依赖文件扫描缓存，修改配置后需要重启开发服务，必要时可删除node_modules/.cache目录后重启，强制全量重新生成样式。

修正后的Tailwind配置示例 #

const colors = require('tailwindcss/colors')
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class',
  theme: {
    extend: {
      backgroundColor: {
        primary: 'var(--color-bg-primary)',
        secondary: 'var(--color-bg-secondary)',
      },
      textColor: {
        accent: 'var(--color-text-accent)',
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
      },
      // 颜色配置移到extend内，避免覆盖默认颜色，补充阴影需要的black颜色
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        gray: colors.coolGray,
        indigo: colors.indigo,
        white: colors.white,
        black: colors.black,
      }
    },
  },
  variants: {
    extend: {
      backgroundImage: ['dark'],
    },
  },
  plugins: [],
}

修正后的组件代码示例（移除重复transform） #

<span className='relative'>
  <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>
  <span
    className={`${
      theme === 'dark' ? 'bg-indigo-400 translate-x-full' : 'bg-white'
    } absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition transform duration-300 ease-in-out`}
  >
    <input
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className='absolute opacity-0 w-0 h-0'
    />
  </span>
</span>

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