Intentional CSS :hover effects 🎈

Add a small transition-delay so you know the :hover is intentional. See the difference below 🎞️

a::after { transition: scale 0.2s ease-in-out; }

vs.

a::after { transition: scale 0.2s 0.125s ease-in-out; }

Can be useful for some designs 🤙

CodePen

ref: https://twitter.com/jh3yy/status/1756827897573089383

We can use sticky class when using tailwind to make an element fixed on screen while the parent element is visible.

Code:

<div class="relative">
  <h1 class="sticky top-0">Element</h1>
</div>

CSS Equivalent:

.parent-element {
  position: relative;
}
.element {
  position: sticky;
  top: 0;
}

Visual example: https://www.w3schools.com/howto/howto_css_sticky_element.asp