Enabled tailwindcss rules in eslint and prettier (#3417)

* turned on eslint classname order rule * changed classname orders as per eslint warning * added prettier tailwindcss plugin * enabled plugin in .prettierrc * changed classname order as per prettier plugin warning * testing ubuntu 22-04 * fix ubuntu version * changed ubuntu version for linting * test different node version * added focus:ring class * test node 23.4.0 version * testing latest eslint with latest node js versions * revert eslint version to 8.57.1 * use .nvmrc * used .eslintrc.json * added root * added tailwind classname order * changed the classnames order, refactor eslintrc and packages * fix classnames order * added tailwindcss to eslint * fix prettier issue --------- Co-authored-by: Calinator444 <[email protected]> Co-authored-by: Caleb Williams [SSW] <[email protected]>
SSWConsulting · Jan 6, 2025 · e20b3e9 · e20b3e9
1 parent c160e4d
commit e20b3e9
Show file tree

Hide file tree

Showing 7 changed files with 679 additions and 498 deletions.
diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
@@ -4,36 +4,35 @@
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "extends": [
     "eslint:recommended",
+    "next/core-web-vitals",
     "next/typescript",
-    "plugin:react/recommended",
     "plugin:tailwindcss/recommended",
-    "next/core-web-vitals",
-    "plugin:prettier/recommended",
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-unused-expressions": [
       "error",
       {
         "allowShortCircuit": true,
-        "allowTernary": true,
-      },
+        "allowTernary": true
+      }
     ],
     "quotes": ["error", "double"],
     "no-console": "warn",
     "tailwindcss/no-arbitrary-value": "error",
-    "tailwindcss/classnames-order": "off",
+    "tailwindcss/classnames-order": "error",
     "tailwindcss/no-custom-classname": [
       "error",
       {
-        "whitelist": ["g\\-yt.+", "prose-.+", "text-3xl/9", "legend", "dark"],
-      },
+        "whitelist": ["g\\-yt.+", "prose-.+", "text-3xl/9", "legend", "dark"]
+      }
     ],
     "prettier/prettier": [
       "error",
       {
-        "endOfLine": "auto",
-      },
-    ],
+        "endOfLine": "auto"
+      }
+    ]
   },
-  "reportUnusedDisableDirectives": true,
+  "reportUnusedDisableDirectives": true
 }
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,6 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "tailwindConfig": "./tailwind.config.js"
+  "tailwindConfig": "./tailwind.config.js",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/components/consulting/index/pageCard.tsx b/components/consulting/index/pageCard.tsx
@@ -17,7 +17,7 @@ export const PageCard = ({ page, category, pageIndex }) => {
         <div className="shrink-0">
           {page.logo && (
             <Image
-              className="mr-4 p-2 aspect-square size-14 border-1 border-gray-100 md:size-28"
+              className="mr-4 aspect-square size-14 border-1 border-gray-100 p-2 md:size-28"
               height={115}
               width={115}
               src={page.logo}

diff --git a/components/layout/v2ComponentWrapper.tsx b/components/layout/v2ComponentWrapper.tsx
@@ -59,15 +59,15 @@ const V2ComponentWrapper = ({
         backgroundOptions.find((value) => {
           return value.reference === data.background?.backgroundColour;
         })?.classes,
-        "w-full relative overflow-visible",
+        "relative w-full overflow-visible",
         className
       )}
     >
       {data.background?.bleed && data.background?.backgroundImage ? (
         <Image
           ref={bleed}
           src={data.background?.backgroundImage}
-          className="absolute w-full z-0 overflow-visible grid inset-0 place-items-center"
+          className="absolute inset-0 z-0 grid w-full place-items-center overflow-visible"
           alt="background image"
           width={
             (elementWidth || bleed.current?.getBoundingClientRect()?.width) ?? 0
@@ -92,7 +92,7 @@ const V2ComponentWrapper = ({
       <section
         ref={ref}
         className={classNames(
-          "relative transition-opacity duration-300 z-5",
+          "z-5 relative transition-opacity duration-300",
           isInInitialViewport === false && "opacity-0",
           !isInInitialViewport && isInView && "opacity-100"
         )}

diff --git a/components/textInputWithCount/textInputWithCount.tsx b/components/textInputWithCount/textInputWithCount.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import { wrapFieldsWithMeta } from "tinacms";
 
 /**
@@ -13,14 +13,12 @@ export const TextInputWithCount = (max: number, isTextArea: boolean = false) =>
     <div className="flex flex-col gap-2">
       {isTextArea ? (
         <textarea
-          // eslint-disable-next-line tailwindcss/no-custom-classname
-          className="focus:shadow-outline block min-h-40 w-full resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-600 shadow-inner focus:border-blue-500 focus:text-gray-900"
+          className="block min-h-40 w-full resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-600 shadow-inner focus:border-blue-500 focus:text-gray-900 focus:ring"
           {...input}
         />
       ) : (
         <input
-          // eslint-disable-next-line tailwindcss/no-custom-classname
-          className="focus:shadow-outline block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base text-gray-600 shadow-inner transition-all duration-150 ease-out placeholder:text-gray-300 focus:border-blue-500 focus:text-gray-900 focus:outline-none"
+          className="block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base text-gray-600 shadow-inner transition-all duration-150 ease-out placeholder:text-gray-300 focus:border-blue-500 focus:text-gray-900 focus:outline-none focus:ring"
           {...input}
         />
       )}

diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@next/eslint-plugin-next": "15.0.3",
     "@playwright/test": "^1.48.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
@@ -34,19 +33,22 @@
     "@types/react": "^18.3.12",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.2",
+    "@next/eslint-plugin-next": "14.2.15",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
+    "eslint-config-next": "14.2.15",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-tailwindcss": "^3.17.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "next-sitemap": "^4.2.3",
     "playwright": "^1.48.2",
     "postcss": "^8.4.47",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
-    "prettier": "^3.4.2",
     "source-map-explorer": "^2.5.3",
     "ts-node": "^10.9.2"
   },
@@ -77,7 +79,6 @@
     "embla-carousel": "^8.5.1",
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
-    "eslint-config-next": "15.0.1",
     "formik": "^2.4.6",
     "framer-motion": "^11.12.0",
     "lodash": "^4.17.21",