style: add lint rule for tailwind

web/eslint.config.mjs

@@ -9,6 +9,7 @@ import { FlatCompat } from '@eslint/eslintrc'
 import globals from 'globals'
 import storybook from 'eslint-plugin-storybook'
 import { fixupConfigRules } from '@eslint/compat'
+import tailwind from 'eslint-plugin-tailwindcss'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -76,6 +77,12 @@ export default combine(
     ? []
     // TODO: remove this when upgrade to nextjs 15
     : fixupConfigRules(compat.extends('next')),
+  {
+    rules: {
+      // performance issue, and not used.
+      '@next/next/no-html-link-for-pages': 'off',
+    },
+  },
   {
     ignores: [
       '**/node_modules/*',
@@ -160,4 +167,17 @@ export default combine(
       },
     },
   },
+  tailwind.configs['flat/recommended'],
+  {
+    rules: {
+      // due to 1k lines of tailwind config, these rule have performance issue
+      'tailwindcss/no-contradicting-classname': 'off',
+      'tailwindcss/no-unnecessary-arbitrary-value': 'off',
+      'tailwindcss/enforces-shorthand': 'off',
+      'tailwindcss/no-custom-classname': 'off',
+
+      // in the future
+      'tailwindcss/classnames-order': 'off',
+    },
+  },
 )

web/package.json

@@ -162,6 +162,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
     "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

web/pnpm-lock.yaml

@@ -422,6 +422,9 @@ importers:
       eslint-plugin-storybook:
         specifier: ^0.10.1
         version: 0.10.1(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5)
+      eslint-plugin-tailwindcss:
+        specifier: ^3.17.5
+        version: 3.17.5(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5)))
       husky:
         specifier: ^9.1.6
         version: 9.1.6
@@ -4444,6 +4447,12 @@ packages:
     peerDependencies:
       eslint: '>=6'
 
+  eslint-plugin-tailwindcss@3.17.5:
+    resolution: {integrity: sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0
+
   eslint-plugin-toml@0.11.1:
     resolution: {integrity: sha512-Y1WuMSzfZpeMIrmlP1nUh3kT8p96mThIq4NnHrYUhg10IKQgGfBZjAWnrg9fBqguiX4iFps/x/3Hb5TxBisfdw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -13174,6 +13183,12 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5))):
+    dependencies:
+      fast-glob: 3.3.2
+      postcss: 8.4.47
+      tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5))
+
   eslint-plugin-toml@0.11.1(eslint@9.13.0(jiti@1.21.6)):
     dependencies:
       debug: 4.3.7