ChatGPT turns Tailwind into Vanilla CSS

Building a side project, I had created some input fields but they didn't look nice.

I went googling for nice looking input fields, and I found a style I liked, but they were created with Tailwind

Nothing against Tailwind, but I don't want to have to use a build tool for my CSS. So I thought, 'Can ChatGPT translate from Tailwind to Vanilla CSS?"

The answer is yes.

ChatGPT can translate Tailwind to CSS

I literally copied and pasted in the Tailwind HTML and it gave me the HTML and CSS.

I had to tweak a few things it got wrong, with the margin and padding of the document off in a few places.

The padding was wrecking me for a while, until I remembered the border-box reset.

html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

	

So if find a Tailwind style you like, but don't want to use Tailwind, give it the olde ChatGPT try. You might have to clean up a few things, but it takes care of 80% of the work.