feat: introduce eslint-plugin-tailwindcss

Author: xboy2012

app/layout.tsx

@@ -162,18 +162,18 @@ export default function RootLayout({
         <ServiceWorkerRegister />
         <main
           className={cx(
-            'mt-4 mb-19 mx-3 min-w-65 text-white2',
+            'text-white2 mx-3 mt-4 mb-19 min-w-65',
             'md:mt-15 md:mb-25 xl:mb-15',
-            '2xl:max-w-300 2xl:mx-auto',
-            'flex flex-col 2xl:flex-row 2xl:justify-center 2xl:items-stretch 2xl:gap-6',
-            'print:text-black print:!m-0',
+            '2xl:mx-auto 2xl:max-w-300',
+            'flex flex-col 2xl:flex-row 2xl:items-stretch 2xl:justify-center 2xl:gap-6',
+            'print:!m-0 print:text-black',
           )}
         >
           <div
             className={cx(
               'order-2',
-              'xl:relative xl:w-max xl:m-auto',
-              '2xl:min-w-[75%] 2xl:w-[75%] 2xl:m-0',
+              'xl:relative xl:m-auto xl:w-max',
+              '2xl:m-0 2xl:w-[75%] 2xl:min-w-[75%]',
             )}
           >
             <NavBar />

components/About/AboutText.tsx

@@ -6,7 +6,7 @@ export const AboutText = () => {
     <section
       className={cx(
         'text-lightGray text-3.5 md:text-4 font-300 leading-x1.6 md:mb-10',
-        'print:text-inherit print:!mb-0',
+        'print:!mb-0 print:text-inherit',
       )}
     >
       {userData.intro.map((text, index) => {

components/About/ClientItem.tsx

@@ -18,16 +18,16 @@ export const ClientItem = ({ name, link }: { name: string; link: string }) => {
       className={cx(
         'min-w-[calc(50%-8px)] sm:min-w-[calc(33.33%-10px)]',
         'md:min-w-[calc(33.33%-35px)] xl:min-w-[calc(25%-38px)]',
-        'snap-start aspect-5/3 overflow-hidden',
-        'print:min-w-0 print:aspect-auto',
+        'aspect-5/3 snap-start overflow-hidden',
+        'print:aspect-auto print:min-w-0',
       )}
     >
       <a
         href={link}
         target="_blank"
         rel="noreferrer noopener"
         title={name}
-        className="relative block w-full h-full"
+        className="relative block h-full w-full"
       >
         <div
           className={cx(
@@ -38,8 +38,8 @@ export const ClientItem = ({ name, link }: { name: string; link: string }) => {
         />
         <p
           className={cx(
-            'absolute -left-250 -top-250',
-            'print:relative print:left-auto print:top-auto print:font-300',
+            'absolute -top-250 -left-250',
+            'print:font-300 print:relative print:top-auto print:left-auto',
           )}
         >
           {name}

components/About/Clients.tsx

@@ -5,16 +5,16 @@ import { ClientItem } from './ClientItem';
 export const Clients = () => {
   return (
     <section className="mb-4 break-inside-avoid">
-      <h3 className="text-white2 capitalize text-4.5 md:text-6 print:text-inherit print:mb-2">
+      <h3 className="text-white2 text-4.5 md:text-6 capitalize print:mb-2 print:text-inherit">
         Who I work for
       </h3>
 
       <ul
         className={cx(
-          'flex justify-start items-start gap-4 md:gap-8',
-          'my-0 -mx-4 md:-mx-7.5 p-6 md:p-11',
+          'flex items-start justify-start gap-4 md:gap-8',
+          '-mx-4 my-0 p-6 md:-mx-7.5 md:p-11',
           'flex-wrap sm:flex-nowrap',
-          'sm:overflow-x-auto scroll-smooth',
+          'scroll-smooth sm:overflow-x-auto',
           'overscroll-inline-contain snap-inline-mandatory',
           'scroll-px-6 md:scroll-px-11',
           'webkit-scrollbar:w-1.25 webkit-scrollbar:h-1.25',
@@ -24,7 +24,7 @@ export const Clients = () => {
           'webkit-scrollbar-thumb:rounded-1.25',
           'webkit-scrollbar-button:w-5',
           'lg:webkit-scrollbar-button:w-25',
-          'print:flex-col print:m-0 print:p-0 print:gap-0',
+          'print:m-0 print:flex-col print:gap-0 print:p-0',
         )}
       >
         {companies.map(({ name, link }) => {

components/About/Service.tsx

@@ -5,13 +5,13 @@ import { userData } from '../../src/data';
 export const Service = () => {
   return (
     <section className="mb-9 print:mb-4">
-      <h3 className="mb-5 text-white2 capitalize text-4.5 md:text-6 print:text-inherit print:mb-2">
+      <h3 className="text-white2 text-4.5 md:text-6 mb-5 capitalize print:mb-2 print:text-inherit">
         What I Am Doing
       </h3>
 
       <ul
         className={cx(
-          'grid grid-cols-1fr gap-5 xl:grid-cols-1fr1fr xl:gap-y-5 xl:gap-x-6',
+          'grid-cols-1fr xl:grid-cols-1fr1fr grid gap-5 xl:gap-x-6 xl:gap-y-5',
           'print:!gap-0',
         )}
       >

components/About/ServiceItem.tsx

@@ -20,16 +20,16 @@ export const ServiceItem = ({
   return (
     <li
       className={cx(
-        'relative bg-borderGradientOnyx p-5 rounded-3.5 shadow-2 xl:shadow-2xl z-1',
-        'md:flex md:justify-start md:items-start md:gap-5 md:p-7.5',
-        'print:bg-none print:border-none print:shadow-none print:p-0 print:!gap-0',
+        'bg-borderGradientOnyx rounded-3.5 shadow-2 relative z-1 p-5 xl:shadow-2xl',
+        'md:flex md:items-start md:justify-start md:gap-5 md:p-7.5',
+        'print:!gap-0 print:border-none print:bg-none print:p-0 print:shadow-none',
       )}
     >
-      <div className="absolute inset-px bg-eerieBlack1 bg-bgGradientJet rounded-inherit -z-1 print:hidden" />
-      <div className="mb-2.5 md:mb-0 md:mt-1.25 print:hidden">
+      <div className="bg-eerieBlack1 bg-bgGradientJet rounded-inherit absolute inset-px -z-1 print:hidden" />
+      <div className="mb-2.5 md:mt-1.25 md:mb-0 print:hidden">
         <div
           className={cx(
-            'mx-auto aspect-square bg-contain bg-center bg-no-repeat w-10 h-10',
+            'mx-auto aspect-square h-10 w-10 bg-contain bg-center bg-no-repeat',
             classNames[id],
           )}
           title={name}
@@ -39,8 +39,8 @@ export const ServiceItem = ({
       <div className="text-center md:text-left">
         <h4
           className={cx(
-            'mb-2 text-white2 capitalize text-4.5 md:text-6',
-            'print:text-inherit print:text-4.5 print:mb-0',
+            'text-white2 text-4.5 md:text-6 mb-2 capitalize',
+            'print:text-4.5 print:mb-0 print:text-inherit',
           )}
         >
           {name}

components/Article.tsx

@@ -6,10 +6,10 @@ export const Article = ({ children }: { children?: ReactNode }) => {
     <article
       className={cx(
         'animate-fade',
-        'bg-eerieBlack2 border border-solid border-jet rounded-5 p-4 shadow-1 xl:shadow-1xl z-1',
-        'md:w-130 md:mx-auto md:p-7.5',
-        'lg:w-175 xl:w-237.5 xl:shadow-5 2xl:w-auto 2xl:min-h-full',
-        'print:!w-full print:bg-inherit print:border-none print:shadow-none print:p-0',
+        'bg-eerieBlack2 border-jet rounded-5 shadow-1 xl:shadow-1xl z-1 border border-solid p-4',
+        'md:mx-auto md:w-130 md:p-7.5',
+        'xl:shadow-5 lg:w-175 xl:w-237.5 2xl:min-h-full 2xl:w-auto',
+        'print:!w-full print:border-none print:bg-inherit print:p-0 print:shadow-none',
       )}
     >
       {children}

components/ArticleTitle.tsx

@@ -6,18 +6,18 @@ export const ArticleTitle = memo(({ title }: { title: string }) => {
     <header>
       <h2
         className={cx(
-          'relative text-white2 capitalize text-6 md:text-8',
-          'pb-2 mb-4',
-          'md:font-600 md:pb-4 md:mb-5',
+          'text-white2 text-6 md:text-8 relative capitalize',
+          'mb-4 pb-2',
+          'md:font-600 md:mb-5 md:pb-4',
           'lg:pb-5',
           'print:hidden',
         )}
       >
         {title}
         <div
           className={cx(
-            'absolute bottom-0 left-0 bg-textGradientYellow rounded-1',
-            'w-7.5 h-1 md:w-10 md:h-1.25',
+            'bg-textGradientYellow rounded-1 absolute bottom-0 left-0',
+            'h-1 w-7.5 md:h-1.25 md:w-10',
             'print:hidden',
           )}
           aria-hidden

components/Blog/BlogItem.tsx

@@ -23,23 +23,23 @@ export const BlogItem = (props: BlogItemProps) => {
         target="_blank"
         rel="noreferrer noopener"
         className={cx(
-          'block relative bg-borderGradientOnyx h-full shadow-4 rounded-2xl z-1',
-          'print:flex print:relative print:bg-none print:shadow-none',
+          'bg-borderGradientOnyx shadow-4 relative z-1 block h-full rounded-2xl',
+          'print:relative print:flex print:bg-none print:shadow-none',
         )}
       >
-        <div className="absolute inset-px rounded-inherit bg-eerieBlack1 -z-1 print:hidden" />
+        <div className="rounded-inherit bg-eerieBlack1 absolute inset-px -z-1 print:hidden" />
         <figure
           className={cx(
             'overflow-hidden',
-            'w-full h-50 sm:h-auto sm:aspect-video xl:h-57.5 xl:aspect-auto',
+            'h-50 w-full sm:aspect-video sm:h-auto xl:aspect-auto xl:h-57.5',
             'rounded-xl md:rounded-2xl',
-            'print:w-50 print:h-50 print:mr-4 print:border-black print:border-px print:border-solid',
+            'print:border-px print:mr-4 print:h-50 print:w-50 print:border-solid print:border-black',
           )}
         >
           <div
             className={cx(
-              'w-full h-full bg-cover bg-center bg-no-repeat',
-              'transition-all duration-250 ease-default group-hover:scale-110',
+              'h-full w-full bg-cover bg-center bg-no-repeat',
+              'ease-default transition-all duration-250 group-hover:scale-110',
             )}
             style={{
               backgroundImage: `url("${image}")`,
@@ -49,28 +49,28 @@ export const BlogItem = (props: BlogItemProps) => {
         </figure>
 
         <div className="p-4 md:p-6 print:flex-1 print:!p-0">
-          <div className="flex justify-start items-center gap-2 mb-2.5">
+          <div className="mb-2.5 flex items-center justify-start gap-2">
             <span className="text-lightGray70 text-3.5 md:text-4 font-300 print:text-inherit">
               {category}
             </span>
 
             <div
-              className="bg-lightGray70 w-1 h-1 rounded print:bg-black"
+              className="bg-lightGray70 h-1 w-1 rounded print:bg-black"
               aria-hidden
             />
 
             <time
               dateTime={datetime}
-              className="block text-lightGray70 text-3.5 md:text-4 font-300 print:text-inherit"
+              className="text-lightGray70 text-3.5 md:text-4 font-300 block print:text-inherit"
             >
               {formatDateTime(datetime)}
             </time>
           </div>
 
           <h3
             className={cx(
-              'mb-2.5 leading-x1.3 text-white2 capitalize text-4.5 md:text-6',
-              'transition-all duration-250 ease-default group-hover:text-orangeYellowCrayola',
+              'leading-x1.3 text-white2 text-4.5 md:text-6 mb-2.5 capitalize',
+              'ease-default group-hover:text-orangeYellowCrayola transition-all duration-250',
               'print:text-inherit',
             )}
           >

components/Blog/BlogList.tsx

@@ -4,7 +4,7 @@ import type { BlogData } from '../../src/types';
 export const BlogList = ({ blogs }: { blogs: BlogData[] }) => {
   return (
     <section className="mb-2.5">
-      <ul className="grid grid-cols-1fr gap-5 md:gap-7.5 lg:grid-cols-1fr1fr print:!grid-cols-1fr">
+      <ul className="grid-cols-1fr lg:grid-cols-1fr1fr print:!grid-cols-1fr grid gap-5 md:gap-7.5">
         {blogs.map(({ id, link, title, desc, image, datetime, category }) => {
           return (
             <BlogItem