diff --git a/COLOR_PALETTES.md b/COLOR_PALETTES.md
new file mode 100644
index 0000000..5cc2c9f
--- /dev/null
+++ b/COLOR_PALETTES.md
@@ -0,0 +1,92 @@
+# Color Palette Examples for Vinkas CSS Utilities
+
+The Vinkas CSS utilities (from `src/vinkas-plugin.css`) rely on you defining color and spacing values as CSS custom properties in your main CSS file using the `@theme` directive.
+
+Below are example `@theme` blocks for the color palettes that were previously available as JavaScript exports. You can copy these into your own CSS file and customize them as needed.
+
+## Default Vinkas Palette
+
+This palette provides a standard set of primary and secondary colors.
+
+```css
+/* In your main CSS file (e.g., app.css) */
+@theme {
+  /* Default Primary Color */
+  --color-primary: #0e61ea; /* oklch(0.62 0.18 260.08) */
+  --color-primary-contrast: #eef8ff; /* oklch(0.96 0.03 258.08) */
+  --color-primary-50: #eef8ff;    /* oklch(0.96 0.03 258.08) */
+  --color-primary-100: #d8eeff;   /* oklch(0.92 0.05 257.15) */
+  --color-primary-200: #bae2ff;   /* oklch(0.88 0.08 256.02) */
+  --color-primary-300: #8ad2ff;   /* oklch(0.83 0.11 254.58) */
+  --color-primary-400: #54b8ff;   /* oklch(0.77 0.15 252.22) */
+  --color-primary-500: #2c96ff;   /* oklch(0.71 0.19 249.99) */
+  --color-primary-600: #1578fb;   /* oklch(0.66 0.21 255.76) */
+  --color-primary-700: #0e61ea;   /* oklch(0.62 0.18 260.08) */ /* Same as DEFAULT */
+  --color-primary-800: #124dbb;   /* oklch(0.52 0.13 265.54) */
+  --color-primary-900: #154593;   /* oklch(0.46 0.10 268.24) */
+  --color-primary-950: #122a59;   /* oklch(0.29 0.06 264.71) */
+
+  /* Default Secondary Color */
+  --color-secondary: #ea970e; /* oklch(0.71 0.16 66.51) */
+  --color-secondary-contrast: #441a04; /* oklch(0.26 0.07 50.18) */
+  --color-secondary-50: #fffbeb;    /* oklch(0.99 0.02 86.59) */
+  --color-secondary-100: #fdf2c8;   /* oklch(0.96 0.04 87.46) */
+  --color-secondary-200: #fbe48c;   /* oklch(0.91 0.08 88.21) */
+  --color-secondary-300: #f9d050;   /* oklch(0.85 0.12 86.73) */
+  --color-secondary-400: #f7bc28;   /* oklch(0.79 0.14 81.85) */
+  --color-secondary-500: #ea970e;   /* oklch(0.71 0.16 66.51) */ /* Same as DEFAULT */
+  --color-secondary-600: #d5760a;   /* oklch(0.63 0.14 58.72) */
+  --color-secondary-700: #b1520c;   /* oklch(0.53 0.12 51.08) */
+  --color-secondary-800: #904010;   /* oklch(0.44 0.09 47.31) */
+  --color-secondary-900: #763511;   /* oklch(0.38 0.08 46.19) */
+  --color-secondary-950: #441a04;   /* oklch(0.26 0.07 50.18) */ /* Same as DEFAULT contrast */
+
+  /* Add other theme values like spacing, breakpoints, etc. here */
+  /* For example: */
+  /* --spacing-1: 0.25rem; */
+  /* --breakpoint-sm: 640px; */
+}
+```
+
+## Singfuse Palette
+
+This palette offers an alternative primary and secondary color set.
+
+```css
+/* In your main CSS file (e.g., app.css) */
+@theme {
+  /* Singfuse Primary Color */
+  --color-primary: #ed2939; /* oklch(0.67 0.21 25.53) */ /* Alizarin Crimson */
+  --color-primary-contrast: #fff1f2; /* oklch(0.98 0.01 20.78) */
+  --color-primary-50: #fff1f2;    /* oklch(0.98 0.01 20.78) */
+  --color-primary-100: #ffe0e3;   /* oklch(0.93 0.04 20.98) */
+  --color-primary-200: #ffc6cb;   /* oklch(0.86 0.07 20.71) */
+  --color-primary-300: #ff9ea6;   /* oklch(0.78 0.12 20.73) */
+  --color-primary-400: #ff6672;   /* oklch(0.71 0.17 22.49) */
+  --color-primary-500: #fe3545;   /* oklch(0.68 0.20 25.02) */
+  --color-primary-600: #ed2939;   /* oklch(0.67 0.21 25.53) */ /* Same as DEFAULT */
+  --color-primary-700: #c60f1e;   /* oklch(0.56 0.18 26.82) */
+  --color-primary-800: #a4101c;   /* oklch(0.49 0.15 26.15) */
+  --color-primary-900: #87151e;   /* oklch(0.43 0.12 24.94) */
+  --color-primary-950: #4a050b;   /* oklch(0.27 0.07 20.81) */
+
+  /* Singfuse Secondary Color */
+  --color-secondary: #29eddd; /* oklch(0.87 0.14 195.21) */ /* Bright Turquoise */
+  --color-secondary-contrast: #003435; /* oklch(0.27 0.03 191.88) */
+  --color-secondary-50: #eefffc;    /* oklch(0.98 0.01 189.52) */
+  --color-secondary-100: #c5fff8;   /* oklch(0.96 0.04 191.58) */
+  --color-secondary-200: #8cfff1;   /* oklch(0.93 0.08 192.89) */
+  --color-secondary-300: #4afee9;   /* oklch(0.90 0.12 194.03) */
+  --color-secondary-400: #29eddd;   /* oklch(0.87 0.14 195.21) */ /* Same as DEFAULT */
+  --color-secondary-500: #00cfc1;   /* oklch(0.79 0.14 191.56) */
+  --color-secondary-600: #00a79f;   /* oklch(0.69 0.11 189.74) */
+  --color-secondary-700: #018480;   /* oklch(0.59 0.09 188.10) */
+  --color-secondary-800: #066966;   /* oklch(0.49 0.07 186.92) */
+  --color-secondary-900: #0b5654;   /* oklch(0.41 0.05 186.21) */
+  --color-secondary-950: #003435;   /* oklch(0.27 0.03 191.88) */ /* Same as DEFAULT contrast */
+}
+```
+I've added the OKLCH values as comments for better color representation, as hex can be limiting.
+The contrast logic from the original plugin (1000-X for shades) is implicitly handled by which CSS variable is paired with which in the utilities defined in `vinkas-plugin.css`. Users defining these themes would need to ensure the paired variables make sense for contrast. The example above uses the original pairings from the JS color objects.
+
+Now that the color information is preserved in `COLOR_PALETTES.md`, I can delete the original TypeScript color files.
diff --git a/lib/plugin.js b/lib/plugin.js
index d5556d8..71b4a42 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -7,7 +7,7 @@ export default tailwindPlugin(function ({ addUtilities, matchUtilities, theme })
         ...colorUtilities(theme('colors')),
     });
     matchUtilities({
-        row: (size) => {
+        'vinkas-row': (size) => {
             const spacing = theme('spacing');
             const value = Object.keys(spacing).find(key => spacing[key] === size);
             const intValue = parseInt(value);
diff --git a/package.json b/package.json
index e135518..b155e42 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,14 @@
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.26.0",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.13",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.1.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.2",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.13"
+    "typescript": "^5.8.2"
   }
 }
diff --git a/src/colors/default.ts b/src/colors/default.ts
deleted file mode 100644
index 11a63ec..0000000
--- a/src/colors/default.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export default {
-  primary: {
-    DEFAULT: '#0e61ea',  // blue-ribbon
-    'contrast': '#eef8ff',
-    50: '#eef8ff',
-    100: '#d8eeff',
-    200: '#bae2ff',
-    300: '#8ad2ff',
-    400: '#54b8ff',
-    500: '#2c96ff',
-    600: '#1578fb',
-    700: '#0e61ea',
-    800: '#124dbb',
-    900: '#154593',
-    950: '#122a59',
-  },
-  secondary: {
-    DEFAULT: '#ea970e',  // fire-bush
-    'contrast': '#441a04',
-    50: '#fffbeb',
-    100: '#fdf2c8',
-    200: '#fbe48c',
-    300: '#f9d050',
-    400: '#f7bc28',
-    500: '#ea970e',
-    600: '#d5760a',
-    700: '#b1520c',
-    800: '#904010',
-    900: '#763511',
-    950: '#441a04',
-  },
-};
diff --git a/src/colors/singfuse.ts b/src/colors/singfuse.ts
deleted file mode 100644
index 65804db..0000000
--- a/src/colors/singfuse.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export default {
-  primary: {
-    DEFAULT: '#ed2939',  // alizarin-crimson
-    'contrast': '#fff1f2',
-    50: '#fff1f2',
-    100: '#ffe0e3',
-    200: '#ffc6cb',
-    300: '#ff9ea6',
-    400: '#ff6672',
-    500: '#fe3545',
-    600: '#ed2939',
-    700: '#c60f1e',
-    800: '#a4101c',
-    900: '#87151e',
-    950: '#4a050b',
-  },
-  secondary: {
-    DEFAULT: '#29eddd',  // bright-turquoise
-    'contrast': '#003435',
-    50: '#eefffc',
-    100: '#c5fff8',
-    200: '#8cfff1',
-    300: '#4afee9',
-    400: '#29eddd',
-    500: '#00cfc1',
-    600: '#00a79f',
-    700: '#018480',
-    800: '#066966',
-    900: '#0b5654',
-    950: '#003435',
-  },
-};
diff --git a/src/config/container.ts b/src/config/container.ts
deleted file mode 100644
index 94fcf08..0000000
--- a/src/config/container.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  center: true,
-  padding: {
-    DEFAULT: '1rem',
-    sm: '2rem',
-    md: '3rem',
-    lg: '4rem',
-    xl: '5rem',
-    '2xl': '6rem',
-  },
-};
diff --git a/src/index.ts b/src/index.ts
index 01380ef..633fbec 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,9 @@
-import colors from './colors/default.js';
-import singfuseColors from './colors/singfuse.js';
-import containerConfig from './config/container.js';
-import plugin from './plugin.js';
+// This package is now CSS-based.
+// Utilities are provided in 'vinkas-plugin.css'.
+// Please refer to the documentation for how to integrate and theme the utilities.
 
-export {
-  plugin,
-  colors,
-  singfuseColors,
-  containerConfig,
-}
+// Color palettes (previously exported as JS objects) are now provided
+// as CSS custom property examples in the documentation (e.g., README.md or THEMING.md)
+// for users to include in their @theme block.
+
+export {}; // Ensures this file is treated as a module.
diff --git a/src/plugin.ts b/src/plugin.ts
deleted file mode 100644
index 3f21fcd..0000000
--- a/src/plugin.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import tailwindPlugin from 'tailwindcss/plugin.js';
-import colorUtilities from './utilities/colors.js';
-import buttons from './utilities/buttons.js';
-
-export default tailwindPlugin(
-  function ({ addUtilities, matchUtilities, theme }) {
-    addUtilities({
-      ...buttons,
-      ...colorUtilities(theme('colors')),
-    })
-    matchUtilities(
-      {
-        row: (size) => {
-          const spacing = theme('spacing') as Record<string, string>;
-          const value = Object.keys(spacing).find(key => spacing[key] === size) as string;
-          const intValue = parseInt(value);
-
-          let smValue;
-          if (value === 'px') {
-            smValue = '0.5';
-          } else if (intValue > 0) {
-            smValue = intValue * 2;
-          } else if (intValue === 0) {
-            smValue = 'px';
-          } else {
-            smValue = value;
-          }
-
-          return {
-            [`@apply py-${value} sm:py-${smValue}`]: {},
-          };
-        },
-      },
-      {
-        values: theme('spacing'),
-      }
-    )
-  }
-)
diff --git a/src/utilities/buttons.ts b/src/utilities/buttons.ts
deleted file mode 100644
index 0146d3e..0000000
--- a/src/utilities/buttons.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  '.btn': {
-    '@apply inline-flex items-center rounded py-2 px-4 text-sm font-medium leading-4 transition duration-150 ease-in-out': {},
-  },
-}
diff --git a/src/utilities/colors.ts b/src/utilities/colors.ts
deleted file mode 100644
index d938f8c..0000000
--- a/src/utilities/colors.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-interface Colors {
-  [colorName: string]: string | { [shadeName: string]: string };
-}
-
-export default function (colors: Colors) {
-  const utilities: { [key: string]: { [key: string]: any } } = {};
-  Object.keys(colors).forEach((colorName) => {
-    const color = colors[colorName];
-
-    if (typeof color === 'string') {
-      const bg = `bg-${colorName}`;
-      const text = `text-${colorName}-contrast`;
-
-      const apply = `@apply ${bg} ${text}`;
-
-      const rule: { [key: string]: any } = {};
-      rule[apply] = {};
-
-      utilities[`.color-${colorName}`] = rule;
-    } else {
-      return Object.keys(color).forEach((shadeName) => {
-        const shade = parseInt(shadeName);
-        let bg, text;
-
-        if (shade > 0) {
-          bg = `bg-${colorName}-${shade}`;
-          text = `text-${colorName}-${ 1000 - shade }`;
-        } else if (shadeName === 'DEFAULT') {
-          bg = `bg-${colorName}`;
-          text = `text-${colorName}-contrast`;
-        } else if (shadeName === 'contrast') {
-          bg = `bg-${colorName}-contrast`;
-          text = `text-${colorName}`;
-        } else {
-          bg = `bg-${colorName}-${shadeName}`;
-          text = `text-${colorName}-${shadeName}-contrast`;
-        }
-
-        const apply = `@apply ${bg} ${text}`;
-        let className = `.color-${colorName}`;
-
-        if (shadeName !== 'DEFAULT') {
-          className += `-${shadeName}`;
-        }
-
-        const rule: { [key: string]: any } = {};
-        rule[apply] = {};
-
-        utilities[className] = rule;
-      });
-    }
-  });
-
-  return utilities;
-}
diff --git a/src/vinkas-plugin.css b/src/vinkas-plugin.css
new file mode 100644
index 0000000..a0e6381
--- /dev/null
+++ b/src/vinkas-plugin.css
@@ -0,0 +1,309 @@
+/* Tailwind CSS v4 Plugin for Vinkas Utilities */
+
+/*
+  This file replaces the JavaScript-based plugin (src/plugin.ts)
+  for compatibility with Tailwind CSS v4.
+
+  It uses @theme, @utility, and other CSS-based Tailwind directives.
+*/
+
+/* Theme Definition (Placeholder) */
+/*
+  Users of this plugin will need to define their actual color, spacing,
+  and other theme values using @theme in their main CSS file.
+  For the purpose of this plugin, we'll assume standard Tailwind CSS
+  variable names (e.g., --color-primary, --color-primary-50,
+  --color-primary-contrast, --spacing-0, --spacing-px, --spacing-0-5,
+  --spacing-1, --rounded-md, --font-size-sm, --leading-4,
+  --font-weight-medium, --breakpoint-sm, etc.) are available.
+
+  For Container Paddings (if using the .container utility from this plugin):
+  @theme {
+    --container-padding-default: 1rem;
+    --container-padding-sm: 2rem;
+    --container-padding-md: 3rem;
+    --container-padding-lg: 4rem;
+    --container-padding-xl: 5rem;
+    --container-padding-2xl: 6rem;
+
+    /* Define breakpoints if not using Tailwind defaults, e.g.: */
+    /* --breakpoint-sm: 640px; */
+    /* --breakpoint-md: 768px; */
+    /* ...etc. */
+  }
+
+  CSS variable names for fractional spacing like '0.5' are assumed as '--spacing-0-5'.
+*/
+
+@utility .btn {
+  display: inline-flex;
+  align-items: center;
+  /* Assuming --rounded-md would be defined by the user, e.g. 0.375rem */
+  border-radius: var(--rounded-md, 0.375rem);
+  /* Assuming --spacing-2 (0.5rem) and --spacing-4 (1rem) are available */
+  padding-top: var(--spacing-2, 0.5rem);
+  padding-bottom: var(--spacing-2, 0.5rem);
+  padding-left: var(--spacing-4, 1rem);
+  padding-right: var(--spacing-4, 1rem);
+  /* Assuming --font-size-sm (0.875rem) and --leading-4 (1rem) are available */
+  font-size: var(--font-size-sm, 0.875rem);
+  line-height: var(--leading-4, 1rem);
+  /* Assuming --font-weight-medium (500) is available */
+  font-weight: var(--font-weight-medium, 500);
+  /* Replicating default transition. Users might define --transition-property-default, etc. */
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--duration-150, 150ms);
+}
+
+/* Color Utilities */
+/*
+  Assumes user has defined CSS variables for colors and their shades/contrasts.
+  The text color is determined by the 1000-X logic from the original plugin.
+  Example for primary theme:
+  @theme {
+    --color-primary: oklch(0.62 0.18 260.08);
+    --color-primary-contrast: oklch(0.96 0.03 258.08);
+    --color-primary-50: oklch(0.96 0.03 258.08);
+    --color-primary-100: oklch(0.92 0.05 257.15);
+    /* ... all shades ... */
+    --color-primary-950: oklch(0.29 0.06 264.71);
+    /* Similar for --color-secondary, etc. */
+  }
+*/
+
+/* Primary Color */
+@utility .color-primary {
+  background-color: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+@utility .color-primary-50 {
+  background-color: var(--color-primary-50);
+  color: var(--color-primary-950);
+}
+@utility .color-primary-100 {
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-900);
+}
+@utility .color-primary-200 {
+  background-color: var(--color-primary-200);
+  color: var(--color-primary-800);
+}
+@utility .color-primary-300 {
+  background-color: var(--color-primary-300);
+  color: var(--color-primary-700);
+}
+@utility .color-primary-400 {
+  background-color: var(--color-primary-400);
+  color: var(--color-primary-600);
+}
+@utility .color-primary-500 {
+  background-color: var(--color-primary-500);
+  color: var(--color-primary-500-contrast, var(--color-primary-500));
+}
+@utility .color-primary-600 {
+  background-color: var(--color-primary-600);
+  color: var(--color-primary-400);
+}
+@utility .color-primary-700 {
+  background-color: var(--color-primary-700);
+  color: var(--color-primary-300);
+}
+@utility .color-primary-800 {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-200);
+}
+@utility .color-primary-900 {
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-100);
+}
+@utility .color-primary-950 {
+  background-color: var(--color-primary-950);
+  color: var(--color-primary-50);
+}
+@utility .color-primary-contrast {
+  background-color: var(--color-primary-contrast);
+  color: var(--color-primary);
+}
+
+/* Secondary Color */
+@utility .color-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-secondary-contrast);
+}
+@utility .color-secondary-50 {
+  background-color: var(--color-secondary-50);
+  color: var(--color-secondary-950);
+}
+@utility .color-secondary-100 {
+  background-color: var(--color-secondary-100);
+  color: var(--color-secondary-900);
+}
+@utility .color-secondary-200 {
+  background-color: var(--color-secondary-200);
+  color: var(--color-secondary-800);
+}
+@utility .color-secondary-300 {
+  background-color: var(--color-secondary-300);
+  color: var(--color-secondary-700);
+}
+@utility .color-secondary-400 {
+  background-color: var(--color-secondary-400);
+  color: var(--color-secondary-600);
+}
+@utility .color-secondary-500 {
+  background-color: var(--color-secondary-500);
+  color: var(--color-secondary-500-contrast, var(--color-secondary-500));
+}
+@utility .color-secondary-600 {
+  background-color: var(--color-secondary-600);
+  color: var(--color-secondary-400);
+}
+@utility .color-secondary-700 {
+  background-color: var(--color-secondary-700);
+  color: var(--color-secondary-300);
+}
+@utility .color-secondary-800 {
+  background-color: var(--color-secondary-800);
+  color: var(--color-secondary-200);
+}
+@utility .color-secondary-900 {
+  background-color: var(--color-secondary-900);
+  color: var(--color-secondary-100);
+}
+@utility .color-secondary-950 {
+  background-color: var(--color-secondary-950);
+  color: var(--color-secondary-50);
+}
+@utility .color-secondary-contrast {
+  background-color: var(--color-secondary-contrast);
+  color: var(--color-secondary);
+}
+
+/* Row Utilities (Responsive Padding Y) */
+/*
+  Assumes spacing variables (e.g., --spacing-0, --spacing-px, --spacing-0-5, --spacing-1)
+  and --breakpoint-sm are defined in the user's @theme.
+  Example:
+  @theme {
+    --spacing-0: 0px;
+    --spacing-px: 1px;
+    --spacing-0-5: 0.125rem; // For 0.5
+    --spacing-1: 0.25rem;
+    /* ... other spacing values */
+    --breakpoint-sm: 640px; // Or your desired sm breakpoint
+  }
+*/
+@utility .row-0 {
+  padding-top: var(--spacing-0);
+  padding-bottom: var(--spacing-0);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-px);
+    padding-bottom: var(--spacing-px);
+  }
+}
+@utility .row-px {
+  padding-top: var(--spacing-px);
+  padding-bottom: var(--spacing-px);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-0-5);
+    padding-bottom: var(--spacing-0-5);
+  }
+}
+@utility .row-0-5 {
+  padding-top: var(--spacing-0-5);
+  padding-bottom: var(--spacing-0-5);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-0-5);
+    padding-bottom: var(--spacing-0-5);
+  }
+}
+@utility .row-1 {
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+  }
+}
+@utility .row-1-5 {
+  padding-top: var(--spacing-1-5);
+  padding-bottom: var(--spacing-1-5);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-3);
+    padding-bottom: var(--spacing-3);
+  }
+}
+@utility .row-2 {
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-4);
+    padding-bottom: var(--spacing-4);
+  }
+}
+@utility .row-2-5 {
+  padding-top: var(--spacing-2-5);
+  padding-bottom: var(--spacing-2-5);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-5);
+    padding-bottom: var(--spacing-5);
+  }
+}
+@utility .row-3 {
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-6);
+    padding-bottom: var(--spacing-6);
+  }
+}
+@utility .row-3-5 {
+  padding-top: var(--spacing-3-5);
+  padding-bottom: var(--spacing-3-5);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-7);
+    padding-bottom: var(--spacing-7);
+  }
+}
+@utility .row-4 {
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-4);
+  @media (min-width: var(--breakpoint-sm, 640px)) {
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-8);
+  }
+}
+
+/* Default Vinkas Container Styles */
+/*
+  This overrides Tailwind's default .container to add centering and responsive padding.
+  Users can define --container-padding-[breakpoint] and --breakpoint-[size]
+  in their @theme to customize.
+*/
+@utility .container {
+  width: 100%; /* Standard container property */
+  /* Tailwind's core .container will still handle responsive max-width based on --breakpoint-* variables */
+  margin-inline: auto; /* center: true */
+
+  /* Default padding */
+  padding-inline: var(--container-padding-default, 1rem);
+
+  /* Responsive padding */
+  @media (min-width: var(--breakpoint-sm, 640px)) { /* Fallback breakpoint values if not in user's theme */
+    padding-inline: var(--container-padding-sm, 2rem);
+  }
+  @media (min-width: var(--breakpoint-md, 768px)) {
+    padding-inline: var(--container-padding-md, 3rem);
+  }
+  @media (min-width: var(--breakpoint-lg, 1024px)) {
+    padding-inline: var(--container-padding-lg, 4rem);
+  }
+  @media (min-width: var(--breakpoint-xl, 1280px)) {
+    padding-inline: var(--container-padding-xl, 5rem);
+  }
+  @media (min-width: var(--breakpoint-2xl, 1536px)) {
+    padding-inline: var(--container-padding-2xl, 6rem);
+  }
+}
+/* End of Vinkas Plugin Utilities */
diff --git a/tests/test.ts b/tests/test.ts
index c389b0a..8e57608 100644
--- a/tests/test.ts
+++ b/tests/test.ts
@@ -18,61 +18,61 @@ const config = {
 };
 
 let rowExpected = `
-.row-0 {
+.vinkas-row-0 {
     padding-top: 0px;
     padding-bottom: 0px
 }
 @media (min-width: 640px) {
-    .row-0 {
+    .vinkas-row-0 {
         padding-top: 1px;
         padding-bottom: 1px
     }
 }
-.row-0\\.5 {
+.vinkas-row-0\\.5 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem
 }
 @media (min-width: 640px) {
-    .row-0\\.5 {
+    .vinkas-row-0\\.5 {
         padding-top: 1px;
         padding-bottom: 1px
     }
 }
-.row-1 {
+.vinkas-row-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem
 }
 @media (min-width: 640px) {
-    .row-1 {
+    .vinkas-row-1 {
         padding-top: 0.5rem;
         padding-bottom: 0.5rem
     }
 }
-.row-2 {
+.vinkas-row-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem
 }
 @media (min-width: 640px) {
-    .row-2 {
+    .vinkas-row-2 {
         padding-top: 1rem;
         padding-bottom: 1rem
     }
 }
-.row-px {
+.vinkas-row-px {
     padding-top: 1px;
     padding-bottom: 1px
 }
 @media (min-width: 640px) {
-    .row-px {
+    .vinkas-row-px {
         padding-top: 0.125rem;
         padding-bottom: 0.125rem
     }
 }
 `
 
