Move all files to inviqa-tailwindcss-example/

inviqa-tailwindcss-example/plugins/flex-basis-plugin.js

@@ -0,0 +1,21 @@
+let plugin = require("tailwindcss/plugin");
+
+let flexBasisPlugin = plugin.withOptions(
+  function (options) {
+    return function ({ addUtilities }) {
+      let values = options?.values ?? [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+
+      values.forEach((value) => {
+        addUtilities({ [`.flex-basis-${value}`]: { flexBasis: `${value}%` } });
+      });
+    };
+  },
+
+  function (options) {
+    return {
+      values: options?.values ?? [],
+    };
+  }
+);
+
+module.exports = flexBasisPlugin;

inviqa-tailwindcss-example/plugins/multi-theme-plugin.js

@@ -0,0 +1,45 @@
+let plugin = require("tailwindcss/plugin");
+
+let multiThemePlugin = plugin.withOptions(
+  function (options) {
+    return function ({ addBase }) {
+      let themes = options?.themes ?? [];
+
+      addBase(generateForRoot(themes));
+
+      Object.keys(themes).forEach((themeName) => {
+        addBase(generateForTheme(themes, themeName));
+      });
+    };
+  },
+
+  function (options) {
+    return {
+      themes: options?.themes ?? [],
+    };
+  }
+);
+
+function generateForRoot(themes) {
+  let defaultThemeName = Object.keys(themes)[0];
+
+  return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
+    return {
+      ":root": {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
+function generateForTheme(themes, themeName) {
+  return Object.entries(themes[themeName]).map(([colourName, value]) => {
+    return {
+      [`[data-theme=${themeName}]`]: {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
+module.exports = multiThemePlugin;