fixed bug where tailwind styling would not be applied to injected content on a tab (#15)

Updating Tailwind stuff.

Author: Miles-Fritzmather

entrypoints/background.ts

@@ -1,3 +1,3 @@
 export default defineBackground(() => {
-  console.log('Hello background!', { id: browser.runtime.id });
+	console.log("Hello background!", { id: browser.runtime.id });
 });

entrypoints/components/banner.tsx

@@ -0,0 +1,14 @@
+const Banner = (): React.ReactNode => {
+	return (
+		<div className="fixed top-0 left-0 w-full bg-gradient-to-r from-orange-500 to-red-500 text-white p-4 shadow-lg z-50">
+			<div className="text-center">
+				<h2 className="text-xl font-bold mb-1">🎓 Degree Audit Plus</h2>
+				<p className="text-sm opacity-90">
+					Enhanced degree audit experience - Powered by Longhorn Developers
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default Banner;

entrypoints/content.ts

@@ -0,0 +1,17 @@
+import { createRoot } from "react-dom/client";
+import Banner from "./components/banner";
+import "./styles/content.css";
+
+export default defineContentScript({
+	matches: ["https://utdirect.utexas.edu/*"],
+	main() {
+		console.log("Content script loaded.");
+
+		const container = document.createElement("div");
+		container.id = "dap-banner-root";
+		document.body.prepend(container);
+
+		const root = createRoot(container);
+		root.render(<Banner />);
+	},
+});

entrypoints/content.tsx

@@ -7,28 +7,46 @@ function App() {
 	const [count, setCount] = useState(0);
 
 	return (
-		<>
-			<div>
-				<a href="https://wxt.dev" target="_blank">
-					<img src={wxtLogo} className="logo" alt="WXT logo" />
-				</a>
-				<a href="https://react.dev" target="_blank">
-					<img src={reactLogo} className="logo react" alt="React logo" />
-				</a>
+		<div className="min-h-screen bg-gray-100 p-8">
+			{/* Test Tailwind classes */}
+			<div className="bg-gradient-to-r from-orange-500 to-red-500 text-white p-4 rounded-lg mb-6">
+				<h1 className="text-2xl font-bold">🎓 Degree Audit Plus</h1>
+				<p className="text-sm opacity-90">Enhanced degree audit experience</p>
 			</div>
-			<h1>WXT + React</h1>
-			<div className="card">
-				<button onClick={() => setCount((count) => count + 1)}>
-					count is {count}
-				</button>
-				<p>
-					Edit <code>src/App.tsx</code> and save to test HMR
-				</p>
+
+			<div className="bg-white rounded-lg shadow-lg p-6">
+				<div className="flex justify-center space-x-4 mb-6">
+					<a
+						href="https://wxt.dev"
+						target="_blank"
+						className="hover:opacity-80 transition-opacity"
+					>
+						<img src={wxtLogo} className="h-16 w-16" alt="WXT logo" />
+					</a>
+					<a
+						href="https://react.dev"
+						target="_blank"
+						className="hover:opacity-80 transition-opacity"
+					>
+						<img src={reactLogo} className="h-16 w-16" alt="React logo" />
+					</a>
+				</div>
+
+				<div className="text-center">
+					<button
+						onClick={() => setCount((count) => count + 1)}
+						className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors"
+					>
+						count is {count}
+					</button>
+					<p className="mt-4 text-gray-600">
+						Edit{" "}
+						<code className="bg-gray-200 px-2 py-1 rounded">src/App.tsx</code>{" "}
+						and save to test HMR
+					</p>
+				</div>
 			</div>
-			<p className="read-the-docs">
-				Click on the WXT and React logos to learn more
-			</p>
-		</>
+		</div>
 	);
 }
 

entrypoints/popup/App.tsx

@@ -0,0 +1 @@
+@import "tailwindcss";

entrypoints/styles/content.css

@@ -23,4 +23,12 @@ export default defineConfig({
 
 		permissions: ["storage", "tabs", "scripting"],
 	},
+
+	vite: () => ({
+		css: {
+			postcss: {
+				plugins: [require("@tailwindcss/postcss"), require("autoprefixer")],
+			},
+		},
+	}),
 });