Ionic ChatGPT UI with TailwindCSS

better-chatgpt-tailwind-ionic

In this Quick Win, we will build a stylish ChatGPT UI with side menu using Ionic and TailwindCSS.

Why?

Because Ionic gives us great components while Tailwind offers great utilities, and combined you can easily crate powerful pages.

ionic-chatgpt-ui

We won’t connect it to an actual API, but you can find a full course about Ionic with OpenAI integration the Ionic Academy as well!

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN



App Menu Setup

First of all we need a new Ionic app with a page for the menu template, and a content page for our chat. After that we can add Tailwind with a schematic like this:

You can already select typography and forms during the Tailwind setup, or simply later open your tailwind.config.js and change it to:

Now we also need to make the menu our initial page, so open the src/app/app-routing.module.ts and change it to:

Finally let’s add some boilerplate code that defines our side menu using the Ionic split pane.

This makes sure that the side menu is actually present on the side on bigger screens, and hidden behind the classic burger icon on smaller screens!

Bring up the src/app/pages/menu/menu.page.html for this and change it to:

Now we just need to define a child route for our menu, which is the chat page we initially created.

This goes into the array of children right inside the src/app/pages/menu/menu-routing.module.ts:

Alright, at this point you have a basic side menu set up – let’s build this out with Tailwind!

Designing a custom Side Menu

To achieve the desired UI we can now combine Tailwind utility classes and Ionic components to align them, give them borders and padding and their ChatGPT like design.

Our view will consist of one button to start a new chat above a list with potential previous chat items. At the bottom is a section to clear the conversations, and we try to use Ionicons for the icons as good as possible!

Now start by changing the src/app/pages/menu/menu.page.html to:

We have also given this a dark background but it won’t work correctly until we also include the bg-gray-900 in our CSS file.

Therefore let’s use the Tailwind @apply function to add it to all relevant elements from our src/app/pages/menu/menu.page.scss:

Run your code and the first half of the ChatGPT UI should be done!

Creating the Chat View

Now we move on to the actual chat view. For this page, let’s quickly define some dummy messages inside the src/app/pages/chat/chat.page.ts first:

We can style the view with our dark color again, and the header will automatically show the menu button if we run on a small screen and the side menu is not visible (as opposed to bigger screens where it’s visible due to the split pane).

For our messages with can use an iteration and conditionally apply bg-gray-50 if it’s sent from the bot, and also use 2 different little images that I added to the assets folder. Simply add 2 of your pictures in the right place and use them as the avatar for a message.

In the footer we will place a custom div that uses flex and takes the full width on small devices or just 3/5 once the view becomes bigger. This is the chat message input area, which again is using an Ionic component as the ion-textarea offers a nice autogrow functionality out of the box!

Therefore bring up the src/app/pages/chat/chat.page.html and change it to:

Just like before, we need to add some CSS to our src/app/pages/chat/chat.page.scss as well:

And with that in place, we have finished our nice and clean ChatGPT UI with Ionic components, navigation and TailwindCSS styling!

Leave a Reply

Your email address will not be published. Required fields are marked *