Tailwind CSS shadow and transition not working after JIT mode enabled

Question

I just enabled tailwind JIT mode for my project, and the transition stopped working and the shadow disappeared. I carefully watched and followed their direction on Youtube but cannot find a solution. If anybody has any suggestions, it'd be very appreciated.

This is the transition stopped working. Transform and translate-x-full seems not working anymore.

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

And this is the tailwind config:

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: [],
}

I also added @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; in the index.css.

Fixed with this answer. stackoverflow.com/questions/68619975/… — Chi
– Chi, Commented Oct 8, 2021 at 6:37

Chi · Accepted Answer · 2021-10-14 04:53:18Z

3

Fixed with this answer. I needed to restart the server every time I change something, that's why I thought the stylings don't work. But it was just an error of the environment setting. To fix it, I reconfigured the environment set up along with this answer, and it works great now.

edited Oct 14, 2021 at 4:53

answered Oct 8, 2021 at 6:40

Chi

3262 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS shadow and transition not working after JIT mode enabled

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related