DEV Community

Tami Schultz
Tami Schultz

Posted on

Do you know CSS, but are trying to learn Tailwind? Help is here!

Hello everyone!

I come from the world of web design and am moving into dev. I like the concept of utility classes, thus Tailwind. But sometimes it gets overwhelming. I ran across a great tool online that lets you write vanilla CSS, and it converts it to Tailwind classes.

The url for this tool is: https://tailwind-converter.netlify.app/

To use it, simply paste in your vanilla css and it will convert it to tailwind css as well as letting you know if there is not an equivalent tailwind value. I don't know if it can handle SCSS or not. The site loads with the following examples; you can type in and alter it to see what the conversion is. When you first visit the site, the editing screen looks like this:

Image description

You can either type over the provided example code -- you'll see the Tailwind CSS automatically update on the right-hand side, or you can clear the default examples and you'll see the following:

Image description

Simply type/paste in your code, and voila--instant Tailwind!

Top comments (0)