refactor: move to using tailwind

also add a autoscrolling feature

package.json

@@ -19,10 +19,13 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,10 +1,10 @@
 import { useContext } from "react";
 import { AuthStateContext } from "./contexts/auth-state/AuthStateContext";
 import LoginButton from "./components/LoginButton";
-import "./App.css";
 import { useTwitchChat } from "./hooks/useTwitchChat";
 import TwitchBadgeProvider from "./contexts/badges/TwitchBadgeProvider";
 import Message from "./components/Message";
+import MessageContainer from "./components/MessageContainer";
 
 export default function App() {
   const authContext = useContext(AuthStateContext);
@@ -19,15 +19,17 @@ export default function App() {
       <LoginButton />
       {authContext.authState && (
         <section>
-          <p>Hello: {authContext.authState.user.login}</p>
+          <p className="bg-pink-50">
+            Hello: {authContext.authState.user.login}
+          </p>
           <article>
             <h2>Chat Messages:</h2>
             <TwitchBadgeProvider>
-              <div>
+              <MessageContainer messages={messages}>
                 {messages.map((message) => (
                   <Message key={message.message_id} message={message} />
                 ))}
-              </div>
+              </MessageContainer>
             </TwitchBadgeProvider>
           </article>
         </section>

src/components/BadgeList.tsx

@@ -25,7 +25,7 @@ export default function BadgeList({
   }
 
   return (
-    <div className="badges">
+    <div className="flex flex-row gap-1">
       {badges.map(({ set_id, id }) => (
         <img
           key={makeKey(set_id, id)}

src/components/ElapsedTime.tsx

@@ -26,7 +26,7 @@ export default function ElapsedTime({
 
   return (
     <>
-      <span className="timer">
+      <span className="flex-shrink-0 text-sm">
         {minutes > 0 ? `⧗ ${minutes.toString()}m` : "just now!"}
       </span>
     </>

src/components/MentionSegment.tsx

@@ -15,8 +15,8 @@ export default function MentionSegment({
     <span
       className={
         mentioned === authStateContext?.authState?.user.login
-          ? "streamer-mention"
-          : "chatter-mention"
+          ? "font-bold p-1 rounded-sm bg-slate-600"
+          : "p-1 rounded-sm bg-slate-700"
       }
     >
       {text}

src/components/Message.tsx

@@ -8,7 +8,6 @@ import Reply from "./Reply";
 import TextSegment from "./TextSegment";
 import TwitchEmote from "./TwitchEmote";
 import UserName from "./UserName";
-import "./Message.css";
 import UserProfileProvider from "../contexts/UserProfileProvider";
 
 interface Props {
@@ -49,16 +48,19 @@ function fragmentToComponent(
 export default function Message({ message }: Props): React.ReactElement {
   return (
     <UserProfileProvider login={message.chatter_user_login}>
-      <article className="message">
+      <article className="flex flex-row gap-1">
         <ProfilePicture />
-        <section className="container">
-          <header style={{ backgroundColor: colorToRgba(message.color) }}>
+        <section className="flex-1 overflow-hidden rounded-md">
+          <header
+            className="flex px-2 gap-2 items-center bg-black/25"
+            style={{ backgroundColor: colorToRgba(message.color) }}
+          >
             <BadgeList badges={message.badges} />
             <UserName message={message} />
             <ElapsedTime startingDate={message.timestamp} />
           </header>
           {message.reply && <Reply message={message.reply} />}
-          <section className="body">
+          <section className="h-full bg-slate-800 break-words px-2 py-1">
             {message.message.fragments.map((fragment, index) =>
               fragmentToComponent(fragment, index)
             )}