Complex conversions

[pas256]

Feel free to close this if it is not helpful, but thought I would share.

I attempted to convert

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

which resulted in:

I put a bit of time into it, and the conversion is possible to Tailwind. The result I came up with is:

inline-block
relative
text-blue-600

after:content-['']
after:absolute
after:w-full
after:scale-0
after:h-0.5
after:bottom-0
after:left-0
after:bg-blue-600
after:origin-bottom-right
after:transition
after:ease-out
after:duration-200

hover:after:scale-100
hover:after:origin-bottom-left

so if someone wanted to take on some of these conversions, I thought this might help.

Thanks for the tool!

[mathcodes]

I think this is a great idea. nice work. I can try and take on some of these. Thoughts @pas256 @stevezease ?

[pas256]

Yes @mathcodes, that would be amazing! Thank you!

[stevezease]

Hello! Thank you for raising this! This started as a small side project I created a while back, I haven't had the chance to fully circle back to it. Some of my practices in this repo may be a bit dated now. But I'm happy to review and merge contributions into this repository!

[abhigdrv]

Hey @stevezease @pas256 @mathcodes I have added some more feature to this repo you can access it over

https://css-to-tailwind-converter-abhigdrv.vercel.app