html - 如何将使用变换 css 属性转换为顺风 css?
问题描述
我正在尝试将此类转换为 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%);
}
``
解决方案
Your CSS class with Tailwind would be:
.toast-top-center {
@apply fixed z-99 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/10;
}
For this to work you would either have to switch from Tailwind to WindiCSS, or change your tailwind.config.js like this:
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
}
}
}
推荐阅读
- php - PDO query updating a datetime column not in query
- html - odoo (V11) 添加一个新的搜索按钮到控制面板视图
- android - 如何在android p上禁用屏幕截图
- tensorflow - TensorFlow Probability 返回不稳定的预测
- marklogic - MarkLogic 数据中心 JOBS 数据库搜索选项配置
- java - Gson 不使用对象的默认字段值(不是原语)
- apache - 使用 mod_rewrite 从 URL 中删除 _escaped_fragment
- sql-server - 单击取消时查询继续执行,然后说行受到影响
- sql - 如何使用插件在 WordPress 数据库中创建表
- powershell - Powershell等效于批处理命令“START”以使用映射驱动器打开窗口