Tailwind CSS 阴影和过渡在启用 JIT 模式后不起作用

Question

我刚刚为我的项目启用了 tailwind JIT 模式，转换停止工作并且阴影消失了。我在 Youtube 上仔细观看并按照他们的指示进行操作，但找不到解决方案。如果有人有任何建议，我们将不胜感激。

这是转换停止工作。 Transform 和 translate-x-full 似乎不再有效了。

 <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 transform 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>

这是顺风配置：

const colors = require('tailwindcss/colors')
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './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)',
        
      },
      container: {
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.coolGray,
      indigo: colors.indigo,
      white: colors.white,
    },
  },
  variants: {
    extend: {
      backgroundImage: ['dark'],
    },
  },
  plugins: [],
}

我还在index.css中添加了@tailwind base; @tailwind components; @tailwind utilities; @tailwind variants;。

Answer 1

已用修复。每次更改某些内容时，我都需要重新启动服务器，这就是我认为样式不起作用的原因。但这只是环境设置的错误。为了解决这个问题，我重新配置了环境设置以及这个答案，现在效果很好。

Tailwind CSS 阴影和过渡在启用 JIT 模式后不起作用

Tailwind CSS shadow and transition not working after JIT mode enabled

reactjs

tailwind-css