如何将use transform css属性转换为顺风css?

Question

我正在尝试将这个类转换为css有些东西很容易转换。

但这3个道具我不确定是否可能有它tailwind.css?

.toast-top-center {
position: fixed;
z-index: 99;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
Trying to add with tailwind CSS
.toast-top-center {
@apply fixed z-40;
top: 10%; 
left: 50%;
transform: translate(-50%, -50%);
}
``

Answer 1

你的CSS类应该是:

.toast-top-center {
@apply fixed z-99 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/10;
}

要让它工作，你必须从Tailwind切换到WindiCSS，或者像这样更改Tailwind .config.js:

module.exports = {
theme: {
inset: {
// Other fractions if you need them elsewhere
'1/2': 50%,
'1/10': '10%',
},
zIndex: {
// Other indexes if you need them elsewhere
'99': 99
}
}
}