refactor: add tailwindcss

src/assets/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/embed.tsx

@@ -1,14 +1,12 @@
 import ReactDOM from "react-dom/client";
-import { Reset } from "styled-reset";
 import Embed from "./embed/index";
-import "./assets/base.css";
+import './assets/index.css';
 import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(
   <>
-    <Reset />
     <Embed />
     <MarkdownStyleOverride />
   </>

src/embed/Chat.tsx

@@ -1,13 +1,9 @@
-import React from "react";
-import styled from "styled-components";
-const Styled = styled.section`
-  width: 800px;
-  height: 800px;
-`;
+// import React from "react";
+
 type Props = {};
 
 const Chat = (props: Props) => {
-  return <Styled>Chat</Styled>;
+  return <div className=" bg-black">Chat</div>;
 };
 
 export default Chat;

src/embed/index.tsx

@@ -1,21 +1,17 @@
 import { useState } from "react";
-import styled from "styled-components";
-const Styled = styled.aside`
-  pointer-events: all;
-`;
 import Chat from "./Chat";
 type Props = {};
 
-function Embed({}: Props) {
+function Embed({ }: Props) {
   const [visible, setVisible] = useState(false);
   const toggleVisible = () => {
     setVisible((prev) => !prev);
   };
   return (
-    <Styled>
+    <div className="bg-slate-400 w-12 h-12">
       <button onClick={toggleVisible}>{visible ? "close" : "open"}</button>
       {visible && <Chat />}
-    </Styled>
+    </div>
   );
 }