feat(tailwind-eslint): add tailwind eslint plugin

.eslintrc.json

@@ -1,9 +1,26 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:storybook/recommended", "plugin:prettier/recommended", "prettier"],
+  "extends": [
+    "plugin:tailwindcss/recommended",
+    "next/core-web-vitals",
+    "plugin:storybook/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
   "plugins": ["@typescript-eslint"],
   "rules": {
     "prettier/prettier": "error",
     "@typescript-eslint/no-unused-vars": "error"
   },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ],
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn"]
+    }
+  },
   "ignorePatterns": ["storybook-static/**"]
 }

.prettierrc.json

@@ -22,9 +22,11 @@
   "printWidth": 120,
   "semi": true,
   "singleQuote": true,
-  "tailwindFunctions": ["cn"],
   "trailingComma": "es5",
   "tabWidth": 2,
   "useTabs": false,
-  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-curly", "prettier-plugin-tailwindcss"]
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-curly"
+  ]
 }

components/announcement-banner.tsx

@@ -8,7 +8,9 @@ import { X } from 'lucide-react';
 export function AnnouncementBannerComponent() {
   const [isVisible, setIsVisible] = useState(true);
 
-  if (!isVisible) return null;
+  if (!isVisible) {
+    return null;
+  }
 
   return (
     <div className="relative bg-primary px-4 py-3 text-center text-primary-foreground">
@@ -29,7 +31,7 @@ export function AnnouncementBannerComponent() {
         className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 transition-colors hover:bg-primary-foreground/10"
         aria-label="Close announcement"
       >
-        <X className="h-5 w-5" />
+        <X className="size-5" />
       </button>
     </div>
   );

components/navigation/navigation.tsx

@@ -114,10 +114,7 @@ export const Navigation = async (props: NavigationProps) => {
                     {groupLinks && (
                       <NavigationMenuContent>
                         {groupLinks.map((subMenuItem) => (
-                          <div
-                            key={subMenuItem?.id}
-                            className="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm"
-                          >
+                          <div key={subMenuItem?.id} className="block px-4 py-2 text-sm">
                             {subMenuItem?.slug && <Link href={subMenuItem.slug}>{subMenuItem?.name}</Link>}
                           </div>
                         ))}
@@ -172,9 +169,9 @@ export const Navigation = async (props: NavigationProps) => {
   );
 
   const Search = () => (
-    <div className="bg-gray-100 dark:bg-zinc-700 flex items-center rounded-md p-2">
+    <div className="flex items-center rounded-md p-2">
       <svg
-        className="text-gray-400 h-5 w-5"
+        className="size-5"
         fill="none"
         height="24"
         stroke="currentColor"
@@ -188,20 +185,16 @@ export const Navigation = async (props: NavigationProps) => {
         <circle cx="11" cy="11" r="8" />
         <path d="m21 21-4.3-4.3" />
       </svg>
-      <input
-        className="bg-transparent text-gray-600 dark:text-gray-300 ml-2 w-full p-1.5 text-sm"
-        placeholder={t('search')}
-        type="search"
-      />
+      <input className="ml-2 w-full p-1.5 text-sm" placeholder={t('search')} type="search" />
     </div>
   );
 
   return (
-    <header className="dark:bg-zinc-800 flex items-center justify-between bg-white px-6 py-4">
+    <header className="flex items-center justify-between bg-white px-6 py-4">
       <div className="mx-auto flex w-full max-w-6xl items-center justify-between">
         <div className="flex items-center justify-center sm:justify-start">
           <Link href="/">
-            <Icons.altLogo className="h-8 w-8 md:mr-10" />
+            <Icons.altLogo className="size-8 md:mr-10" />
           </Link>
           <MainMenuDesktop />
         </div>
@@ -214,7 +207,7 @@ export const Navigation = async (props: NavigationProps) => {
             <SheetTrigger asChild>
               <Button variant="ghost" size="sm">
                 <svg
-                  className="text-gray-500 dark:text-gray-200 h-6 w-6"
+                  className="size-6"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -236,7 +229,7 @@ export const Navigation = async (props: NavigationProps) => {
               </SheetHeader>
               <SheetDescription className="mt-2">
                 <strong>
-                  Your inbox is as quiet as a wizard’s spellbook at midnight. Check back later for magical updates,
+                  Your inbox is as quiet as a wizard’s spell book at midnight. Check back later for magical updates,
                   order statuses, or special offers from The Alchemist’s Vault.
                 </strong>
               </SheetDescription>
@@ -247,7 +240,7 @@ export const Navigation = async (props: NavigationProps) => {
             <SheetTrigger asChild>
               <Button variant="ghost" size="sm" className="md:hidden">
                 <svg
-                  className="text-gray-500 dark:text-gray-200 h-6 w-6"
+                  className="size-6"
                   fill="none"
                   height="24"
                   stroke="currentColor"

components/ui/button/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        icon: 'size-10',
       },
     },
     defaultVariants: {

components/ui/duplex/duplex.tsx

@@ -11,7 +11,7 @@ import { Button } from '../button';
 import { Image, ImageProps } from '../image';
 import { Link, LinkProps } from '../link';
 
-const layoutVariants = cva('md:flex px-5 max-w-6xl', {
+const layoutVariants = cva('max-w-6xl px-5 md:flex', {
   variants: {
     imageAlignment: {
       left: 'md:flex-row',

components/ui/hero-banner/hero-banner.tsx

@@ -46,7 +46,7 @@ export function HeroBanner(props: HeroBannerProps) {
       )}
       <div
         style={{ backgroundColor: colorConfig.backgroundColor }}
-        className="absolute left-0 top-0 h-full w-full opacity-25"
+        className="absolute left-0 top-0 size-full opacity-25"
       ></div>
       <div
         className={cn('z-10 pt-10', {
@@ -58,7 +58,7 @@ export function HeroBanner(props: HeroBannerProps) {
           <h1
             style={{ color: colorConfig.headlineColor }}
             {...addAttributes('headline')}
-            className={'text-gray-900 mb-4 text-3xl font-extrabold leading-none tracking-tight md:text-4xl lg:text-5xl'}
+            className={'mb-4 text-3xl font-extrabold leading-none tracking-tight md:text-4xl lg:text-5xl'}
           >
             {headline}
           </h1>

components/ui/navigation-menu.tsx

@@ -52,7 +52,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{' '}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -105,7 +105,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

components/ui/sheet.tsx

@@ -34,7 +34,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
   {
     variants: {
       side: {
@@ -63,7 +63,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
         <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-          <X className="h-4 w-4" />
+          <X className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>

components/ui/topic-person/topic-person.tsx

@@ -25,8 +25,8 @@ export const TopicPerson = ({
   return (
     <div className="my-12 flex flex-col items-center rounded-xl bg-secondaryDark px-10 py-6 text-white md:flex-row md:gap-10">
       {avatar && (
-        <div className="flex flex-shrink-0 flex-col items-center">
-          <div className="overflow-hiddenshadow-lg flex-shrink-0 rounded-xl">
+        <div className="flex shrink-0 flex-col items-center">
+          <div className="shrink-0 overflow-hidden rounded-xl shadow-lg">
             <Image {...addAttributes('image')} {...avatar} alt={avatar.alt} />
           </div>
           {!cardStyle && (

package.json

@@ -9,6 +9,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "generate:schema": "source .env.local && gql.tada generate-schema --header \"Authorization: Bearer $CONTENTFUL_DELIVERY_API\" \"https://graphql.contentful.com/content/v1/spaces/$CONTENTFUL_SPACE\"",
     "generate:output": "gql.tada generate-output && gql.tada turbo",
     "generate:ctf-seed": "contentful space export --export-dir=migrations/ --content-file=ctf-seed.json --use-verbose-renderer=true --download-assets",
@@ -75,6 +76,7 @@
     "@types/cypress-image-snapshot": "^3.1.6",
     "@types/use-analytics": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^8.12.2",
     "autoprefixer": "^10.4.14",
     "axe-core": "^4.6.1",
     "chromatic": "^6.21.0",
@@ -88,13 +90,13 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "husky": "^8.0.3",
     "inquirer": "9",
     "lint-staged": "^14.0.1",
     "postcss": "^8.4.27",
     "prettier": "^3.0.3",
     "prettier-plugin-curly": "^0.2.1",
-    "prettier-plugin-tailwindcss": "^0.5.14",
     "shadcn": "^2.1.0",
     "storybook": "^8.0.4",
     "tailwindcss": "^3.3.3",