chore: format tailwind using prettier

axelerant-trainings-frontend · Oct 12, 2022 · 4556fba · 4556fba
1 parent 551dbb4
commit 4556fba
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 12 deletions.
diff --git a/components/Cart/index.tsx b/components/Cart/index.tsx
@@ -20,10 +20,10 @@ const Cart = () => {
   return (
     <>
       <h1 className="mb-3 text-xl">Our Cart</h1>
-      <div className="w-1/3 flex mb-4">
+      <div className="mb-4 flex w-1/3">
         <button
           onClick={() => dispatch(clearCart())}
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-1/2"
+          className="w-1/2 rounded-full bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700"
         >
           Clear Cart
         </button>
@@ -33,23 +33,23 @@ const Cart = () => {
               addItem({ id: 3, title: 'Face Wash', count: 1, price: 10 }),
             )
           }
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-1/2"
+          className="w-1/2 rounded-full bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700"
         >
           Add Face Wash
         </button>
         <button
           onClick={() => dispatch(removeItem({ id: 3, title: 'Face wash' }))}
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-1/2 ml-1"
+          className="ml-1 w-1/2 rounded-full bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700"
         >
           Remove Face Wash
         </button>
       </div>
 
       <h1>Total: {total}</h1>
-      <ul className="w-1/3 flex mb-4 flex-col">
+      <ul className="mb-4 flex w-1/3 flex-col">
         {cartItems.map((cartItem, index) => {
           return (
-            <li key={index} className="flex py-6 border-2 border-gray-200">
+            <li key={index} className="flex border-2 border-gray-200 py-6">
               <div className="flex-1 py-6 px-4 sm:px-6">
                 <h3>Item: </h3>
                 <p>{cartItem['title']}</p>

diff --git a/components/Icon/Icon.tsx b/components/Icon/Icon.tsx
@@ -26,7 +26,7 @@ const Icon: React.FC<iconType> = ({
   }
   return (
     <div
-      className={`icon w-fit h-auto ${variantClass} ${
+      className={`icon h-auto w-fit ${variantClass} ${
         extraClasses ? extraClasses : ''
       }`}
       data-testid="svg-icon-wrapper"

diff --git a/components/colors/Colors.tsx b/components/colors/Colors.tsx
@@ -16,7 +16,7 @@ const Colors: React.FC<ColorProps> = ({ colors }) => {
               <div
                 style={{ backgroundColor: colorValue }}
                 className={
-                  'w-48 py-3 h-12 text-center rounded-lg justify-items-center'
+                  'h-12 w-48 justify-items-center rounded-lg py-3 text-center'
                 }
               ></div>
               <span>{colorValue}</span>

diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "test:cy:start": "start-server-and-test dev 3000 test:cy:run"
   },
   "dependencies": {
-    "contentful": "^9.2.4",
     "@reduxjs/toolkit": "^1.8.5",
+    "contentful": "^9.2.4",
     "next": "12.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -69,6 +69,7 @@
     "jest-environment-jsdom": "^29.0.3",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.1.8",
     "typescript": "4.8.3",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,13 +4,13 @@ import styles from '../styles/Home.module.css';
 
 export default function Home() {
   return (
-    <div className="{styles.container} max-w-screen-sm mx-auto">
+    <div className="{styles.container} mx-auto max-w-screen-sm">
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="mx-auto mt-10 prose">
+      <div className="prose mx-auto mt-10">
         <h1>Testing out tailwind typography</h1>
         <h2>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos,

diff --git a/pages/products/index.tsx b/pages/products/index.tsx
@@ -7,7 +7,7 @@ import { productsType } from '../../@types/product.types';
 const Products = ({ products }: productsType) => {
   return (
     <div className="flex flex-col justify-center">
-      <h1 className="py-6 text5xl text-center">Products Page</h1>
+      <h1 className="text5xl py-6 text-center">Products Page</h1>
       {products &&
         products.map((product) => {
           return (

diff --git a/yarn.lock b/yarn.lock
@@ -10956,6 +10956,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
+  integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
+
 "prettier@>=2.2.1 <=2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"