我的tailwind.config.js中有这段代码,它将为tailwind创建一个自定义类,但它现在给了我“moz背面可见性”的错误
顺风.图.js
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],
};
我已遵循顺风公司文件中列出的说明
here
但它仍然无法识别“-moz背面可见性”。然而,如果我把“-moz背面可见性”放在报价中,错误就会消失,但它在firefox中仍然不起作用。
我还修改了postss.config文件,使其与文档中显示的文件相同
邮政编码配置.js
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
};
这段代码就是我使用“背面隐藏”的地方。
注意:它在其他浏览器上运行良好,但在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>
