refactor: add flex basis plugin

styles/globals.css

@@ -88,38 +88,3 @@
     }
   }
 }
-
-@layer utilities {
-  @responsive {
-    .flex-basis-10 {
-      flex-basis: 10%;
-    }
-    .flex-basis-20 {
-      flex-basis: 20%;
-    }
-    .flex-basis-30 {
-      flex-basis: 30%;
-    }
-    .flex-basis-40 {
-      flex-basis: 40%;
-    }
-    .flex-basis-50 {
-      flex-basis: 50%;
-    }
-    .flex-basis-60 {
-      flex-basis: 60%;
-    }
-    .flex-basis-70 {
-      flex-basis: 70%;
-    }
-    .flex-basis-80 {
-      flex-basis: 80%;
-    }
-    .flex-basis-90 {
-      flex-basis: 90%;
-    }
-    .flex-basis-100 {
-      flex-basis: 100%;
-    }
-  }
-}

tailwind.config.js

@@ -68,6 +68,14 @@ function generateForTheme(themeName) {
   });
 }
 
+let flexBasisPlugin = plugin(function ({ addBase, addUtilities }) {
+  let values = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+
+  values.forEach((value) => {
+    addUtilities({ [`.flex-basis-${value}`]: { flexBasis: `${value}%` } });
+  });
+});
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -85,5 +93,5 @@ module.exports = {
       tertiary: "var(--color-tertiary)",
     },
   },
-  plugins: [multiThemePlugin],
+  plugins: [flexBasisPlugin, multiThemePlugin],
 };