@adyen/eslint-plugin-bento 2.7.6 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.8.0 (2026-04-15)
+
+### Features
+
+- added `tailwind-v3-to-bento` ESlint rule to help with the migration to Bento's Tailwind plugin ([d941b691a](https://github.com/Adyen/bento/commit/d941b691a))
+
+### ❤️ Thank You
+
+- daver
+
+
+## 2.7.7 (2026-04-08)
+
+This was a version bump only for eslint to align it with other projects, there were no code changes.
+
+
 ## 2.7.6 (2026-04-01)
 
 This was a version bump only for eslint to align it with other projects, there were no code changes.

package/README.md

@@ -51,6 +51,22 @@ module.exports = defineConfig([
 ]);
 ```
 
+### Flat config tailwind
+
+For projects migrating from Tailwind CSS v3 to Bento design tokens:
+
+```javascript
+const { defineConfig } = require('eslint/config');
+const bento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        // Other configs
+    },
+    ...bento.configs['tailwind'],
+]);
+```
+
 ### Custom
 
 Without the recommended configs:
@@ -70,8 +86,9 @@ module.exports = defineConfig([
         },
         rules: {
             '@adyen/bento/vue-old-spacer-tokens': 'warn',
-            '@adyen/bento/deprecation-currency-default-slot': 'warn'
-            '@adyen/bento/deprecation-tag-default-slot': 'warn'
+            '@adyen/bento/deprecation-currency-default-slot': 'warn',
+            '@adyen/bento/deprecation-tag-default-slot': 'warn',
+            '@adyen/bento/tailwind-v3-to-bento': 'warn',
         },
         files: ['**/*.vue'],
     },
@@ -84,28 +101,44 @@ module.exports = defineConfig([
 
 Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
 
-### Recommended
+### `@adyen/bento/deprecation-currency-default-slot`
 
-The recommended configuration contains pre-configured rules and their severity
+Disallow the use of the `default` slot in `bento-currency` instances.
 
-- `@adyen/bento/vue-old-spacer-tokens`: `warn`
+### `@adyen/bento/deprecation-tag-default-slot`
 
-### `@adyen/bento/deprecation-currency-default-slot`
+Disallow the use of the `default` slot in `bento-tag` instances.
 
-Disallow the use of the `default` slot in `bento-currency` instances
+### `@adyen/bento/tailwind-v3-to-bento`
 
-### Recommended
+Replace Tailwind CSS v3 utility classes with Bento design token equivalents. Covers spacing, border radius, border
+width, box shadows, breakpoints, and colors (auto-fixable via `eslint --fix`). Typography classes are flagged with a
+warning — use the `bento-typography` component instead.
 
-The recommended configuration contains pre-configured rules and their severity
+## Configurations
 
-- `@adyen/bento/deprecation-currency-default-slot`: `warn`
+### Recommended (`vue-recommended`)
 
-### `@adyen/bento/deprecation-tag-default-slot`
+| Rule                                             | Severity |
+| ------------------------------------------------ | -------- |
+| `@adyen/bento/deprecation-components-input-emit` | `warn`   |
+| `@adyen/bento/deprecation-components-value-prop` | `warn`   |
+| `@adyen/bento/deprecation-currency-default-slot` | `warn`   |
+| `@adyen/bento/deprecation-tag-default-slot`      | `warn`   |
+| `@adyen/bento/vue-old-spacer-tokens`             | `warn`   |
 
-Disallow the use of the `default` slot in `bento-tag` instances
+### Strict (`vue-strict`)
 
-### Recommended
+| Rule                                             | Severity |
+| ------------------------------------------------ | -------- |
+| `@adyen/bento/deprecation-components-input-emit` | `error`  |
+| `@adyen/bento/deprecation-components-value-prop` | `error`  |
+| `@adyen/bento/deprecation-currency-default-slot` | `error`  |
+| `@adyen/bento/deprecation-tag-default-slot`      | `error`  |
+| `@adyen/bento/vue-old-spacer-tokens`             | `error`  |
 
-The recommended configuration contains pre-configured rules and their severity
+### Tailwind (`tailwind`)
 
-- `@adyen/bento/deprecation-tag-default-slot`: `warn`
+| Rule                                | Severity |
+| ----------------------------------- | -------- |
+| `@adyen/bento/tailwind-v3-to-bento` | `warn`   |

package/configs/tailwind.js

@@ -0,0 +1,17 @@
+module.exports = [
+    {
+        name: '@bento/adyen/tailwind',
+        files: ['*.vue', '**/*.vue'],
+        languageOptions: {
+            parser: require('vue-eslint-parser'),
+        },
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/tailwind-v3-to-bento': 'warn',
+        },
+    },
+];

package/index.js

@@ -9,6 +9,7 @@ const plugin = {
     configs: {
         'vue-recommended': require('./configs/vue-recommended'),
         'vue-strict': require('./configs/vue-strict'),
+        tailwind: require('./configs/tailwind'),
     },
     rules: {
         'deprecation-components-input-emit': require('./rules/deprecation-components-input-emit/deprecation-components-input-emit'),
@@ -16,6 +17,7 @@ const plugin = {
         'deprecation-currency-default-slot': require('./rules/deprecation-currency-default-slot/deprecation-currency-default-slot'),
         'deprecation-tag-default-slot': require('./rules/deprecation-tag-default-slot/deprecation-tag-default-slot'),
         'vue-old-spacer-tokens': require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens'),
+        'tailwind-v3-to-bento': require('./rules/tailwind-v3-to-bento/tailwind-v3-to-bento'),
     },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [

package/rules/tailwind-v3-to-bento/README.md

@@ -0,0 +1,114 @@
+# @adyen/bento/tailwind-v3-to-bento
+
+> Replace Tailwind CSS v3 utility classes with Bento design token equivalents.
+
+- This rule is included in the `plugin:@adyen/bento/recommended` configuration
+- The `--fix` option can automatically fix most problems reported by this rule
+
+This rule helps developers migrate from Tailwind CSS v3 default utility classes to Bento design token equivalents. It
+covers spacing, border radius, border width, box shadows, breakpoints, and colors. Typography classes are flagged but
+not auto-fixed — use the `bento-typography` component instead.
+
+## Auto-fixable mappings
+
+### Spacing
+
+| Before (Tailwind 3) | After (Bento) | Value |
+|---|---|---|
+| `p-0` | `p-000` | 0px |
+| `p-0.5` | `p-010` | 2px |
+| `p-1` | `p-020` | 4px |
+| `p-1.5` | `p-030` | 6px |
+| `p-2` | `p-040` | 8px |
+| `p-2.5` | `p-050` | 10px |
+| `p-3` | `p-060` | 12px |
+| `p-4` | `p-070` | 16px |
+| `p-5` | `p-080` | 20px |
+| `p-6` | `p-090` | 24px |
+| `p-8` | `p-100` | 32px |
+| `p-10` | `p-110` | 40px |
+| `p-12` | `p-120` | 48px |
+| `p-14` | `p-130` | 56px |
+| `p-16` | `p-140` | 64px |
+
+The same mapping applies to all spacing utilities (`m-*`, `mx-*`, `my-*`, `gap-*`, `space-x-*`, `space-y-*`, `w-*`,
+`h-*`, `inset-*`, `top-*`, `right-*`, `bottom-*`, `left-*`, etc.).
+
+### Border radius
+
+| Before | After | Value |
+|---|---|---|
+| `rounded` | `rounded-s` | 4px |
+| `rounded-sm` | `rounded-xs` | 2px |
+| `rounded-md` | `rounded-m` | 8px |
+| `rounded-lg` | `rounded-l` | 12px |
+| `rounded-xl` | `rounded-xl` | 24px |
+
+### Border width
+
+| Before | After | Value |
+|---|---|---|
+| `border` | `border-s` | 1px |
+| `border-2` | `border-m` | 2px |
+| `border-4` | `border-l` | 3px |
+
+### Box shadows
+
+| Before | After |
+|---|---|
+| `shadow` | `shadow-medium` |
+| `shadow-sm` | `shadow-low` |
+| `shadow-md` | `shadow-medium` |
+| `shadow-lg` | `shadow-high` |
+| `shadow-xl` | `shadow-high` |
+| `shadow-2xl` | `shadow-high` |
+
+### Breakpoints
+
+| Before | After | Value |
+|---|---|---|
+| `sm:` | `s-min:` | min-width: 376px |
+| `md:` | `m-min:` | min-width: 500px |
+| `lg:` | `l-min:` | min-width: 768px |
+| `xl:` | `xl-min:` | min-width: 1280px |
+| `2xl:` | `xxl:` | min-width: 1536px |
+
+### Colors (best-effort)
+
+Color mappings are best-effort since Tailwind 3 uses raw color values while Bento uses semantic tokens. Examples:
+
+| Before | After |
+|---|---|
+| `text-red-500` | `text-label-critical` |
+| `text-green-500` | `text-label-success` |
+| `text-blue-500` | `text-label-highlight` |
+| `text-gray-500` | `text-label-secondary` |
+| `bg-gray-100` | `bg-secondary` |
+| `bg-red-100` | `bg-critical-weak` |
+| `border-gray-300` | `border-outline-primary` |
+
+## Warn only (no auto-fix)
+
+### Typography
+
+Typography classes are flagged with a warning but not auto-fixed. Use the `bento-typography` component instead.
+
+Detected patterns: `text-sm`, `text-lg`, `font-bold`, `font-sans`, `leading-tight`, `tracking-wide`, etc.
+
+## ✗ BAD
+
+```html
+<template>
+    <div class="p-4 m-2 rounded-md shadow-lg sm:p-8 text-red-500">Content</div>
+    <p class="text-sm font-bold leading-tight">Hello</p>
+</template>
+```
+
+## ✓ GOOD
+
+```html
+<template>
+    <div class="p-070 m-040 rounded-m shadow-high s-min:p-100 text-label-critical">Content</div>
+    <bento-typography variant="body" stronger>Hello</bento-typography>
+</template>
+```

package/rules/tailwind-v3-to-bento/__tests__/eslint.config.js

@@ -0,0 +1,24 @@
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            '@adyen/bento/tailwind-v3-to-bento': 'warn',
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/tailwind-v3-to-bento/__tests__/tailwind-v3-to-bento.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <div class="p-4 m-2 gap-8"></div>
+        <div class="rounded rounded-md rounded-lg"></div>
+        <div class="border border-2 border-4"></div>
+        <div class="shadow shadow-sm shadow-lg"></div>
+        <div class="sm:p-4 lg:p-8 2xl:m-2"></div>
+        <div class="text-red-500 bg-gray-100 border-gray-300"></div>
+        <div class="text-sm font-bold leading-tight tracking-wide"></div>
+        <div class="p-4 rounded-md shadow-lg sm:p-8 text-red-500"></div>
+        <div class="flex items-center justify-between"></div>
+    </div>
+</template>
+
+<script setup></script>

package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.integration.test.ts

@@ -0,0 +1,29 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/tailwind-v3-to-bento', () => {
+    it('should lint with warning', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(__dirname, '__tests__', 'tailwind-v3-to-bento.vue');
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // 7 fixable warnings + 4 typography warnings = 8 total messages (typography classes are per-class)
+        expect(result[0].warningCount).toBeGreaterThan(0);
+
+        // Verify spacing replacement
+        const spacingMessage = result[0].messages.find(
+            (m: { ruleId: string; line: number }) => m.ruleId === '@adyen/bento/tailwind-v3-to-bento' && m.line === 3
+        );
+        expect(spacingMessage).toBeDefined();
+        expect(spacingMessage.messageId).toBe('updateTailwindClass');
+
+        // Verify typography warning includes suggested bento-typography usage
+        const typographyMessage = result[0].messages.find(
+            (m: { messageId: string }) => m.messageId === 'removeTailwindTypography'
+        );
+        expect(typographyMessage).toBeDefined();
+        expect(typographyMessage.message).toContain('<bento-typography');
+        expect(typographyMessage.message).toContain('variant=');
+    });
+});

package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.js

@@ -0,0 +1,377 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('estree').Node} Node
+ */
+/**
+ * @typedef {import('vue-eslint-parser').AST.VLiteral} VLiteral
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+// Spacing: Tailwind 3 -> Bento spacer tokens
+const SPACING_MAP = {
+    '0': '000',
+    '0.5': '010',
+    '1': '020',
+    '1.5': '030',
+    '2': '040',
+    '2.5': '050',
+    '3': '060',
+    '4': '070',
+    '5': '080',
+    '6': '090',
+    '8': '100',
+    '10': '110',
+    '12': '120',
+    '14': '130',
+    '16': '140',
+};
+
+// Border radius: Tailwind 3 -> Bento border radius tokens
+const BORDER_RADIUS_MAP = {
+    'rounded-sm': 'rounded-xs',
+    'rounded-md': 'rounded-m',
+    'rounded-lg': 'rounded-l',
+    'rounded-xl': 'rounded-xl',
+};
+
+// Border width: Tailwind 3 -> Bento border width tokens
+const BORDER_WIDTH_MAP = {
+    'border-0': 'border-0',
+    'border-2': 'border-m',
+    'border-4': 'border-l',
+};
+
+// Box shadow: Tailwind 3 -> Bento shadow tokens
+const SHADOW_MAP = {
+    'shadow-sm': 'shadow-low',
+    'shadow-md': 'shadow-medium',
+    'shadow-lg': 'shadow-high',
+    'shadow-xl': 'shadow-high',
+    'shadow-2xl': 'shadow-high',
+};
+
+// Breakpoint prefixes: Tailwind 3 -> Bento breakpoint prefixes
+const BREAKPOINT_MAP = {
+    'sm:': 's-min:',
+    'md:': 'm-min:',
+    'lg:': 'l-min:',
+    'xl:': 'xl-min:',
+    '2xl:': 'xxl:',
+};
+
+// Color utilities: Tailwind 3 -> Bento color tokens (best-effort mapping)
+const COLOR_MAP = {
+    'red-500': 'label-critical',
+    'red-600': 'label-critical',
+    'red-700': 'label-critical-hover',
+    'red-100': 'critical-weak',
+    'green-500': 'label-success',
+    'green-600': 'label-success',
+    'green-100': 'success-weak',
+    'blue-500': 'label-highlight',
+    'blue-600': 'label-highlight',
+    'blue-100': 'highlight-weak',
+    'yellow-500': 'label-warning',
+    'yellow-600': 'label-warning',
+    'yellow-100': 'warning-weak',
+    'gray-50': 'secondary',
+    'gray-100': 'secondary',
+    'gray-200': 'tertiary',
+    'gray-300': 'outline-primary',
+    'gray-400': 'outline-secondary',
+    'gray-500': 'label-secondary',
+    'gray-600': 'label-secondary',
+    'gray-700': 'label-primary',
+    'gray-800': 'label-primary',
+    'gray-900': 'label-primary',
+    white: 'primary',
+    black: 'label-primary',
+};
+
+// Color prefix utilities that use the COLOR_MAP
+const COLOR_PREFIXES = ['text-', 'bg-', 'border-'];
+
+// Spacing prefix patterns (padding, margin, gap, space, inset, etc.)
+const SPACING_PREFIXES = [
+    'p',
+    'px',
+    'py',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'ps',
+    'pe',
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'ms',
+    'me',
+    'gap',
+    'gap-x',
+    'gap-y',
+    'space-x',
+    'space-y',
+    'inset',
+    'inset-x',
+    'inset-y',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'start',
+    'end',
+    'w',
+    'min-w',
+    'max-w',
+    'h',
+    'min-h',
+    'max-h',
+    'size',
+    'basis',
+];
+
+// Typography utilities that should be flagged (no auto-fix, use bento-typography)
+const TYPOGRAPHY_PATTERNS = [
+    /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+    /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+    /^font-(sans|serif|mono)$/,
+    /^leading-(none|tight|snug|normal|relaxed|loose|\d+)$/,
+    /^tracking-(tighter|tight|normal|wide|wider|widest)$/,
+];
+
+// Font size -> suggested bento-typography variant
+const FONT_SIZE_SUGGESTION = {
+    'text-xs': 'caption',
+    'text-sm': 'caption',
+    'text-base': 'body',
+    'text-lg': 'title',
+    'text-xl': 'title" medium',
+    'text-2xl': 'title" large',
+    'text-3xl': 'title" large',
+    'text-4xl': 'title" large',
+    'text-5xl': 'title" large',
+    'text-6xl': 'title" large',
+    'text-7xl': 'title" large',
+    'text-8xl': 'title" large',
+    'text-9xl': 'title" large',
+};
+
+// Font weight -> suggested bento-typography modifier prop
+const FONT_WEIGHT_SUGGESTION = {
+    'font-medium': 'stronger',
+    'font-semibold': 'stronger',
+    'font-bold': 'strongest',
+    'font-extrabold': 'strongest',
+    'font-black': 'strongest',
+};
+
+/**
+ * Build a suggested bento-typography usage from detected typography classes.
+ * @param {string[]} typographyClasses
+ * @returns {string}
+ */
+function buildTypographySuggestion(typographyClasses) {
+    let variant = 'body';
+    const props = [];
+
+    for (const cls of typographyClasses) {
+        if (FONT_SIZE_SUGGESTION[cls]) {
+            const suggestion = FONT_SIZE_SUGGESTION[cls];
+            if (suggestion.includes('" ')) {
+                const [v, prop] = suggestion.split('" ');
+                variant = v;
+                props.push(prop);
+            } else {
+                variant = suggestion;
+            }
+        }
+        if (FONT_WEIGHT_SUGGESTION[cls]) {
+            props.push(FONT_WEIGHT_SUGGESTION[cls]);
+        }
+    }
+
+    const propsStr = props.length > 0 ? ' ' + props.join(' ') : '';
+    return `<bento-typography variant="${variant}"${propsStr}>`;
+}
+
+/**
+ * Try to replace a single CSS class with its Bento equivalent.
+ * @param {string} cssClass
+ * @returns {{ replaced: string, wasReplaced: boolean, isTypography: boolean }}
+ */
+function replaceClass(cssClass) {
+    let workingClass = cssClass;
+    let breakpointPrefix = '';
+    let hasVariantReplacement = false;
+
+    // Extract all variants (e.g., md:hover:p-4 -> variants=['m-min:', 'hover:'], workingClass='p-4')
+    while (workingClass.includes(':')) {
+        const colonIndex = workingClass.indexOf(':') + 1;
+        const variant = workingClass.slice(0, colonIndex);
+        const mapped = BREAKPOINT_MAP[variant];
+        if (mapped) {
+            hasVariantReplacement = true;
+            breakpointPrefix += mapped;
+        } else {
+            breakpointPrefix += variant;
+        }
+        workingClass = workingClass.slice(colonIndex);
+    }
+
+    // Check typography (warn only)
+    for (const pattern of TYPOGRAPHY_PATTERNS) {
+        if (pattern.test(workingClass)) {
+            return { replaced: cssClass, wasReplaced: false, isTypography: true };
+        }
+    }
+
+    // Check border radius: bare "rounded" (without further suffix) maps to "rounded-s"
+    if (workingClass === 'rounded') {
+        return { replaced: breakpointPrefix + 'rounded-s', wasReplaced: true, isTypography: false };
+    }
+    if (BORDER_RADIUS_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + BORDER_RADIUS_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check border width: bare "border" (without color suffix) maps to "border-s"
+    if (workingClass === 'border') {
+        return { replaced: breakpointPrefix + 'border-s', wasReplaced: true, isTypography: false };
+    }
+    if (BORDER_WIDTH_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + BORDER_WIDTH_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check box shadow: bare "shadow" maps to "shadow-medium"
+    if (workingClass === 'shadow') {
+        return { replaced: breakpointPrefix + 'shadow-medium', wasReplaced: true, isTypography: false };
+    }
+    if (SHADOW_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + SHADOW_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check color utilities
+    for (const prefix of COLOR_PREFIXES) {
+        if (workingClass.startsWith(prefix)) {
+            const colorPart = workingClass.slice(prefix.length);
+            if (COLOR_MAP[colorPart]) {
+                const bentoColor = COLOR_MAP[colorPart];
+                return { replaced: breakpointPrefix + prefix + bentoColor, wasReplaced: true, isTypography: false };
+            }
+        }
+    }
+
+    // Check spacing utilities (including negative values like -m-4)
+    for (const spacingPrefix of SPACING_PREFIXES) {
+        const isNegative = workingClass.startsWith('-');
+        const baseClass = isNegative ? workingClass.slice(1) : workingClass;
+        const prefixWithDash = spacingPrefix + '-';
+        if (baseClass.startsWith(prefixWithDash)) {
+            const value = baseClass.slice(prefixWithDash.length);
+            if (SPACING_MAP[value]) {
+                return {
+                    replaced: breakpointPrefix + (isNegative ? '-' : '') + prefixWithDash + SPACING_MAP[value],
+                    wasReplaced: true,
+                    isTypography: false,
+                };
+            }
+        }
+    }
+
+    // If a breakpoint variant was mapped but the base class wasn't, still report the replacement
+    if (hasVariantReplacement && workingClass) {
+        return { replaced: breakpointPrefix + workingClass, wasReplaced: true, isTypography: false };
+    }
+
+    return { replaced: cssClass, wasReplaced: false, isTypography: false };
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Replace Tailwind CSS v3 utility classes with Bento design token equivalents',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/tailwind-v3-to-bento/README.md',
+            recommended: true,
+        },
+        messages: {
+            updateTailwindClass:
+                'Found Tailwind v3 class "{{ oldClass }}" — replace with Bento equivalent "{{ newClass }}".',
+            removeTailwindTypography:
+                'Found Tailwind v3 typography class "{{ oldClass }}" — use {{ suggestion }} instead.',
+        },
+        fixable: 'code',
+        schema: [],
+    },
+    /** @param {RuleContext} context */
+    create(context) {
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            VLiteral: (/** @type {any} */ node) => {
+                if (node.parent && node.parent.key && node.parent.key.name !== 'class') {
+                    return;
+                }
+
+                if (typeof node.value !== 'string') {
+                    return;
+                }
+
+                const classList = /** @type {VLiteral['value']} */ node.value;
+                let hasReplacements = false;
+                let hasTypography = false;
+
+                const classes = classList.split(/\s+/).filter(Boolean);
+                const results = classes.map(cssClass => {
+                    const result = replaceClass(cssClass);
+                    if (result.wasReplaced) {
+                        hasReplacements = true;
+                    }
+                    if (result.isTypography) {
+                        hasTypography = true;
+                    }
+                    return result;
+                });
+
+                if (hasReplacements) {
+                    const fixed = results.map(r => r.replaced).join(' ');
+                    context.report({
+                        node,
+                        messageId: 'updateTailwindClass',
+                        data: {
+                            oldClass: classList,
+                            newClass: fixed,
+                        },
+                        fix(fixer) {
+                            const quote = context.sourceCode.getText(node)[0];
+                            return fixer.replaceText(node, `${quote}${fixed}${quote}`);
+                        },
+                    });
+                }
+
+                if (hasTypography) {
+                    const typographyClasses = results.filter(r => r.isTypography).map(r => r.replaced);
+                    const suggestion = buildTypographySuggestion(typographyClasses);
+                    context.report({
+                        node,
+                        messageId: 'removeTailwindTypography',
+                        data: {
+                            oldClass: typographyClasses.join(', '),
+                            suggestion,
+                        },
+                    });
+                }
+            },
+        });
+    },
+};

package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.test.ts

@@ -0,0 +1,403 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import tailwindV3ToBento from './tailwind-v3-to-bento';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/tailwind-v3-to-bento', () => {
+    ruleTester.run('tailwind-v3-to-bento', tailwindV3ToBento, {
+        valid: [
+            {
+                name: 'Bento spacing classes are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="p-070 m-040 gap-100"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Bento border radius classes are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="rounded-s rounded-m rounded-l"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Bento shadow classes are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="shadow-low shadow-medium shadow-high"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Bento breakpoint classes are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="s-min:p-070 l-min:p-100 xxl:m-040"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Bento color classes are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="text-label-critical bg-secondary border-outline-primary"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Non-themed Tailwind utilities are valid',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="flex items-center justify-between"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Non-class attributes are ignored',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div data-test="p-4 shadow-lg rounded-md"></div>
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            // Spacing
+            {
+                name: 'Replaces spacing utilities',
+                code: `
+                <template>
+                    <div class="p-4 m-2 gap-8"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="p-070 m-040 gap-100"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces spacing variants (px, py, mt, etc.)',
+                code: `
+                <template>
+                    <div class="px-4 py-2 mt-8 mb-3"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="px-070 py-040 mt-100 mb-060"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces fractional spacing',
+                code: `
+                <template>
+                    <div class="p-0.5 m-1.5 gap-2.5"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="p-010 m-030 gap-050"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces negative spacing utilities',
+                code: `
+                <template>
+                    <div class="-m-4 -mt-2 -inset-x-8"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="-m-070 -mt-040 -inset-x-100"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Border radius
+            {
+                name: 'Replaces bare rounded',
+                code: `
+                <template>
+                    <div class="rounded"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="rounded-s"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces border radius utilities',
+                code: `
+                <template>
+                    <div class="rounded-sm rounded-md rounded-lg"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="rounded-xs rounded-m rounded-l"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Border width
+            {
+                name: 'Replaces bare border',
+                code: `
+                <template>
+                    <div class="border"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="border-s"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces border width utilities',
+                code: `
+                <template>
+                    <div class="border-2 border-4"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="border-m border-l"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Box shadows
+            {
+                name: 'Replaces bare shadow',
+                code: `
+                <template>
+                    <div class="shadow"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="shadow-medium"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces shadow utilities',
+                code: `
+                <template>
+                    <div class="shadow-sm shadow-lg shadow-xl"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="shadow-low shadow-high shadow-high"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Breakpoints
+            {
+                name: 'Replaces breakpoint prefixes',
+                code: `
+                <template>
+                    <div class="sm:p-4 lg:p-8 2xl:m-2"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="s-min:p-070 l-min:p-100 xxl:m-040"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces breakpoint with non-spacing class',
+                code: `
+                <template>
+                    <div class="md:rounded-md xl:shadow-lg"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="m-min:rounded-m xl-min:shadow-high"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Handles combined breakpoint and other variants',
+                code: `
+                <template>
+                    <div class="md:hover:p-4 lg:focus:rounded-md"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="m-min:hover:p-070 l-min:focus:rounded-m"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Preserves non-breakpoint variants without replacing',
+                code: `
+                <template>
+                    <div class="hover:bg-gray-100 focus:border-gray-300"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="hover:bg-secondary focus:border-outline-primary"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Colors
+            {
+                name: 'Replaces text color utilities',
+                code: `
+                <template>
+                    <div class="text-red-500 text-green-500 text-blue-500"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="text-label-critical text-label-success text-label-highlight"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces background color utilities',
+                code: `
+                <template>
+                    <div class="bg-gray-100 bg-red-100 bg-green-100"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="bg-secondary bg-critical-weak bg-success-weak"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            {
+                name: 'Replaces border color utilities',
+                code: `
+                <template>
+                    <div class="border-gray-300"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="border-outline-primary"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+            // Typography (warn only, no fix)
+            {
+                name: 'Warns about typography with suggested variant',
+                code: `
+                <template>
+                    <div class="text-sm font-bold leading-tight tracking-wide"></div>
+                </template>
+                `,
+                errors: [
+                    {
+                        message:
+                            'Found Tailwind v3 typography class "text-sm, font-bold, leading-tight, tracking-wide" — use <bento-typography variant="caption" strongest> instead.',
+                    },
+                ],
+            },
+            {
+                name: 'Suggests body variant for text-base',
+                code: `
+                <template>
+                    <div class="text-base font-medium"></div>
+                </template>
+                `,
+                errors: [
+                    {
+                        message:
+                            'Found Tailwind v3 typography class "text-base, font-medium" — use <bento-typography variant="body" stronger> instead.',
+                    },
+                ],
+            },
+            {
+                name: 'Suggests title variant with large for text-2xl',
+                code: `
+                <template>
+                    <div class="text-2xl font-semibold"></div>
+                </template>
+                `,
+                errors: [
+                    {
+                        message:
+                            'Found Tailwind v3 typography class "text-2xl, font-semibold" — use <bento-typography variant="title" large stronger> instead.',
+                    },
+                ],
+            },
+            {
+                name: 'Suggests title medium for text-xl',
+                code: `
+                <template>
+                    <div class="text-xl"></div>
+                </template>
+                `,
+                errors: [
+                    {
+                        message:
+                            'Found Tailwind v3 typography class "text-xl" — use <bento-typography variant="title" medium> instead.',
+                    },
+                ],
+            },
+            // Mixed
+            {
+                name: 'Handles mixed classes',
+                code: `
+                <template>
+                    <div class="p-4 rounded-md shadow-lg sm:p-8 text-red-500"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="p-070 rounded-m shadow-high s-min:p-100 text-label-critical"></div>
+                </template>
+                `,
+                errors: [{ messageId: 'updateTailwindClass' }],
+            },
+        ],
+    });
+});