refactor: restyle with tailwind

Author: yosevu

content-script/src/App.css

@@ -1,11 +1,10 @@
 import Logo from "./Logo";
-import "./App.css";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <Logo className="App-logo" id="App-logo" title="React logo" />
+    <div className="w-full text-center">
+      <header className="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-2xl text-white">
+        <Logo className="h-40 pointer-events-none animate-spin-slow" id="App-logo" title="React logo" />
         <p>Hello, World!</p>
         <p>I'm a Chrome Extension Content Script!</p>
       </header>

content-script/src/App.tsx

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

content-script/src/main.css

@@ -1,26 +1,14 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "./main.css";
+import "./main.css"; 
 import App from "./App";
 
-const body = document.querySelector("body");
-
 const app = document.createElement("div");
-
 app.id = "root";
 
-// Make sure the element that you want to mount the app to has loaded. You can
-// also use `append` or insert the app using another method:
-// https://developer.mozilla.org/en-US/docs/Web/API/Element#methods
-//
-// Also control when the content script is injected from the manifest.json:
-// https://developer.chrome.com/docs/extensions/mv3/content_scripts/#run_time
-if (body) {
-  body.prepend(app);
-}
+document.body.prepend(app);
 
-const container = document.getElementById("root");
-const root = createRoot(container!);
+const root = createRoot(app);
 
 root.render(
   <React.StrictMode>

content-script/src/main.tsx

@@ -19,6 +19,9 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.9",
     "typescript": "^5.5.4",
     "vite": "^5.4.0"
   }

package.json

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

postcss.config.js

@@ -1,11 +1,10 @@
 import Logo from "./Logo";
-import "./App.css";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <Logo className="App-logo" id="App-logo" title="React logo" />
+    <div className="w-92 text-center">
+      <header className="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-2xl text-white">
+        <Logo className="h-40 pointer-events-none animate-spin-slow" id="App-logo" title="React logo" />
         <p>Hello, World!</p>
         <p>I'm a Chrome Extension Popup!</p>
       </header>

src/App.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/App.tsx

@@ -0,0 +1,11 @@
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}", 
+    "./content-script/src/**/*.{js,ts,jsx,tsx}" 
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}