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 <[email protected]>
dai-shi · Jan 26, 2025 · 7b08225 · 7b08225
1 parent b998761
commit 7b08225
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 28 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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