stevezease / tailwind-converter Goto Github PK

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!

Is it possible to have the inverse of this tool

input tailwind: right-0
output css: right: 0

I'm looking for a quick way to create component css

Like :active, :hover, :focus.

Thanks for your work on the converter. Convenient!

Please add font size shorthand support
text-xl/5
instead of
text-xl leading-5

This tool is awasome but it have some limitations

1. This can't convert backgrond image property
2. if you use shortcuts like padding: 10px 20px; then its is not interchangable.
3. it cant support manual units like for width: 120px it gives w-32 and for 130px and 140px this also gives w-32 ;(

sometimes you need to add custom css classes because some libraries need it. It should be easy to allow generation of:

.phx-modal {
  @apply opacity-100 fixed left-0 top-0 w-full h-full overflow-auto;
}

from

.phx-modal {
  opacity: 1!important;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

i found this problem, convert font size 32px and get text-3xl

actually text-3xl font-size is 30px

The reason why some css items can't be converted is because tailwindcss has support for certain colors and widths.

body {
    margin-left: 3em;
    width: 650px;
    background: tan;

}

This fixes:

 margin-left: 10px;
 width: 50%;
 background: green;

Figma has an inspect panel, which looks like:

It would be great just to be able to copy and paste that into the converter (without defining a class). In addition, finding the nearest value for properties that are unable to be converted would be amazing too (e.g. right with percentages).

Anyway, keep up the great work 😄 still very helpful as is

Not sure if this project is still alive, but what about supporting Tailwind v3 or at least Tailwind v2?