feat: add eslint-plugin-better-tailwindcss for Tailwind v4 linting

- Install eslint-plugin-better-tailwindcss with recommended config
- Configure entryPoint to design-system CSS for v4 theme resolution
- Enable: enforce-canonical-classes, no-deprecated-classes,
  no-conflicting-classes, no-duplicate-classes, no-unnecessary-whitespace
- Disable initially: no-unknown-classes (needs class whitelisting),
  enforce-consistent-line-wrapping (oxfmt conflict risk),
  enforce-consistent-class-order (large batch change)
- Fix conflicting outline classes in FormDropdownMenuActions

Fixes COM-15518

Amp-Thread-ID: https://ampcode.com/threads/T-019c9922-38fa-7628-8723-887d3c8fc386

Author: christian-byrne

eslint.config.ts

@@ -1,6 +1,7 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
+import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
@@ -111,6 +112,23 @@ export default defineConfig([
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
+  // Tailwind CSS v4 linting (class ordering, duplicates, conflicts, etc.)
+  betterTailwindcss.configs.recommended,
+  {
+    settings: {
+      'better-tailwindcss': {
+        entryPoint: 'packages/design-system/src/css/style.css'
+      }
+    },
+    rules: {
+      // Off: requires whitelisting non-Tailwind classes (PrimeIcons, custom CSS)
+      'better-tailwindcss/no-unknown-classes': 'off',
+      // Off: may conflict with oxfmt formatting
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+      // Off: large batch change, enable and apply with `eslint --fix`
+      'better-tailwindcss/enforce-consistent-class-order': 'off'
+    }
+  },
   // Disables ESLint rules that conflict with formatters
   eslintConfigPrettier,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types

package.json

@@ -146,6 +146,7 @@
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
     "eslint-import-resolver-typescript": "catalog:",
+    "eslint-plugin-better-tailwindcss": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-storybook": "catalog:",

pnpm-lock.yaml

@@ -61,6 +61,7 @@ catalog:
   eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
   eslint-import-resolver-typescript: ^4.4.4
+  eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
   eslint-plugin-storybook: ^10.2.10

pnpm-workspace.yaml

@@ -42,7 +42,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 })
 
 const actionButtonStyle = cn(
-  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
+  'h-8 bg-zinc-500/20 rounded-lg outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
 )
 
 const layoutSwitchItemStyle =
@@ -157,7 +157,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >
@@ -219,7 +219,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >
@@ -281,7 +281,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >