Custom class input css

nikonst · nikonst · commit 58ed36a7a2b4 · 2024-03-27T09:41:31.000+02:00
diff --git a/tailwind/Example1/src/index.html b/tailwind/Example1/src/index.html
@@ -8,7 +8,7 @@
 </head>
 <body class="bg-blue-400">
     <div class="container mx-auto px-2">
-        <button class="bg-blue-500 hover:bg-blue-400 text-white py-2 px-4 rounded">Press</button>
+        <button class="btn bg-blue-500 hover:bg-blue-400 text-white py-2 px-4 rounded">Press</button>
     </div>
 </body>
 </html>
diff --git a/tailwind/Example1/src/input.css b/tailwind/Example1/src/input.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.btn {
+    @apply font-bold
+}
diff --git a/tailwind/Example1/src/style.css b/tailwind/Example1/src/style.css
@@ -546,6 +546,10 @@ video {
 
 .container {
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 4rem;
+  padding-left: 4rem;
 }
 
 @media (min-width: 640px) {
@@ -587,11 +591,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -602,26 +601,30 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.btn {
+  font-weight: 700;
+}
+
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
diff --git a/tailwind/Example1/tailwind.config.js b/tailwind/Example1/tailwind.config.js
@@ -2,6 +2,10 @@
 module.exports = {
   content: ["./src/*.{html,js}"],
   theme: {
+    container: {
+      center: true,
+      padding: '4rem',
+    },
     extend: {},
   },
   plugins: [],
