Changing linting rules

Author: BennettTaylor

eslint.config.mjs

@@ -1,14 +1,67 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import tailwindcssPlugin from "eslint-plugin-tailwindcss";
+import globals from "globals";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+export default [
+  // Base JS rules
+  js.configs.recommended,
 
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+  // Next.js recommended rules (core-web-vitals)
+  {
+    plugins: {
+      "@next/next": nextPlugin,
+    },
+    rules: {
+      ...nextPlugin.configs["core-web-vitals"].rules,
+    },
+  },
 
-const eslintConfig = [...compat.extends("next/core-web-vitals")];
+  // React & React Hooks
+  {
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off", // Next.js handles React import
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
 
-export default eslintConfig;
+  // TailwindCSS support
+  {
+    plugins: {
+      tailwindcss: tailwindcssPlugin,
+    },
+    rules: {
+      ...tailwindcssPlugin.configs.recommended.rules,
+    },
+  },
+
+  // General settings
+  {
+    ignores: ["node_modules/**", ".next/**", "out/**", "dist/**"],
+  },
+];

src/app/globals.css

@@ -1,6 +1,5 @@
 /* Tailwind CSS Directives */
 @import "tailwindcss";
-
 @import url('https://fonts.googleapis.com/css2?family=Chicle&display=swap');
 
 @theme {