-it('row', () => {
-  config.content[0].raw = "row-0 row-px row-0.5 row-1 row-2"
-  let utilitiesCSS = postcss([require("tailwindcss")(config)]).process(
+it('vinkas-row', () => {
+  config.content[0].raw = "vinkas-row-0 vinkas-row-px vinkas-row-0.5 vinkas-row-1 vinkas-row-2"
+  let utilitiesCSS = postcss([require("@tailwindcss/postcss")(config)]).process(
     "@tailwind utilities",
     { from: undefined }
   ).then(({ css }) => {
@@ -80,7 +80,7 @@ it('row', () => {
   })
 })
 
-it ('vinkas colors', () => {
+it('vinkas colors', () => {
   expect(vinkascss.colors).toBe(colors)
 })
 
@@ -108,7 +108,7 @@ let buttonsExpected = `
 
 it ('buttons', () => {
   config.content[0].raw = "btn"
-  let utilitiesCSS = postcss([require("tailwindcss")(config)]).process(
+  let utilitiesCSS = postcss([require("@tailwindcss/postcss")(config)]).process(
     "@tailwind utilities",
     { from: undefined }
   ).then(({ css }) => {
@@ -127,7 +127,7 @@ let colorsExpected = `
 
 it ('colors', () => {
   config.content[0].raw = "color-primary"
-  let utilitiesCSS = postcss([require("tailwindcss")(config)]).process(
+  let utilitiesCSS = postcss([require("@tailwindcss/postcss")(config)]).process(
     "@tailwind utilities",
     { from: undefined }
   ).then(({ css }) => {
@@ -146,7 +146,7 @@ let colorsWithShadeExpected = `
 
 it ('colors with shade', () => {
   config.content[0].raw = "color-secondary-300"
-  let utilitiesCSS = postcss([require("tailwindcss")(config)]).process(
+  let utilitiesCSS = postcss([require("@tailwindcss/postcss")(config)]).process(
     "@tailwind utilities",
     { from: undefined }
   ).then(({ css }) => {