Style It Quick: A ChatGPT Prompt to Revamp Your React App with TailwindCSS in less than 60 Minutes

Over recent months, I’ve been immersed in developing my very first React app. Once the functionality was solid, it was time to tackle styling. Due to my engineering background, styling isn’t my forte. I had my eyes set on TailwindCSS for this task but chose to let ChatGPT take the reins on the styling front. So I made this prompt:

I have developed a React app which currently has minimal to no CSS styling. The setup for TailwindCSS is complete. Your task is to transform the source files of my React components into consistently styled components using TailwindCSS. The styling should align with the specified theme. Adhere to any provided coding or TailwindCSS conventions while working on this task. Draw styling inspiration from any provided examples. The styling should be approached from the specified perspective. After receiving this prompt, list the TailwindCSS classes you intend to use before proceeding with the component code modifications.

App Name: <MyCoolApp>

Desired Theme/Style: <Modern, clean lines, minimalistic>

Primary Color (Hex): <#3498db>

Secondary Color(s) (Hex): <#2ecc71>

Coding or TailwindCSS Conventions: <BEM Naming Convention>

Examples of Apps/Websites for Styling Inspiration: <example.com, anotherexample.com>

Mobile-First/Desktop-First: <Mobile-First>

If you are able to do this, please simple respond with “OKAY”.

In order to use this prompt correctly you should already have TailwindCSS installed in your React App. If you don’t know how, I highly recommend this article.

In this article I am going to be using this table component:

const sampleData: Data[] = [
  { id: 1, name: 'Alice', age: 25, city: 'New York' },
  { id: 2, name: 'Bob', age: 30, city: 'San Francisco' },
  { id: 3, name: 'Charlie', age: 35, city: 'Los Angeles' },
];

const DataTable: React.FC = () => {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          {sampleData.map(row => (
            <tr key={row.id}>
              <td>{row.id}</td>
              <td>{row.name}</td>
              <td>{row.age}</td>
              <td>{row.city}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Without any styling the component looks like this:

A very normal, straightforward HTML table. Now to add some styling. I primed a ChatGPT session with the prompt from above, then sent it the component code and ChatGPT provided this as the output:

<div className="rounded-lg overflow-hidden shadow-lg p-4 bg-white">
  <table className="min-w-full bg-white">
    <thead className="bg-blue-600 text-white">
      <tr>
        <th className="text-left py-3 px-4 uppercase font-semibold text-sm">ID</th>
        <th className="text-left py-3 px-4 uppercase font-semibold text-sm">Name</th>
        <th className="text-left py-3 px-4 uppercase font-semibold text-sm">Age</th>
        <th className="text-left py-3 px-4 uppercase font-semibold text-sm">City</th>
      </tr>
    </thead>
    <tbody className="text-gray-700">
      {sampleData.map(row => (
        <tr key={row.id} className="text-left py-3 px-4 border-b">
          <td>{row.id}</td>
          <td>{row.name}</td>
          <td>{row.age}</td>
          <td>{row.city}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

As you can see it chose and inserted some appropriate TailwindCSS classes automatically and the component now looks like:

While the styling is still very basic at first you can iteratively interact with ChatGPT to easily refine your styling. Next I decided to ask it to make the background have a nice subtle color gradient as a background instead:

This is the output code:

<div className="rounded-lg overflow-hidden shadow-lg p-4">
    <table className="min-w-full border-collapse bg-gradient-to-r from-blue-600 to-green-500">
      <thead className="bg-transparent text-white">
        <tr>
          <th className="text-left py-3 px-4 uppercase font-semibold text-sm">ID</th>
          <th className="text-left py-3 px-4 uppercase font-semibold text-sm">Name</th>
          <th className="text-left py-3 px-4 uppercase font-semibold text-sm">Age</th>
          <th className="text-left py-3 px-4 uppercase font-semibold text-sm">City</th>
        </tr>
      </thead>
      <tbody className="text-gray-700">
        <tr className="text-left py-3 px-4 border-b bg-white bg-opacity-50">
          <td>1</td>
          <td>Alice</td>
          <td>25</td>
          <td>New York</td>
        </tr>
        <tr className="text-left py-3 px-4 border-b bg-white bg-opacity-50">
          <td>2</td>
          <td>Bob</td>
          <td>30</td>
          <td>San Francisco</td>
        </tr>
        <tr className="text-left py-3 px-4 border-b bg-white bg-opacity-50">
          <td>3</td>
          <td>Charlie</td>
          <td>35</td>
          <td>Los Angeles</td>
        </tr>
      </tbody>
    </table>
  </div>

And this is what the component looks like:

You can continue to do this again and again ChatGPT will continue to alter the TailwindCSS classes until you are satisfied. Then, once you are done with one component, it is able to easily switch to a new component once you provide it some new component code. It even remembers the styles that it previously applied to it can immediately apply the same styles to similar components, e.g. if you wanted to add another table.

This is a very simple example, but I used this to style the entirety of my new website stridesync.co in less than an hour! Check it out if you want to see the full power of this prompt!