More top/right/bottom/left classes

[babakfp]

Hi

• classes by spacing values
• classes for centering
• percentage classes

.top-2 {
  top: .5rem;
}

.top-50\% {
  top: 50%;
}

.inset-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inset-y-center {
  top: 50%;
  transform: translateY(-50%);
}

.inset-x-center {
  left: 50%;
  transform: translateX(-50%);
}

---

#13259

[simonswiss]

These can be useful, particularly to center an absolutely positioned element within its relative parent.

Flexbox removes the need for that approach in many use cases though. So this might not need to be available in core, but that's definitely a good idea for a custom plugin that brings these new utilities.

You could even create this plugin inside a config preset, so it's available in all your projects 👍

[jenstornell]

I often use an alternative approach for this. It's 100% Tailwind compatible, but it require an extra wrapper div.

<!-- Wrapper element -->
<div class="bg-red-500 h-64 relative">
  <!-- Invisible wrapper -->
  <div class="absolute w-full h-full top-0 left-0 flex justify-center items-center">
    <!-- Element to place in the center -->
    <div>Look ma! I'm in the center!</div>
  </div>
</div>

https://play.tailwindcss.com/k52KmUTncG

I agree with your suggestion, as it would require less work.

[GHNewbiee]

@babakfp I was trying to center the tooltip over a target as follows:

tooltip.css

.tooltip .tooltip-text {
  visibility: hidden;
  z-index: 100;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

tooltip.html

...
  <div class="tooltip relative w-full ...">Hover me
     <div class="tooltip-text absolute left-0 -top-full -mt-1.5 w-max ...">Tooltip left
      <svg class="absolute ... h-2.5 left-2.5 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
      </div>
      <div class="tooltip-text absolute <???> -mt-1.5 w-max ...">Tooltip center
        <svg class="absolute ... h-2.5 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
      </div>
      <div class="tooltip-text absolute right-0 -top-full -mt-1.5 w-max ...">Tooltip right
        <svg class="absolute text-yellow-400 h-2.5 right-2.5 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
      </div>
    </div>
...

where <???> was under search 🤔. Until I read your suggestion. 👍

I hope maintainer to finally include .inset-center, .inset-y-center and .inset-x-center.

[adamwathan]

Unfortunately there's no actual CSS value those classes could possibly correspond to. You'll want to use a combination of positioning + transform/translate to center things like this.