From 7b082258a2f2939d8fed19dd29e5031050bc3e31 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:24:55 -0800
Subject: [PATCH] refactor: remove tailwind from monorepo spec (#1190)

it is not helpful for the purposes of the monorepo e2e test was causing
issues in upgrading tailwind for #1189 so opting to remove

the styles are not meant to be 100% accurate to the original. I just
wanted something reasonably close

---------

Co-authored-by: Tyler <26290074+thegitduck@users.noreply.github.com>
---
 .../packages/waku-project/package.json        |  2 --
 .../packages/waku-project/postcss.config.js   |  7 -------
 .../waku-project/src/components/counter.tsx   | 21 +++++++++++++++++--
 .../waku-project/src/components/footer.tsx    |  8 +++++--
 .../waku-project/src/components/header.tsx    |  6 ++++--
 .../waku-project/src/pages/_layout.tsx        |  4 ++--
 .../packages/waku-project/src/pages/about.tsx | 11 ++++++++--
 .../packages/waku-project/src/pages/index.tsx | 11 ++++++++--
 .../packages/waku-project/src/styles.css      |  3 ---
 .../packages/waku-project/tailwind.config.js  |  4 ----
 10 files changed, 49 insertions(+), 28 deletions(-)
 delete mode 100644 e2e/fixtures/monorepo/packages/waku-project/postcss.config.js
 delete mode 100644 e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js

diff --git a/e2e/fixtures/monorepo/packages/waku-project/package.json b/e2e/fixtures/monorepo/packages/waku-project/package.json
index bb23af53d..8d7b1c6e4 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/package.json
+++ b/e2e/fixtures/monorepo/packages/waku-project/package.json
@@ -18,8 +18,6 @@
   "devDependencies": {
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.2",
-    "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.16",
     "typescript": "5.7.2"
   }
 }
diff --git a/e2e/fixtures/monorepo/packages/waku-project/postcss.config.js b/e2e/fixtures/monorepo/packages/waku-project/postcss.config.js
deleted file mode 100644
index 709af5d83..000000000
--- a/e2e/fixtures/monorepo/packages/waku-project/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx
index adb6b94e9..c0dad7a1e 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx
@@ -8,11 +8,28 @@ export const Counter = () => {
   const handleIncrement = () => setCount((c) => c + 1);
 
   return (
-    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+    <section
+      style={{
+        borderColor: 'blue',
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        borderRadius: 4,
+        marginTop: 16,
+        padding: 16,
+        marginLeft: -16,
+        marginRight: -16,
+      }}
+    >
       <div>Count: {count}</div>
       <button
         onClick={handleIncrement}
-        className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
+        style={{
+          borderRadius: 4,
+          padding: 8,
+          backgroundColor: 'black',
+          color: 'white',
+          fontSize: 16,
+        }}
       >
         Increment
       </button>
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx
index 8cfd9c897..70148eec5 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx
@@ -1,13 +1,17 @@
 export const Footer = () => {
   return (
-    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+    <footer style={{ bottom: 0, left: 0, position: 'fixed', padding: 16 }}>
       <div>
         visit{' '}
         <a
           href="https://waku.gg/"
           target="_blank"
           rel="noreferrer"
-          className="mt-4 inline-block underline"
+          style={{
+            marginTop: 16,
+            display: 'inline-block',
+            textDecoration: 'underline',
+          }}
         >
           waku.gg
         </a>{' '}
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx
index 1b03ba54d..6c73faeb7 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx
@@ -2,8 +2,10 @@ import { Link } from 'waku';
 
 export const Header = () => {
   return (
-    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
-      <h2 className="text-lg font-bold tracking-tight">
+    <header
+      style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16 }}
+    >
+      <h2 style={{ fontSize: 32, fontWeight: 'bold' }}>
         <Link to="/">Waku starter</Link>
       </h2>
     </header>
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx
index 6d227c9f6..f93c96c74 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx
@@ -11,11 +11,11 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
 
   return (
-    <div className="font-['Nunito']">
+    <div style={{ fontFamily: 'Nunito' }}>
       <meta name="description" content={data.description} />
       <link rel="icon" type="image/png" href={data.icon} />
       <Header />
-      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+      <main style={{ margin: 40, display: 'flex', justifyContent: 'center' }}>
         {children}
       </main>
       <Footer />
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx
index 15d4c90e1..7261db7ba 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx
@@ -6,9 +6,16 @@ export default async function AboutPage() {
   return (
     <div>
       <title>{data.title}</title>
-      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <h1 style={{ fontSize: 32, fontWeight: 'bold' }}>{data.headline}</h1>
       <p>{data.body}</p>
-      <Link to="/" className="mt-4 inline-block underline">
+      <Link
+        to="/"
+        style={{
+          display: 'inline-block',
+          marginTop: 16,
+          textDecoration: 'underline',
+        }}
+      >
         Return home
       </Link>
     </div>
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx b/e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx
index 3e9d83ac7..de1a36d5b 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx
@@ -14,13 +14,20 @@ export default async function HomePage() {
   return (
     <div>
       <title>{data.title}</title>
-      <h1 className="text-4xl font-bold tracking-tight" data-testid="header">
+      <h1 style={{ fontSize: 32, fontWeight: 'bold' }} data-testid="header">
         {data.headline}
       </h1>
       <Hello />
       <p>{data.body}</p>
       <Counter />
-      <Link to="/about" className="mt-4 inline-block underline">
+      <Link
+        to="/about"
+        style={{
+          marginTop: 16,
+          display: 'inline-block',
+          textDecoration: 'underline',
+        }}
+      >
         About page
       </Link>
       <ContextProvider>
diff --git a/e2e/fixtures/monorepo/packages/waku-project/src/styles.css b/e2e/fixtures/monorepo/packages/waku-project/src/styles.css
index 4cb5445ab..fd092867f 100644
--- a/e2e/fixtures/monorepo/packages/waku-project/src/styles.css
+++ b/e2e/fixtures/monorepo/packages/waku-project/src/styles.css
@@ -1,4 +1 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js b/e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js
deleted file mode 100644
index df5c92956..000000000
--- a/e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-};