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:
Here is what it suggested:
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:
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:
And it replied with the following:
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 the same question and here is the answer:
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 newsletter for weekly Ruby updates from the community. For more Ruby learning resources, visit rubyandrails.info. You can also find me on Ruby.social or Linkedin **or Twitter
Top comments (0)