Added prettier plugin tailwindcss to project

components/ui/product-card/product-card.tsx

@@ -1,35 +1,25 @@
-'use client'
+'use client';
 
-import Price from 'components/product/price'
-import Text from 'components/ui/text'
-import type { Product } from 'lib/storm/types/product'
-import { cn } from 'lib/utils'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import { FC } from 'react'
+import Price from 'components/product/price';
+import Text from 'components/ui/text';
+import type { Product } from 'lib/storm/types/product';
+import { cn } from 'lib/utils';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { FC } from 'react';
 
-const WishlistButton = dynamic(
-  () => import('components/ui/wishlist-button')
-)
+const WishlistButton = dynamic(() => import('components/ui/wishlist-button'));
 
-const SanityImage = dynamic(() => import('components/ui/sanity-image'))
+const SanityImage = dynamic(() => import('components/ui/sanity-image'));
 
 interface Props {
-  className?: string
-  product: Product
-  variant?: 'default'
+  className?: string;
+  product: Product;
+  variant?: 'default';
 }
 
-const ProductCard: FC<Props> = ({
-  product,
-  className,
-  variant = 'default',
-}) => {
-
-  const rootClassName = cn(
-    'w-full group relative overflow-hidden',
-    className
-  )
+const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) => {
+  const rootClassName = cn('w-full group relative overflow-hidden', className);
 
   return (
     <Link
@@ -39,16 +29,13 @@ const ProductCard: FC<Props> = ({
       locale={product.locale}
     >
       {variant === 'default' && (
-        <div className={'flex flex-col relative justify-center w-full h-full'}>
-
+        <div className={'relative flex h-full w-full flex-col justify-center'}>
           <WishlistButton
-            className={'top-4 right-4 z-10 absolute'}
+            className={'absolute right-4 top-4 z-10'}
             productId={product.id}
-            variant={
-              product?.variants ? (product.variants[0] as any) : null
-            }
+            variant={product?.variants ? (product.variants[0] as any) : null}
           />
-          <div className="w-full h-full overflow-hidden relative">
+          <div className="relative h-full w-full overflow-hidden">
             {product?.images && (
               <SanityImage
                 image={product?.images[0]}
@@ -58,17 +45,12 @@ const ProductCard: FC<Props> = ({
             )}
           </div>
 
-          <div
-            className={cn('text-high-contrast flex items-start flex-col', className)}
-          >
-            <Text
-              className="mt-2 lg:mt-3"
-              variant='listChildHeading'
-            >
+          <div className={cn('flex flex-col items-start text-high-contrast', className)}>
+            <Text className="mt-2 lg:mt-3" variant="listChildHeading">
               {product.title}
             </Text>
             <Price
-              className='text-sm font-medium leading-tight lg:text-base' 
+              className="text-sm font-medium leading-tight lg:text-base"
               amount={`${product.price.value}`}
               currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
             />
@@ -76,7 +58,7 @@ const ProductCard: FC<Props> = ({
         </div>
       )}
     </Link>
-  )
-}
+  );
+};
 
-export default ProductCard
+export default ProductCard;

package.json

@@ -67,8 +67,8 @@
     "eslint-plugin-unicorn": "^45.0.2",
     "lint-staged": "^13.1.1",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.2",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.7",
     "tailwindcss": "^3.2.6",
     "typescript": "4.9.5"
   }

pnpm-lock.yaml

@@ -35,8 +35,8 @@ specifiers:
   next-intl: ^2.13.1
   next-sanity: ^4.2.0
   postcss: ^8.4.21
-  prettier: ^2.8.4
-  prettier-plugin-tailwindcss: ^0.2.2
+  prettier: ^2.8.7
+  prettier-plugin-tailwindcss: ^0.2.7
   react: 18.2.0
   react-cookie: ^4.1.1
   react-dom: 18.2.0

prettier.config.js

@@ -6,5 +6,7 @@ module.exports = {
   tabWidth: 2,
   // pnpm doesn't support plugin autoloading
   // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  plugins: [require('prettier-plugin-tailwindcss')]
+  plugins: [require('prettier-plugin-tailwindcss')],
+  pluginSearchDirs: ["."],
+  tailwindConfig: './tailwind.config.js',
 };