update eslint with tailwindcss plugin

.eslintrc.cjs

@@ -1,20 +1,21 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:prettier/recommended',
-    'plugin:jsx-a11y/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', 'react', 'prettier'],
-  rules: {
-    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-uses-react': 'off',
-  },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:prettier/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:tailwindcss/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh', 'react', 'prettier'],
+    rules: {
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        'react/react-in-jsx-scope': 'off',
+        'react/jsx-uses-react': 'off',
+    },
 };

package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-tailwindcss": "^3.17.3",
     "jsdom": "^24.1.0",
     "msw": "^2.3.1",
     "postcss": "^8.4.38",

src/components/Error/ErrorMsg.tsx

@@ -9,7 +9,7 @@ export const ErrorMsg = ({ message }: ErrorMsgProps) => {
   const issueURL = import.meta.env.VITE_ISSUE_URL;
 
   return (
-    <div className="flex h-full w-full justify-center align-middle">
+    <div className="flex size-full justify-center align-middle">
       <div className="my-5 flex h-1/4 w-1/2 justify-center rounded-2xl bg-red-900">
         <div className="p-2">
           <h1 className="my-2 text-center text-3xl font-bold text-white">

src/components/Header/Header.tsx

@@ -22,7 +22,7 @@ export const Header = ({ treeTitle }: HeaderProps) => {
 
   return (
     <Panel position="top-left" className="sm:w-5/12 md:w-4/12 lg:w-3/12">
-      <div className="bg-rcraBlue box-border w-full rounded-xl p-2 align-middle">
+      <div className="box-border w-full rounded-xl bg-rcraBlue p-2 align-middle">
         <div className="flex min-w-60 justify-between">
           <h1 className="text-xl font-semibold text-white">{treeTitle}</h1>
           <div className="absolute right-3 top-3">

src/components/OffCanvas/OffCanvas.tsx

@@ -79,7 +79,7 @@ export const OffCanvas = ({ isOpen, onClose }: OffCanvasProps) => {
       </div>
       {/* backdrop while open*/}
       <div
-        className={`fixed bottom-0 left-0 right-0 top-0 bg-black transition-opacity duration-200 ease-in-out ${isOpen ? 'visible opacity-60' : 'invisible opacity-0'}`}
+        className={`fixed inset-0 bg-black transition-opacity duration-200 ease-in-out ${isOpen ? 'visible opacity-60' : 'invisible opacity-0'}`}
       />
     </>
   );

src/index.css

@@ -3,62 +3,61 @@
 @tailwind utilities;
 
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.2;
-    --card-color: linear-gradient(150deg, #3e6d9b 0%, #2b5d8f 100%);
-    --card-color-hover: linear-gradient(150deg, #346391 0%, #215385 100%);
-    color-scheme: light;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.2;
+  --card-color: linear-gradient(150deg, #3e6d9b 0%, #2b5d8f 100%);
+  --card-color-hover: linear-gradient(150deg, #346391 0%, #215385 100%);
+  color-scheme: light;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html,
 body,
 #root {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .react-flow__node {
-    color: transparent;
-    cursor: auto;
-    background-color: transparent;
-    min-width: 20rem;
-    box-shadow: none;
-    border: theme('borderWidth.4') solid theme('colors.transparent');
-    border-radius: theme('borderRadius.2xl');
-    padding: 0.1rem;
+  color: transparent;
+  cursor: auto;
+  background-color: transparent;
+  min-width: 20rem;
+  box-shadow: none;
+  border: theme('borderWidth.4') solid theme('colors.transparent');
+  border-radius: theme('borderRadius.2xl');
+  padding: 0.1rem;
 }
 
 .react-flow__node:focus {
-    border: theme('borderWidth.4') solid theme('colors.blue.500');
-    padding: 0.1rem;
+  border: theme('borderWidth.4') solid theme('colors.blue.500');
+  padding: 0.1rem;
 }
 
 .react-flow__minimap,
 .react-flow__minimap svg {
-    border-radius: theme('borderRadius.2xl');
-    border: theme('borderWidth.2') solid theme('colors.gray.500');
+  border-radius: theme('borderRadius.2xl');
+  border: theme('borderWidth.2') solid theme('colors.gray.500');
 }
 
 .react-flow__controls {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .react-flow__controls button {
-    border-radius: theme('borderRadius.lg');
-    border: 2px solid #333333;
-    margin-top: 2px;
-    background: theme('colors.gray.200') !important;
+  border-radius: theme('borderRadius.lg');
+  border: 2px solid #333333;
+  margin-top: 2px;
+  background: theme('colors.gray.200') !important;
 }
 
-
 @layer components {
-    .z-top {
-        z-index: 1050;
-    }
+  .z-top {
+    z-index: 1050;
+  }
 }