component plugins

dist/output.css

@@ -627,6 +627,24 @@ h6{
   }
 }
 
+.btn{
+  display: inline-block;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+}
+
+.btn-rose-900{
+  background-color: #881337;
+  color: white;
+}
+
+.btn-\[\#000\]{
+  background-color: #000;
+  color: white;
+}
+
 .menu-item{
   position: relative;
   display: flex;
@@ -826,10 +844,6 @@ h6{
   height: 20rem;
 }
 
-.h-\[250px\]{
-  height: 250px;
-}
-
 .min-h-\[400px\]{
   min-height: 400px;
 }
@@ -984,10 +998,6 @@ h6{
   gap: 1rem;
 }
 
-.gap-5{
-  gap: 1.25rem;
-}
-
 .gap-8{
   gap: 2rem;
 }
@@ -1107,16 +1117,6 @@ h6{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.via-pink-500{
-  --tw-gradient-to: rgb(236 72 153 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to);
-}
-
-.via-cyan-500{
-  --tw-gradient-to: rgb(6 182 212 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #06b6d4, var(--tw-gradient-to);
-}
-
 .via-cyan-900{
   --tw-gradient-to: rgb(22 78 99 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #164e63, var(--tw-gradient-to);
@@ -1164,11 +1164,6 @@ h6{
   padding-right: 1rem;
 }
 
-.px-3{
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1179,6 +1174,11 @@ h6{
   padding-right: 0.5rem;
 }
 
+.px-3{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pr-4{
   padding-right: 1rem;
 }

plugins/buttonPlugin.js

@@ -0,0 +1,45 @@
+const plugin = require("tailwindcss/plugin");
+const { default: lightOrDarkColor } = require("@check-light-or-dark/color");
+
+const buttonPlugin = plugin(function ({
+  addComponents,
+  matchComponents,
+  theme,
+}) {
+  console.log(theme("spacing")["0.5"]);
+  addComponents({
+    ".btn": {
+      display: "inline-block",
+      cursor: "pointer",
+      fontWeight: "bold",
+      padding: `${theme("spacing.2")} ${theme("spacing.4")}`,
+      borderRadius: theme("borderRadius").lg,
+    },
+  });
+
+  console.log(theme("colors"));
+  for (let key in theme("colors")) {
+    if (typeof theme("colors")[key] !== "string") {
+      for (let shade in theme("colors")[key]) {
+        const colorType = lightOrDarkColor(theme("colors")[key][shade]);
+        addComponents({
+          [`.btn-${key}-${shade}`]: {
+            backgroundColor: theme("colors")[key][shade],
+            color: colorType === "dark" ? "white" : "black",
+          },
+        });
+      }
+    }
+  }
+
+  matchComponents({
+    btn: (value) => {
+      return {
+        backgroundColor: value,
+        color: lightOrDarkColor(value) === "dark" ? "white" : "black",
+      };
+    },
+  });
+});
+
+module.exports = buttonPlugin;

src/index.html

@@ -329,5 +329,6 @@ <h2 class="mt-20">Tickets</h2>
         </table>
       </div>
     </main>
+    <div class="btn-[#000] btn">Some button</div>
   </body>
 </html>

tailwind.config.js

@@ -23,5 +23,6 @@ module.exports = {
     require("./plugins/openVariant"),
     require("./plugins/animationDelay"),
     require("./plugins/tableCaption"),
+    require("./plugins/buttonPlugin"),
   ],
 };