In Tailwind how to expand on hover from center?

August 6, 2024

In CSS I can expand on hover with:

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}

<a href="#">Expand from center</h1><br/>

I’ve been reading the docs on:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

How can I expand on hover from center in Tailwind CSS?

>Solution :

Instead of tranisitioning max-width, consider transitioning transform: scaleX(). This is more performant since the browser does less work per frame than max-width. Also, transform: scaleX() has the added benefit that transform-origin works with it, thus solving your problem too:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<a href="#" class="group text-sm">
  Expand from center
  <span class="block mt-4 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 h-0.5 bg-green-600 origin-center"></span>
</a>