feat: add custom option to set spacing unit

README.md

@@ -153,8 +153,74 @@ The plugin is designed to be safe and only transforms class-related attributes:
 
 ## 🔧 Configuration
 
+### Basic Configuration
+
 The plugin works out of the box with default settings. No additional configuration is required.
 
+### Custom Spacing Unit
+
+If you've customized your Tailwind CSS spacing scale, you can configure the plugin to match your custom spacing unit.
+
+By default, Tailwind uses **4px** as the base spacing unit (e.g., `p-1` = 4px, `p-2` = 8px). If you've changed this in your Tailwind configuration, you should update the `customSpacingUnit` option.
+
+**`.prettierrc.js`**
+
+```javascript
+module.exports = {
+  plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
+  customSpacingUnit: 8, // Change to match your Tailwind spacing scale
+};
+```
+
+**`tailwind.config.js` (Example with 8px base unit)**
+
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        1: "8px", // 8px * 1
+        2: "16px", // 8px * 2
+        3: "24px", // 8px * 3
+        4: "32px", // 8px * 4
+        // ... etc
+      },
+    },
+  },
+};
+```
+
+**Tailwind CSS v4 (`global.css` or similar)**
+
+```css
+@theme {
+  --spacing: 1px;
+  /* ... etc */
+}
+```
+
+**Example with `customSpacingUnit: 8`**
+
+```jsx
+// Before
+<div className="p-[8px] m-[16px] gap-[24px]">Content</div>
+
+// After (with customSpacingUnit: 8)
+<div className="p-1 m-2 gap-3">Content</div>
+```
+
+**Example with default `customSpacingUnit: 4`**
+
+```jsx
+// Before
+<div className="p-[4px] m-[8px] gap-[12px]">Content</div>
+
+// After (with customSpacingUnit: 4)
+<div className="p-1 m-2 gap-3">Content</div>
+```
+
+See the [examples/custom-spacing](./examples/custom-spacing) directory for a complete working example.
+
 > **Note**: This plugin is optimized for Prettier v3+ and takes advantage of the new plugin architecture. If you're using Prettier v2, please upgrade to v3 or use an alternative solution.
 
 ## 🧪 Testing

examples/.prettierrc.js

@@ -4,6 +4,7 @@ module.exports = {
     "prettier-plugin-tailwindcss",
     "prettier-plugin-merge",
   ],
+  customSpacingUnit: 1,
   semi: true,
   singleQuote: false,
   tabWidth: 2,

examples/custom-spacing/.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
+  // Custom spacing unit (default: 4)
+  // If your Tailwind config uses a different spacing scale, set this accordingly
+  // For example, if you've customized Tailwind's spacing so that:
+  // - spacing[1] = 8px instead of 4px
+  // - spacing[2] = 16px instead of 8px
+  // Then set customSpacingUnit to 8
+  customSpacingUnit: 8,
+};

examples/custom-spacing/example.tsx

@@ -0,0 +1,27 @@
+// Before formatting with customSpacingUnit: 8
+export function Button() {
+  return (
+    <button className="px-[32px] py-[16px] m-[8px] gap-[24px]">
+      Click me
+    </button>
+  );
+}
+
+// After formatting with customSpacingUnit: 8
+// The arbitrary values are normalized based on the 8px scale
+export function ButtonFormatted() {
+  return <button className="px-4 py-2 m-1 gap-3">Click me</button>;
+}
+
+// Explanation:
+// With customSpacingUnit: 8
+// - px-[32px] → px-4  (32px / 8px = 4)
+// - py-[16px] → py-2  (16px / 8px = 2)
+// - m-[8px]   → m-1   (8px / 8px = 1)
+// - gap-[24px] → gap-3 (24px / 8px = 3)
+
+// Compare with default (customSpacingUnit: 4)
+// - px-[16px] → px-4  (16px / 4px = 4)
+// - py-[8px]  → py-2  (8px / 4px = 2)
+// - m-[4px]   → m-1   (4px / 4px = 1)
+// - gap-[12px] → gap-3 (12px / 4px = 3)

examples/custom-spacing/tailwind.config.js

@@ -0,0 +1,47 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
+  theme: {
+    extend: {
+      // Example: Custom spacing scale using 8px as the base unit
+      spacing: {
+        px: "1px",
+        0: "0px",
+        0.5: "4px", // 8px * 0.5
+        1: "8px", // 8px * 1
+        1.5: "12px", // 8px * 1.5
+        2: "16px", // 8px * 2
+        2.5: "20px", // 8px * 2.5
+        3: "24px", // 8px * 3
+        3.5: "28px", // 8px * 3.5
+        4: "32px", // 8px * 4
+        5: "40px", // 8px * 5
+        6: "48px", // 8px * 6
+        7: "56px", // 8px * 7
+        8: "64px", // 8px * 8
+        9: "72px", // 8px * 9
+        10: "80px", // 8px * 10
+        11: "88px", // 8px * 11
+        12: "96px", // 8px * 12
+        14: "112px", // 8px * 14
+        16: "128px", // 8px * 16
+        20: "160px", // 8px * 20
+        24: "192px", // 8px * 24
+        28: "224px", // 8px * 28
+        32: "256px", // 8px * 32
+        36: "288px", // 8px * 36
+        40: "320px", // 8px * 40
+        44: "352px", // 8px * 44
+        48: "384px", // 8px * 48
+        52: "416px", // 8px * 52
+        56: "448px", // 8px * 56
+        60: "480px", // 8px * 60
+        64: "512px", // 8px * 64
+        72: "576px", // 8px * 72
+        80: "640px", // 8px * 80
+        96: "768px", // 8px * 96
+      },
+    },
+  },
+  plugins: [],
+};

examples/package.json

@@ -11,7 +11,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@youthfulhps/prettier-plugin-tailwindcss-normalizer": "file:../youthfulhps-prettier-plugin-tailwindcss-normalizer-0.3.10-alpha.9.tgz",
+    "@youthfulhps/prettier-plugin-tailwindcss-normalizer": "file:../youthfulhps-prettier-plugin-tailwindcss-normalizer-0.3.10-alpha.11.tgz",
     "prettier-plugin-merge": "^0.8.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

examples/tsx/complex-test.tsx

@@ -14,21 +14,21 @@ function ComplexComponent() {
    */
 
   return (
-    <div className="min-h-screen p-1 -m-4 px-1">
+    <div className="-m-4 mx-4 min-h-screen rounded-lg p-1 px-1 px-[11px]">
       {/* Various patterns */}
       <div
         className={cx(
-          "px-4 py-2 rounded-md",
+          "rounded-md px-4 py-2",
           "focus:ring-2 focus:ring-blue-500"
         )}
       >
-        <span className={"bg-white p-3 m-2"}>String inside braces</span>
+        <span className={"m-2 bg-white p-3"}>String inside braces</span>
       </div>
 
       {/* Template literal */}
       <div
-        className={`w-[200px] h-[100px] border border-gray-300${
-          true ? "p-5" : "p-[10px] px-5"
+        className={`h-[100px] w-[200px] border border-gray-300${
+          true ? "p-5" : "p-10 px-5"
         }`}
       >
         Template literal test
@@ -41,13 +41,13 @@ function ComplexComponent() {
       </p>
 
       {/* Error message output */}
-      <div className="bg-red-100 border-l-4 border-red-500 p-4">
+      <div className="border-l-4 border-red-500 bg-red-100 p-4">
         {errorMessage}
       </div>
 
       <div
         className={
-          true ? "p-4" : "p-[10px]" // Now it transforms!
+          true ? "p-4" : "p-10" // Now it transforms!
         }
       >
         <h1 className="text-xl font-bold">Ternary operator issue solved!</h1>