init project

app/components/page.tsx

@@ -0,0 +1,9 @@
+import styles from './style.module.css'
+
+const Home = () => {
+  return <main className="flex min-h-screen p-24">
+    <h1 className={styles.red}>Home</h1>
+  </main>
+}
+
+export default Home

app/components/style.module.css

@@ -0,0 +1,3 @@
+.red {
+    color: red;
+}

app/globals.css

@@ -2,26 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  @apply bg-gray-100;
 }