loading...
Cover image for We built an OpenAI powered Tailwind CSS code generator using GPT-3
Themesberg

We built an OpenAI powered Tailwind CSS code generator using GPT-3

zolidev profile image Zoltán Szőgyényi Originally published at themesberg.com ・2 min read

A couple of days ago we got access to the OpenAI’s Beta API platform and I had the occasion to play around with it. After the first couple of minutes I couldn’t really understand how it works, but after going through some tutorials and other examples I got a hang of it.

Tailwind CSS GPT-3 Code Generator

GPT-3 (Generative Pretrained Transformer 3) is an unsupervised Transformer language model and the successor to GPT-2 containing over 175 billion parameters. The interesting thing about this AI is that it can very quickly learn only from a few input parameters before giving it a job to do.

Because we work in web development specifically with front-end frameworks such as Bootstrap, Tailwind CSS, React, Angular, Vue and so on we thought it’s worth giving a shot to use the AI to generate code. We just did that and I must say I am very surprised by the results.

Effectively I built a local React app where I can give a text based input, send it over to the OpenAI API and then it will give me the results (the HTML code) that you see below. Mind. Blown. 🤯

Here’s the video:

Of course I had to train the AI before it can give such good results and there is so much more work to be done to optimize the results. As you can see the first example was perfect, however the second one had some extra garbage results as well.

How can GPT-3 Tailwind CSS Code Generator help developers?

So I want to make it very clear - because many developers are scared that they will lose their jobs after this - that GPT-3 will not affect the jobs of front-end developers because it can only effectively return results for at most a couple of components. Besides, the results are almost never perfect, but that doesn’t matter.

The way I imagine this tool being used is sort of a smart snippet or a code assistant that can save you time writing boilerplate code. We already purchased over 40 domains related to GPT-3 and AI in web development and you will see Themesberg being more and more active in this field.

Either way, if you are interested in getting early access to this builder please let us know by joining the waiting list on the official GPT-3 Tailwind CSS website.

Posted on by:

zolidev profile

Zoltán Szőgyényi

@zolidev

CEO at Themesberg. I turn beautiful coffee into delicious websites. He/him.

Themesberg

We are shaping the WWW by developing and selling high quality and fully featured website templates and UI/UX resources for web developers and agencies across the world.

Discussion

markdown guide