【问题标题】:How to convert use transform css property into tailwind css?如何将使用变换 css 属性转换为顺风 css?
【发布时间】:2021-12-09 03:51:16
【问题描述】:

我正在尝试将此类转换为 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%);
}
``

【问题讨论】:

  • 我认为 transform 道具是不可能的。但是Left: 50%; = left-1/2。对于Top: 10%;,您可以使用this

标签: html css sass tailwind-css


【解决方案1】:

您使用 Tailwind 的 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
      }
    }
  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-16
    • 2012-05-11
    • 2020-09-05
    • 1970-01-01
    • 1970-01-01
    • 2014-02-23
    相关资源
    最近更新 更多