Add tailwindcss to react

rxqd · Mar 31, 2024 · f7cf848 · f7cf848
1 parent 05df27a
commit f7cf848
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 17 deletions.
diff --git a/src/node/html/index.html b/src/node/html/index.html
@@ -12,17 +12,19 @@
 <body>
   <main>
     <h1>HTML Sandbox</h1>
-    <p>Simple paragraph</p>
-    <div>Simple div</div>
-    <hr />
-    <ul>
-      <li>Point 1</li>
-      <li>Point 2</li>
-      <li>Point 3</li>
-    </ul>
-    <span>Simple span</span><br /><br />
-    <a href="#">Simple link</a><br /><br />
-    <button>Simple button</button>
+
+    <h2>Grid Layout</h2>
+    <div class="grid">
+      <div class="item item-1"><span class="item__text">1</span></div>
+      <div class="item item-2"><span class="item__text">2</span></div>
+      <div class="item item-3"><span class="item__text">3</span></div>
+      <div class="item item-4"><span class="item__text">4</span></div>
+      <div class="item item-5"><span class="item__text">5</span></div>
+      <div class="item item-6"><span class="item__text">6</span></div>
+      <div class="item item-7"><span class="item__text">7</span></div>
+      <div class="item item-8"><span class="item__text">8</span></div>
+      <div class="item item-9"><span class="item__text">9</span></div>
+    </div>
   </main>
 
   <script type="module" src="script.js"></script>

diff --git a/src/node/html/style.css b/src/node/html/style.css
@@ -3,3 +3,29 @@ main {
   line-height: 1.25em;
   padding: 5%;
 }
+
+.grid {
+  display: grid;
+  grid-template-rows: repeat(3, 100px);
+  grid-template-columns: repeat(3, 1fr);
+  gap: 5px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #219EBC;
+  border: 1px solid #054A91;
+}
+
+.item__text {
+  background: #8ECAE6;
+  color: #023047;
+  font-size: 2em;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/node/react/package.json b/src/node/react/package.json
@@ -18,13 +18,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
-    "vite": "^5.2.6"
+    "vite": "^5.2.6",
+     "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+  "tailwindcss": "^3.4.3"
   },
   "engines": {
     "node": "=20.x"
   },
-  "packageManager": "[email protected]",
-  "dependencies": {
-    "modern-normalize": "^2.0.0"
-  }
+  "packageManager": "[email protected]"
 }
diff --git a/src/node/react/postcss.config.js b/src/node/react/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/node/react/src/App.css b/src/node/react/src/App.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/node/react/src/App.tsx b/src/node/react/src/App.tsx
@@ -1,4 +1,3 @@
-import 'modern-normalize/modern-normalize.css';
 import "@/App.css";
 import HomePage from "@/pages/HomePage";
 

diff --git a/src/node/react/tailwind.config.js b/src/node/react/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{ts,tsx}",
+      ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+