我在我的tailwind.config.js中有这段代码，它将为tailwind创建一个自定义类，但它现在给我的错误是“moz-backface-visibility”

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin');

const MyClass = plugin(function ({ addUtilities }) {
  addUtilities({
    '.my-rotate-y-180': {
      transform: 'rotateY(180deg)',
    },
    '.preserve-3d': {
      transformStyle: 'preserve-3d',
    },
    '.perspective': {
      perspective: '1000px',
    },
    '.backface-hidden': {
      backfaceVisibility: 'hidden',
      perspective: 0,
      '-moz-backfaceVisibility': 'hidden',
    },
  });
});
module.exports = {
  content: ['./src/**/*.{jsx,js,tsx}'],
  important: '#root',
  theme: {
    extend: {
      fontFamily: {
        name: ['Saira'],
      },
      colors: {
        primary: '#22c55e',
        secondary: '#aaa6c3',
        'black-100': '#100d25',
        'black-200': '#090325',
        'white-100': '#f3f3f3',
      },

      boxShadow: {
        card: '0px 35px 120px -15px #211e35',
        mid: '0px 15px 20px #211e35',
      },
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    },
  },
  plugins: [MyClass],
};

我已经按照tailwind的文档here中列出的说明进行了操作，但它仍然不能识别“-moz-backface-visibility”。然而，如果我把“-moz-backface-visibility”放在引号中，错误就会消失，但它仍然不能在firefox中工作。
我也有同样的修改我的postcss.config文件，以相同的一个显示在文档中
postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

这段代码是我使用“backface-hidden”的地方。
注意：它在其他浏览器上工作正常，但在Firefox上不行

<div className='perspective'>
            <div
              className={` min-h-[650px] ${
                showPass && 'h-[670px]'
              } w-[355px] mb-6 relative border border-green-400 rounded-[20px] shadow-card duration-1000 preserve-3d ${
                isClicked ? 'my-rotate-y-180' : ''
              }`}
            >
              <div className='py-5 px-12 flex items-center flex-col gap-6 absolute w-full h-full backface-hidden'>
                {roomState.loading ? (
                  <Loading />
                ) : (
                  roomState.data && (
                    <>
                      {roomState.data.map((room, index) => (
                        <Button
                          variant='contained'
                          className='w-full py-4 px-6 bg-green-400 text-lg rounded-2xl'
                          onClick={() => {
                            handleClick(index, room.id);
                          }}
                          key={`${room.name}-room`}
                        >
                          {room.name}
                        </Button>
                      ))}
                    </>
                  )
                )}

                <IconButton
                  variant='contained'
                  className='w-full py-4 px-6 bg-gray-500 text-lg rounded-2xl'
                  onClick={() => handleOpenCreate(operations.create)}
                >
                  <AddIcon />
                </IconButton>
              </div>
              <div className='absolute w-full h-full rounded-[20px] backface-hidden my-rotate-y-180'>
                {roomState.data && (
                  <div className='p-6 flex items-left text-lg flex-col gap-4'>
                    <div className='font-bold text-[30px] mt-6'>
                      {roomState.data[selected].name}
                    </div>
                    <div className='min-h-[310px]'>
                      {roomState.data[selected].description ? (
                        <p>{roomState.data[selected].description}</p>
                      ) : (
                        <p>No Description</p>
                      )}
                    </div>

                    {roomState.data[selected].creatorUsername ===
                    user.username ? (
                      <div className='flex flex-col gap-2'>
                        <div className='grid grid-cols-2 gap-2'>
                          <Button
                            variant='contained'
                            className='w-full py-3 px-6 bg-purple-500 text-lg rounded-2xl'
                            onClick={() => handleOpenCreate(operations.edit)}
                          >
                            Edit
                          </Button>
                          <Button
                            variant='contained'
                            className='w-full py-3 px-6 bg-red-500 text-lg rounded-2xl'
                            onClick={() => handleWarning(operations.delete)}
                          >
                            Delete
                          </Button>
                          {showPass ? (
                            <Button
                              variant='contained'
                              className='w-full py-3 px-6 bg-cyan-700 text-lg rounded-2xl'
                              onClick={handleHide}
                            >
                              Hide
                            </Button>
                          ) : (
                            <Button
                              variant='contained'
                              className='w-full py-3 px-6 bg-blue-600 text-lg rounded-2xl'
                              onClick={handleShow}
                            >
                              Password
                            </Button>
                          )}
                          <IconButton
                            variant='contained'
                            className='w-full py-4 px-6 bg-gray-500 text-lg rounded-2xl'
                            onClick={handleBack}
                          >
                            <ArrowBackIcon />
                          </IconButton>
                        </div>
                        <Button
                          variant='contained'
                          className='w-full py-3 px-6 bg-green-400 text-lg rounded-2xl'
                          onClick={handleEnter}
                        >
                          Enter
                        </Button>
                        <div
                          className={`border border-gray-400 w-full rounded-xl flex justify-between transition-opacity duration-700 ease-in ${
                            showPass ? 'opacity-100' : 'opacity-0'
                          } `}
                        >
                          <p className='p-2 text-center'>{password}</p>
                          <IconButton onClick={handleCopy}>
                            <ContentCopyIcon />
                          </IconButton>
                        </div>
                      </div>
                    ) : (
                      <>
                        {joined ? (
                          <>
                            <Button
                              variant='contained'
                              className='w-full py-3 px-6 bg-green-400 text-lg rounded-2xl'
                              onClick={handleEnter}
                            >
                              Enter
                            </Button>
                            <Button
                              variant='contained'
                              className='w-full py-3 px-6 bg-red-500 text-lg rounded-2xl'
                              onClick={() => handleWarning(operations.leave)}
                            >
                              Leave
                            </Button>
                          </>
                        ) : (
                          <Button
                            variant='contained'
                            className='w-full py-3 px-6 bg-green-400 text-lg rounded-2xl'
                            onClick={handleJoin}
                          >
                            Join
                          </Button>
                        )}

                        <IconButton
                          variant='contained'
                          className='w-full py-4 px-6 bg-gray-500 text-lg rounded-2xl'
                          onClick={handleBack}
                        >
                          <ArrowBackIcon />
                        </IconButton>
                      </>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>