Tailwind CSS Chat

Keep a ref on the message container and set scrollTop = scrollHeight whenever a new message is added. In Vue, do this inside nextTick after the DOM updates. In React, use useEffect triggered by the message array length. One important detail: check if the user has scrolled up to read older messages before auto-scrolling. If they have, show a "new messages" indicator instead of yanking them back to the bottom.

Sent messages align right with a colored background (blue, indigo, or your brand color). Received messages align left with a neutral background (gray or white). This left/right pattern is immediately recognizable from every major messaging platform. Group consecutive messages from the same sender and only show the avatar and name on the first message in the group to reduce visual clutter.

Display a small bubble in the received-message position with an animated dots pattern. Three dots with a staggered opacity or bounce animation is the universal convention. Show the indicator when you receive a "user is typing" event from your backend, and hide it after a timeout or when the actual message arrives. Keep the typing indicator lightweight so it does not cause layout jumps.