How to convert HTML and CSS code to Tailwind CSS code

Converting CSS to Tailwind CSS can be a very hard task. That’s because the code is completely different.

But with CSS Scan, you can do that with one single click.

It’s simple, it works on every website, and it’s fast.

It’s available on Chrome, Firefox, Safari, and Edge, as an extension.

To convert the HTML and CSS code of any website’s elements to Tailwind CSS code, open CSS Scan and turn on in your Options the setting: “Convert copied CSS to Tailwind CSS”:

Now you’re ready to go.

Open the CSS Scan browser extension on any website you want, and click on any element you want to copy.

It will copy the selected element and all its child elements, including pseudo-classes (:hover, :focus, etc.), and pseudo-elements (:before, :after, etc.), and media queries.

This way, you can convert over 1,000+ elements that use regular HTML and CSS code to Tailwind CSS code.

Example of converted code:

This feature is currently in beta and uses the @apply feature - which requires you to use a CSS preprocessor. But in the future, we want to update it and make it copy Tailwind’s utility classes directly in the HTML code - we’re working on it.

You can try a free demo on the website.