Work on Second Example

nikonst · nikonst · commit 91ec07d04845 · 2024-03-29T09:25:14.000+02:00
diff --git a/tailwind/Example2/dist/index.html b/tailwind/Example2/dist/index.html
@@ -1,12 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tailwind Landing Page</title>
     <link href="./styles.css" rel="stylesheet">
 </head>
+
 <body>
-    <h1 class="bg-blue-400">Helllo</h1>
-</body>
+    <nav class="relative container mx-auto p-8">
+        <div class="flex items-center justify-between">Logo</div>
+    </nav>
+
 </html>
diff --git a/tailwind/Example2/dist/styles.css b/tailwind/Example2/dist/styles.css
@@ -554,7 +554,65 @@ video {
   --tw-contain-style:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 480px) {
+  .container {
+    max-width: 480px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 976px) {
+  .container {
+    max-width: 976px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1440px;
+  }
+}
+
+.relative {
+  position: relative;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
+
+.bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+}
+
+.p-8 {
+  padding: 2rem;
+}
diff --git a/tailwind/Example2/package.json b/tailwind/Example2/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build-dist": "tailwindcss -i ./src/input.css -o ./dist/styles.css --watch "
   },
   "keywords": [],
   "author": "",
