How to convert use transform css property into tailwind css?-CodePudding

I am trying to convert this class into css some of the things are straightforward to convert.

But this 3 props I am not sure is possible to have it 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%);
}
``

CodePudding user response：

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
      }
    }
  }