update tailwind plugins

src/tailwind-plugin/tw-bs-grid.js

@@ -1,4 +1,4 @@
-import plugin from "tailwindcss/plugin";
+const plugin = require("tailwindcss/plugin");
 
 module.exports = plugin.withOptions(() => {
   return ({ addComponents }) => {
@@ -16,20 +16,20 @@ module.exports = plugin.withOptions(() => {
     const columns = Array.from({ length: gridColumns }, (_, i) => i + 1);
     const rowColsSteps = columns.slice(0, Math.floor(gridColumns / 2));
 
-    // row
+    // Row
     addComponents(
       {
         ".row": {
           "--bs-gutter-x": gridGutterWidth,
-          "--bs-gutter-y": 0,
+          "--bs-gutter-y": "0",
           display: "flex",
           flexWrap: "wrap",
           marginTop: "calc(var(--bs-gutter-y) * -1)",
           marginRight: "calc(var(--bs-gutter-x) / -2)",
           marginLeft: "calc(var(--bs-gutter-x) / -2)",
-          "& > *": {
+          "> *": {
             boxSizing: "border-box",
-            flexShrink: 0,
+            flexShrink: "0",
             width: "100%",
             maxWidth: "100%",
             paddingRight: "calc(var(--bs-gutter-x) / 2)",
@@ -41,30 +41,46 @@ module.exports = plugin.withOptions(() => {
       { respectImportant },
     );
 
-    // columns
-    addComponents(
-      [
-        {
-          ".col": { flex: "1 0 0%" },
-          ".row-cols-auto": { "& > *": { flex: "0 0 auto", width: "auto" } },
+    // Columns + helper row-cols
+    addComponents([
+      {
+        ".col": {
+          flex: "1 0 0%",
+          width: "initial",
+          display: "initial",
         },
-        ...rowColsSteps.map((num) => ({
-          [`.row-cols-${num}`]: {
-            "& > *": { flex: "0 0 auto", width: `${100 / num}%` },
-          },
-        })),
-        { ".col-auto": { flex: "0 0 auto", width: "auto" } },
-        ...columns.map((num) => ({
-          [`.col-${num}`]: {
+        ".row-cols-auto": {
+          "> *": {
             flex: "0 0 auto",
-            width: `${(100 / gridColumns) * num}%`,
+            width: "auto",
           },
-        })),
-      ],
-      { respectImportant },
-    );
+        },
+      },
+      ...rowColsSteps.map((rowCol) => ({
+        [`.row-cols-${rowCol}`]: {
+          "> *": {
+            flex: "0 0 auto",
+            width: `${100 / rowCol}%`,
+            display: "initial",
+          },
+        },
+      })),
+      {
+        ".col-auto": {
+          flex: "0 0 auto",
+          width: "auto",
+        },
+      },
+      // explicit sized columns
+      ...columns.map((size) => ({
+        [`.col-${size}`]: {
+          flex: "0 0 auto",
+          width: `${(100 / gridColumns) * size}%`,
+        },
+      })),
+    ]);
 
-    // offset
+    // Offsets
     addComponents(
       [0, ...columns.slice(0, -1)].map((num) => ({
         [`.offset-${num}`]: { marginLeft: `${(100 / gridColumns) * num}%` },
@@ -72,11 +88,14 @@ module.exports = plugin.withOptions(() => {
       { respectImportant },
     );
 
-    // gutters
+    // Gutters
     if (Object.keys(gridGutters).length) {
       const gutterComponents = Object.entries(gridGutters).reduce(
         (acc, [key, value]) => {
-          acc[`.g-${key}`] = { "--bs-gutter-x": value, "--bs-gutter-y": value };
+          acc[`.g-${key}`] = {
+            "--bs-gutter-x": value,
+            "--bs-gutter-y": value,
+          };
           acc[`.gx-${key}`] = { "--bs-gutter-x": value };
           acc[`.gy-${key}`] = { "--bs-gutter-y": value };
           return acc;
@@ -86,12 +105,12 @@ module.exports = plugin.withOptions(() => {
       addComponents(gutterComponents, { respectImportant });
     }
 
-    // order
+    // Ordering helpers
     addComponents(
       [
         {
           ".order-first": { order: "-1" },
-          ".order-last": { order: gridColumns + 1 },
+          ".order-last": { order: String(gridColumns + 1) },
         },
         ...[0, ...columns].map((num) => ({
           [`.order-${num}`]: { order: String(num) },

src/tailwind-plugin/tw-theme.js

@@ -1,5 +1,5 @@
-import plugin from "tailwindcss/plugin";
-import themeConfig from "../config/theme.json";
+const plugin = require("tailwindcss/plugin");
+const themeConfig = require("../config/theme.json");
 
 // Helper to extract a clean font name.
 const findFont = (fontStr) =>