style: formatting the whole source code with new eslint rules

.eslintrc

@@ -56,6 +56,7 @@
           "WithStatement"
         ], // Overrides Airbnb configuration and enable no-restricted-syntax
         "import/prefer-default-export": "off", // Named export is easier to refactor automatically
+        "tailwindcss/no-custom-classname": "off", // Disabled otherwise nightmare to allow each custom tailwind classes
         "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
         "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
         "@typescript-eslint/no-unused-vars": "off",

src/background/Background.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type IBackgroundProps = {
   children: ReactNode;

src/cta/CTABanner.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type ICTABannerProps = {
   title: string;
@@ -7,13 +7,13 @@ type ICTABannerProps = {
 };
 
 const CTABanner = (props: ICTABannerProps) => (
-  <div className="text-center flex flex-col p-4 sm:text-left sm:flex-row sm:items-center sm:justify-between sm:p-12 bg-primary-100 rounded-md">
+  <div className="flex flex-col rounded-md bg-primary-100 p-4 text-center sm:flex-row sm:items-center sm:justify-between sm:p-12 sm:text-left">
     <div className="text-2xl font-semibold">
       <div className="text-gray-900">{props.title}</div>
       <div className="text-primary-500">{props.subtitle}</div>
     </div>
 
-    <div className="whitespace-no-wrap mt-3 sm:mt-0 sm:ml-2">
+    <div className="whitespace-no-wrap mt-3 sm:ml-2 sm:mt-0">
       {props.button}
     </div>
   </div>

src/feature/VerticalFeatureRow.tsx

@@ -17,19 +17,19 @@ const VerticalFeatureRow = (props: IVerticalFeatureRowProps) => {
     'items-center',
     {
       'flex-row-reverse': props.reverse,
-    }
+    },
   );
 
   const router = useRouter();
 
   return (
     <div className={verticalFeatureClass}>
-      <div className="w-full sm:w-1/2 text-center sm:px-6">
-        <h3 className="text-3xl text-gray-900 font-semibold">{props.title}</h3>
+      <div className="w-full text-center sm:w-1/2 sm:px-6">
+        <h3 className="text-3xl font-semibold text-gray-900">{props.title}</h3>
         <div className="mt-6 text-xl leading-9">{props.description}</div>
       </div>
 
-      <div className="w-full sm:w-1/2 p-6">
+      <div className="w-full p-6 sm:w-1/2">
         <img src={`${router.basePath}${props.image}`} alt={props.imageAlt} />
       </div>
     </div>

src/footer/CenteredFooter.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { FooterCopyright } from './FooterCopyright';
 import { FooterIconList } from './FooterIconList';
@@ -14,7 +14,7 @@ const CenteredFooter = (props: ICenteredFooterProps) => (
     {props.logo}
 
     <nav>
-      <ul className="navbar mt-5 flex flex-row justify-center font-medium text-xl text-gray-800">
+      <ul className="navbar mt-5 flex flex-row justify-center text-xl font-medium text-gray-800">
         {props.children}
       </ul>
     </nav>

src/footer/FooterIconList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type IFooterIconListProps = {
   children: ReactNode;

src/hero/HeroOneButton.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type IHeroOneButtonProps = {
   title: ReactNode;
@@ -8,10 +8,10 @@ type IHeroOneButtonProps = {
 
 const HeroOneButton = (props: IHeroOneButtonProps) => (
   <header className="text-center">
-    <h1 className="text-5xl text-gray-900 font-bold whitespace-pre-line leading-hero">
+    <h1 className="whitespace-pre-line text-5xl font-bold leading-hero text-gray-900">
       {props.title}
     </h1>
-    <div className="text-2xl mt-4 mb-16">{props.description}</div>
+    <div className="mb-16 mt-4 text-2xl">{props.description}</div>
 
     {props.button}
   </header>

src/layout/Meta.tsx

@@ -1,6 +1,6 @@
-import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
 
 import { AppConfig } from '../utils/AppConfig';
 

src/layout/Section.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type ISectionProps = {
   title?: string;
@@ -9,14 +9,14 @@ type ISectionProps = {
 
 const Section = (props: ISectionProps) => (
   <div
-    className={`max-w-screen-lg mx-auto px-3 ${
+    className={`mx-auto max-w-screen-lg px-3 ${
       props.yPadding ? props.yPadding : 'py-16'
     }`}
   >
     {(props.title || props.description) && (
       <div className="mb-12 text-center">
         {props.title && (
-          <h2 className="text-4xl text-gray-900 font-bold">{props.title}</h2>
+          <h2 className="text-4xl font-bold text-gray-900">{props.title}</h2>
         )}
         {props.description && (
           <div className="mt-4 text-xl md:px-20">{props.description}</div>

src/navigation/NavbarTwoColumns.tsx

@@ -1,20 +1,19 @@
-import { ReactNode } from 'react';
-
 import Link from 'next/link';
+import type { ReactNode } from 'react';
 
 type INavbarProps = {
   logo: ReactNode;
   children: ReactNode;
 };
 
 const NavbarTwoColumns = (props: INavbarProps) => (
-  <div className="flex flex-wrap justify-between items-center">
+  <div className="flex flex-wrap items-center justify-between">
     <div>
       <Link href="/">{props.logo}</Link>
     </div>
 
     <nav>
-      <ul className="navbar flex items-center font-medium text-xl text-gray-800">
+      <ul className="navbar flex items-center text-xl font-medium text-gray-800">
         {props.children}
       </ul>
     </nav>

src/pages/_app.tsx

@@ -1,7 +1,7 @@
-import { AppProps } from 'next/app';
-
 import '../styles/global.css';
 
+import type { AppProps } from 'next/app';
+
 const MyApp = ({ Component, pageProps }: AppProps) => (
   <Component {...pageProps} />
 );

src/pages/_document.tsx

@@ -1,9 +1,10 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
 
 import { AppConfig } from '../utils/AppConfig';
 
 // Need to create a custom _document because i18n support is not compatible with `next export`.
 class MyDocument extends Document {
+  // eslint-disable-next-line class-methods-use-this
   render() {
     return (
       <Html lang={AppConfig.locale}>

src/templates/Base.tsx

@@ -6,7 +6,7 @@ import { Hero } from './Hero';
 import { VerticalFeatures } from './VerticalFeatures';
 
 const Base = () => (
-  <div className="antialiased text-gray-600">
+  <div className="text-gray-600 antialiased">
     <Meta title={AppConfig.title} description={AppConfig.description} />
     <Hero />
     <VerticalFeatures />

src/templates/Logo.tsx

@@ -11,9 +11,9 @@ const Logo = (props: ILogoProps) => {
     : 'font-semibold text-xl';
 
   return (
-    <span className={`text-gray-900 inline-flex items-center ${fontStyle}`}>
+    <span className={`inline-flex items-center text-gray-900 ${fontStyle}`}>
       <svg
-        className="text-primary-500 stroke-current mr-1"
+        className="mr-1 stroke-current text-primary-500"
         xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}