Using ChatGPT, Github Copilot and Phind to generate Tailwind config for width classes
Tags: ruby, chatgpt, ai, github
Published: 2023-10-26 09:34:20


In this article, I will show how I used ChatGPT, Github Copilot and Phind to generate a custom Tailwind config for width classes up to 800px for desktop resolution.

These language models can serve as helpful conversation partners, providing different solutions to the same problem.

Here, we'll compare their responses to a specific request involving the golden ratio and discuss their effectiveness.

## Problem

As this was a personal project, I still needed a complete design, just some inspirational ideas I wanted to try.

I wanted to add some custom width-sized in a Tailwind config for a web app up until about 800px for the desktop resolution.

I asked Chat GPT 4 and Github Copilot Chat the same question and got different answers.

## Chat GPT 4

Here is what I asked Chat GPT 4:

![Chat GPT4 question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mp7he5k2ee7fxwqx9qx.png)

Here is what it suggested:

![Answer from GPT4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apsn1aj2ha2xwwpxc9dz.png)

As you can notice, it used the constraint that I added (to use the golden ratio) to calculate the actual size from the last one provided by me (384px) to reach the 800px that I asked for and then tried to create a series of width utilities matching a bit how Tailwind does it - by spacing them out.

Did not check all of the utilities proposed, but the first one and the last one are calculated ok from the rem to px ratio.

## Github Copilot

I then tried to use Github Copilot via VSCode to generate this list.

Here is the prompt and the response:

![Copilot Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ez3l58l74lpne9htn9b5.png)

It has some fine-grained steps, it reaches the 800 px and it correctly started from 400 (as Tailwind already defined 384px) but I don't see how it used the golden ratio (which is around 1.61).

It ignored the request to use the golden ratio: did not use it for spacing the utilities, nor used it for calculating the distance in rem or pixels between two utility classes.

## Github Copilot Chat

I then tried Github Copilot Chat:


![Asking Copilot Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieqhphgk6aim9dpbwaej.png)

And it replied with the following:


![Response from Github Copilot Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frunip5jve07vfvwspmk.png)


It seems that it was unaware that Tailwind already has width classes up until 384px. But it did apply with an approximation of the golden ratio when spacing the width classes.

## Phind

I asked [Phind](https://www.phind.com) the same question and here is the answer:


![Phind Search answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btk4ohk3li0iohpu6zfj.png)

![Phind Search answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbpyi59nk3up2v1nnrl8.png)


I find the Phind answer better. It explains how it did the calculation, it used the golden ratio for each step and it also provides the Tailwind config and shows how to use it.

---

Enjoyed this article?

Join my [**Short Ruby News**](https://shortruby.com/) **newsletter** for weekly Ruby updates from the community. For more Ruby **learning resources**, visit [**rubyandrails.info**](http://rubyandrails.info)**. You can also find me on [Ruby.social](http://ruby.social/@lucian) or [**Linkedin**](https://linkedin.com/in/lucianghinda) **or** [**Twitter**](https://x.com/lucianghinda)