From e5083548abb315d53b77098bba9cdbd7eb003897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanis=C5=82aw=20Synowiec?= <stasyn1410@gmail.com>
Date: Thu, 16 Mar 2023 12:23:07 +0100
Subject: [PATCH] add: tailwind Automatic class sorting with Prettier

---
 apps/api/schema.gql                           | 30 ++++++++-----------
 apps/web/components/atoms/navbar/navbar.tsx   |  2 +-
 .../molecules/challengeItem/challengeItem.tsx |  8 ++---
 .../components/molecules/editor/editor.tsx    |  2 +-
 .../molecules/fileInput/fileInput.tsx         |  2 +-
 apps/web/components/molecules/modal/modal.tsx | 12 ++++----
 .../dropDownBurgerMenu/dropDownBurgerMenu.tsx |  4 +--
 .../components/organisms/header/header.tsx    | 10 +++----
 .../headerUserLoggedInContent.tsx             |  6 ++--
 .../headerUserLoginContent.tsx                |  2 +-
 .../organisms/loginModal/loginModal.tsx       |  2 +-
 .../newChallengeForm/newChallengeForm.tsx     | 14 ++++-----
 .../templates/challenge/new/newChallenge.tsx  |  2 +-
 .../challenge/single/singleChallenge.tsx      |  4 +--
 apps/web/components/templates/errors/404.tsx  |  4 +--
 package.json                                  |  1 +
 .../ui/components/atoms/button/button.tsx     |  2 +-
 packages/ui/components/atoms/card/card.tsx    |  2 +-
 .../atoms/categoryTag/categoryTag.tsx         |  2 +-
 .../ui/components/atoms/divider/divider.tsx   |  2 +-
 .../dropdownMenuContent.tsx                   |  2 +-
 .../dropdownMenuItem/dropdownMenuItem.tsx     |  2 +-
 .../dropdownMenuTrigger.tsx                   |  2 +-
 .../atoms/imgPreview/imgPreview.tsx           |  6 ++--
 .../components/atoms/label/label.stories.tsx  |  4 +--
 packages/ui/components/atoms/label/label.tsx  |  2 +-
 packages/ui/components/atoms/link/link.tsx    |  2 +-
 .../select/selectButton/selectButton.tsx      |  2 +-
 .../select/selectOption/selectOption.tsx      |  8 ++---
 .../molecules/checkbox/checkbox.tsx           |  2 +-
 .../components/molecules/spinner/spinner.tsx  |  2 +-
 .../ui/components/organisms/select/select.tsx |  2 +-
 yarn.lock                                     |  5 ++++
 33 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/apps/api/schema.gql b/apps/api/schema.gql
index f5c4b9e..61a61d9 100644
--- a/apps/api/schema.gql
+++ b/apps/api/schema.gql
@@ -1,8 +1,6 @@
-"""
-Auth0 user info
-"""
+"""Auth0 user info"""
 type AuthInfo {
-	sub: String
+  sub: String
 }
 
 """
@@ -16,23 +14,21 @@ A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the `dat
 scalar DateTime
 
 type Query {
-	allUsers: [User!]!
+  allUsers: [User!]!
 
-	"""
-	Auth0 context info
-	"""
-	authInfo: AuthInfo
+  """Auth0 context info"""
+  authInfo: AuthInfo
 }
 
 type Task {
-	description: String!
-	id: ID!
-	title: String!
+  description: String!
+  id: ID!
+  title: String!
 }
 
 type User {
-	email: String!
-	id: ID!
-	name: String!
-	postedTasks: [Task!]!
-}
+  email: String!
+  id: ID!
+  name: String!
+  postedTasks: [Task!]!
+}
\ No newline at end of file
diff --git a/apps/web/components/atoms/navbar/navbar.tsx b/apps/web/components/atoms/navbar/navbar.tsx
index e26f12c..b41e1a3 100644
--- a/apps/web/components/atoms/navbar/navbar.tsx
+++ b/apps/web/components/atoms/navbar/navbar.tsx
@@ -7,7 +7,7 @@ type NavbarProps = {
 export const Navbar = ({ children }: NavbarProps) => {
 	return (
 		<nav>
-			<ul className="list-none flex flex-col lg:flex-row gap-5">{children}</ul>
+			<ul className="flex list-none flex-col gap-5 lg:flex-row">{children}</ul>
 		</nav>
 	);
 };
diff --git a/apps/web/components/molecules/challengeItem/challengeItem.tsx b/apps/web/components/molecules/challengeItem/challengeItem.tsx
index 95309ad..c6330c0 100644
--- a/apps/web/components/molecules/challengeItem/challengeItem.tsx
+++ b/apps/web/components/molecules/challengeItem/challengeItem.tsx
@@ -19,13 +19,13 @@ export const ChallengeItem = ({
 		<li className="mb-5">
 			<a href={`/challenge/${id}`}>
 				<Card tag="div">
-					<div className="flex flex-col lg:flex-row pb-2">
+					<div className="flex flex-col pb-2 lg:flex-row">
 						<Image
 							src={image}
 							alt=""
 							width="120"
 							height="120"
-							className="w-full h-full rounded-lg"
+							className="h-full w-full rounded-lg"
 						/>
 						<div className="lg:px-5">
 							<Heading tag="h2" size="large" className="font-bold	">
@@ -37,7 +37,7 @@ export const ChallengeItem = ({
 						</div>
 					</div>
 					<div className="flex items-center">
-						<ChartBarIcon className="h-5 w-5 mr-1" />
+						<ChartBarIcon className="mr-1 h-5 w-5" />
 						<Text size="medium" variant="default" tag="p" position="left">
 							{difficulty}
 						</Text>
@@ -48,7 +48,7 @@ export const ChallengeItem = ({
 								return (
 									<svg
 										aria-hidden="true"
-										className={clsx('w-5 h-5', starClass)}
+										className={clsx('h-5 w-5', starClass)}
 										fill="currentColor"
 										viewBox="0 0 20 20"
 										xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/components/molecules/editor/editor.tsx b/apps/web/components/molecules/editor/editor.tsx
index 9d064af..c98e8ac 100644
--- a/apps/web/components/molecules/editor/editor.tsx
+++ b/apps/web/components/molecules/editor/editor.tsx
@@ -58,7 +58,7 @@ export const Editor = ({ initialEditorState, onChange }: EditorProps) => {
 				<RichTextPlugin
 					placeholder=""
 					contentEditable={
-						<ContentEditable className="p-2 mt-2 border-2 rounded-md min-h-100" />
+						<ContentEditable className="min-h-100 mt-2 rounded-md border-2 p-2" />
 					}
 					ErrorBoundary={LexicalErrorBoundary}
 				/>
diff --git a/apps/web/components/molecules/fileInput/fileInput.tsx b/apps/web/components/molecules/fileInput/fileInput.tsx
index 48bcf70..962909f 100644
--- a/apps/web/components/molecules/fileInput/fileInput.tsx
+++ b/apps/web/components/molecules/fileInput/fileInput.tsx
@@ -19,7 +19,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
 
 		return (
 			<div
-				className="h-full cursor-pointer flex flex-col justify-start items-center"
+				className="flex h-full cursor-pointer flex-col items-center justify-start"
 				{...getRootProps()}
 			>
 				<input ref={ref} {...getInputProps({ name, onChange })} />
diff --git a/apps/web/components/molecules/modal/modal.tsx b/apps/web/components/molecules/modal/modal.tsx
index a4416e4..0f91b41 100644
--- a/apps/web/components/molecules/modal/modal.tsx
+++ b/apps/web/components/molecules/modal/modal.tsx
@@ -27,28 +27,28 @@ export const Modal = ({
 	return (
 		<div
 			id={id}
-			className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center bg-white/80 z-20"
+			className="fixed top-0 left-0 z-20 flex h-screen w-screen items-center justify-center bg-white/80"
 			role="modal"
 			aria-modal
 			aria-labelledby={`${id}-title`}
 		>
 			<div
 				onClick={onClickHandler}
-				className="w-full h-full absolute top-0 left-0 z-10"
+				className="absolute top-0 left-0 z-10 h-full w-full"
 			></div>
-			<div className="bg-white z-40 w-11/12 mx-auto max-w-7xl">
+			<div className="z-40 mx-auto w-11/12 max-w-7xl bg-white">
 				<Card tag="div">
-					<div className="flex flex-col md:flex-row items-center justify-between border-b border-gray-200 pt-3 pb-6">
+					<div className="flex flex-col items-center justify-between border-b border-gray-200 pt-3 pb-6 md:flex-row">
 						<Heading
 							tag="h2"
 							size="large"
-							className="text-4xl font-bold text-center tracking-tight text-gray-900 md:pr-20 order-2 md:order-1 md:text-left"
+							className="order-2 text-center text-4xl font-bold tracking-tight text-gray-900 md:order-1 md:pr-20 md:text-left"
 							id={`${id}-title`}
 						>
 							{title}
 						</Heading>
 						<button
-							className="w-8 h-8 absolute top-4 right-4"
+							className="absolute top-4 right-4 h-8 w-8"
 							onClick={onClickHandler}
 						>
 							<XMarkIcon />
diff --git a/apps/web/components/organisms/dropDownBurgerMenu/dropDownBurgerMenu.tsx b/apps/web/components/organisms/dropDownBurgerMenu/dropDownBurgerMenu.tsx
index a2f999f..2468311 100644
--- a/apps/web/components/organisms/dropDownBurgerMenu/dropDownBurgerMenu.tsx
+++ b/apps/web/components/organisms/dropDownBurgerMenu/dropDownBurgerMenu.tsx
@@ -17,14 +17,14 @@ export const DropDownBurgerMenu = ({
 	const { user, isLoading } = useUser();
 
 	return (
-		<div className="flex flex-col justify-center  items-center top-0 left-0 absolute h-screen w-screen bg-white z-50">
+		<div className="absolute top-0 left-0  z-50 flex h-screen w-screen flex-col items-center justify-center bg-white">
 			<button onClick={hideBurgerMenu} className="absolute top-10 right-10">
 				<Image alt="" src={ExitIcon} width={50} height={50} />
 				<VisuallyHidden>exit</VisuallyHidden>
 			</button>
 			{!isLoading && !user && <HeaderUserLoginContent />}
 			{!isLoading && user && (
-				<div className="flex gap-4 flex-col justify-center items-center font-semibold text-blue-600">
+				<div className="flex flex-col items-center justify-center gap-4 font-semibold text-blue-600">
 					{children}
 
 					<Link href="/challenge/new" variant="primary">
diff --git a/apps/web/components/organisms/header/header.tsx b/apps/web/components/organisms/header/header.tsx
index df9bca6..df40504 100644
--- a/apps/web/components/organisms/header/header.tsx
+++ b/apps/web/components/organisms/header/header.tsx
@@ -7,7 +7,7 @@ import { DropDownBurgerMenu } from 'organisms/dropDownBurgerMenu/dropDownBurgerM
 import { useHamburgerMenu } from 'organisms/dropDownBurgerMenu/useHamburgerMenu';
 import { HeaderUserLoginContent } from 'organisms/header/headerUserLoginContent/headerUserLoginContent';
 import { HeaderUserLoggedInContent } from 'organisms/header/headerUserLoggedInContent/headerUserLoggedInContent';
-import { VisuallyHidden, Heading } from 'ui';
+import { Heading, VisuallyHidden } from 'ui';
 import Link from 'next/link';
 
 export const Header = () => {
@@ -15,12 +15,12 @@ export const Header = () => {
 	const { closeBurgerMenu, isBurgerMenuActive, openBurgerMenu } =
 		useHamburgerMenu();
 	return (
-		<header className="flex  px-12 py-4  justify-between items-center w-full sticky shadow-xl z-10">
+		<header className="sticky z-10 flex w-full items-center justify-between px-12 py-4 shadow-xl">
 			<Link href="/">
 				<Heading
 					tag="h1"
 					size="large"
-					className="font-bold text-2xl whitespace-nowrap mr-20"
+					className="mr-20 whitespace-nowrap text-2xl font-bold"
 				>
 					Start-Coding
 				</Heading>
@@ -37,8 +37,8 @@ export const Header = () => {
 					</Navbar>
 				</DropDownBurgerMenu>
 			)}
-			<div className="hidden lg:flex items-center justify-between w-full">
-				<div className="flex items-center justify-between max-w-sm w-full">
+			<div className="hidden w-full items-center justify-between lg:flex">
+				<div className="flex w-full max-w-sm items-center justify-between">
 					<Navbar>
 						<NavLink link={{ name: 'Zadania', href: '/challenges/all' }} />
 					</Navbar>
diff --git a/apps/web/components/organisms/header/headerUserLoggedInContent/headerUserLoggedInContent.tsx b/apps/web/components/organisms/header/headerUserLoggedInContent/headerUserLoggedInContent.tsx
index ccb3676..7b58ef8 100644
--- a/apps/web/components/organisms/header/headerUserLoggedInContent/headerUserLoggedInContent.tsx
+++ b/apps/web/components/organisms/header/headerUserLoggedInContent/headerUserLoggedInContent.tsx
@@ -17,8 +17,8 @@ export const HeaderUserLoggedInContent = ({
 	const router = useRouter();
 	const isOnChallengeNewPage = router.pathname.includes('/challenge/new');
 	return (
-		<div className="flex flex-col lg:flex-row items-center">
-			<div className="h-10 w-10 mr-2 ">
+		<div className="flex flex-col items-center lg:flex-row">
+			<div className="mr-2 h-10 w-10 ">
 				{user.avatarSrc ? (
 					<Image
 						className="rounded-full border"
@@ -37,7 +37,7 @@ export const HeaderUserLoggedInContent = ({
 					/>
 				)}
 			</div>
-			<p className="p-0 m-0">Witaj, {user.nickname}!</p>
+			<p className="m-0 p-0">Witaj, {user.nickname}!</p>
 			<DropdownMenu>
 				<GenericLink href="/profile">
 					<DropdownMenuItem>Profil</DropdownMenuItem>
diff --git a/apps/web/components/organisms/header/headerUserLoginContent/headerUserLoginContent.tsx b/apps/web/components/organisms/header/headerUserLoginContent/headerUserLoginContent.tsx
index 1ebc62e..6a34877 100644
--- a/apps/web/components/organisms/header/headerUserLoginContent/headerUserLoginContent.tsx
+++ b/apps/web/components/organisms/header/headerUserLoginContent/headerUserLoginContent.tsx
@@ -5,7 +5,7 @@ export const HeaderUserLoginContent = () => {
 	return (
 		<GenericLink href="/api/auth/login">
 			<div className="flex items-center">
-				<div className="w-4 h-4 m-2">
+				<div className="m-2 h-4 w-4">
 					<UserIcon />
 				</div>
 				<span>Zaloguj się</span>
diff --git a/apps/web/components/organisms/loginModal/loginModal.tsx b/apps/web/components/organisms/loginModal/loginModal.tsx
index e670bbe..ab62b8d 100644
--- a/apps/web/components/organisms/loginModal/loginModal.tsx
+++ b/apps/web/components/organisms/loginModal/loginModal.tsx
@@ -16,7 +16,7 @@ export const LoginModal = ({ isOpen, onClose }: LoginModalProps) => {
 			isOpen={isOpen}
 			closeHandler={onClickHandler}
 		>
-			<div className="pt-5 flex justify-center items-center">
+			<div className="flex items-center justify-center pt-5">
 				<Link href="/api/auth/login" variant="primary">
 					Zaloguj się
 				</Link>
diff --git a/apps/web/components/organisms/newChallengeForm/newChallengeForm.tsx b/apps/web/components/organisms/newChallengeForm/newChallengeForm.tsx
index 7596333..0bb8f40 100644
--- a/apps/web/components/organisms/newChallengeForm/newChallengeForm.tsx
+++ b/apps/web/components/organisms/newChallengeForm/newChallengeForm.tsx
@@ -70,21 +70,21 @@ export const NewChallengeForm = () => {
 	return (
 		<form
 			onSubmit={handleSubmit(onFormSubmit)}
-			className="flex flex-col items-center md:justify-start w-full"
+			className="flex w-full flex-col items-center md:justify-start"
 		>
-			<div className="max-w-3xl w-full flex flex-col gap-4">
+			<div className="flex w-full max-w-3xl flex-col gap-4">
 				<Card tag="section">
-					<div className="flex gap-3 flex-col md:flex-row">
-						<div className="min-h-full border-2 rounded-xl border-purple-700 p-4 flex-col items-center">
+					<div className="flex flex-col gap-3 md:flex-row">
+						<div className="min-h-full flex-col items-center rounded-xl border-2 border-purple-700 p-4">
 							<FileInput handleChange={handleImgUpload} name="image">
 								{!watch('image')
 									? 'Dodaj miniaturkę dla zadania'
 									: 'Zmień miniaturkę'}
 							</FileInput>
 						</div>
-						<div className="flex flex-col w-full">
-							<div className="flex flex-col mb-2 md:mb-0 md:flex-row">
-								<div className="w-full mr-2">
+						<div className="flex w-full flex-col">
+							<div className="mb-2 flex flex-col md:mb-0 md:flex-row">
+								<div className="mr-2 w-full">
 									<fieldset className="mb-4">
 										<Input
 											{...register('title')}
diff --git a/apps/web/components/templates/challenge/new/newChallenge.tsx b/apps/web/components/templates/challenge/new/newChallenge.tsx
index ccf9805..b92c150 100644
--- a/apps/web/components/templates/challenge/new/newChallenge.tsx
+++ b/apps/web/components/templates/challenge/new/newChallenge.tsx
@@ -5,7 +5,7 @@ import { DndProvider } from 'react-dnd';
 
 export const NewChallengePage = () => {
 	return (
-		<section className="p-8 flex justify-center items-center">
+		<section className="flex items-center justify-center p-8">
 			<DndProvider backend={HTML5Backend}>
 				<NewChallengeForm />
 			</DndProvider>
diff --git a/apps/web/components/templates/challenge/single/singleChallenge.tsx b/apps/web/components/templates/challenge/single/singleChallenge.tsx
index e5707c5..9713867 100644
--- a/apps/web/components/templates/challenge/single/singleChallenge.tsx
+++ b/apps/web/components/templates/challenge/single/singleChallenge.tsx
@@ -52,9 +52,9 @@ export const SingleChallengePage = ({
 						alt=""
 						width="1200"
 						height="1200"
-						className="w-full h-full md:w-1/3 rounded-lg"
+						className="h-full w-full rounded-lg md:w-1/3"
 					/>
-					<div className="md:pl-10 pt-5 md:pt-0">
+					<div className="pt-5 md:pl-10 md:pt-0">
 						<ul className="pb-5">
 							{challenge?.tags.map((tag, id) => (
 								<CategoryTag label={tag} key={id} />
diff --git a/apps/web/components/templates/errors/404.tsx b/apps/web/components/templates/errors/404.tsx
index 727832d..a80f813 100644
--- a/apps/web/components/templates/errors/404.tsx
+++ b/apps/web/components/templates/errors/404.tsx
@@ -2,8 +2,8 @@ import { Heading, Link, Text } from 'ui';
 
 export const Error404 = () => {
 	return (
-		<section className="flex h-[85vh] md:h-[90vh] flex-col justify-center items-center">
-			<Heading tag="h2" size="large" className="text-4xl pb-5">
+		<section className="flex h-[85vh] flex-col items-center justify-center md:h-[90vh]">
+			<Heading tag="h2" size="large" className="pb-5 text-4xl">
 				Error 404
 			</Heading>
 			<Text size="medium" variant="default" tag="p">
diff --git a/package.json b/package.json
index 1a279f8..84f664b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"husky": "^8.0.0",
 		"lint-staged": "^13.0.3",
 		"prettier": "^2.7.1",
+		"prettier-plugin-tailwindcss": "^0.2.4",
 		"turbo": "^1.7.0"
 	},
 	"engines": {
diff --git a/packages/ui/components/atoms/button/button.tsx b/packages/ui/components/atoms/button/button.tsx
index 420f017..12c79fa 100644
--- a/packages/ui/components/atoms/button/button.tsx
+++ b/packages/ui/components/atoms/button/button.tsx
@@ -26,7 +26,7 @@ export const Button = ({
 }: ButtonProps) => {
 	return (
 		<button
-			className={clsx(variants[variant], 'p-2 border-2 rounded-2xl', {
+			className={clsx(variants[variant], 'rounded-2xl border-2 p-2', {
 				'w-full': fullWidth,
 			})}
 			onClick={onClick}
diff --git a/packages/ui/components/atoms/card/card.tsx b/packages/ui/components/atoms/card/card.tsx
index b7740eb..31820e0 100644
--- a/packages/ui/components/atoms/card/card.tsx
+++ b/packages/ui/components/atoms/card/card.tsx
@@ -9,7 +9,7 @@ type CardProps = {
 
 export const Card = ({ children, tag: Tag }: CardProps) => {
 	return (
-		<Tag className="p-6 border border-gray-200 shadow-md rounded-lg dark:border-gray-300 w-full relative">
+		<Tag className="relative w-full rounded-lg border border-gray-200 p-6 shadow-md dark:border-gray-300">
 			{children}
 		</Tag>
 	);
diff --git a/packages/ui/components/atoms/categoryTag/categoryTag.tsx b/packages/ui/components/atoms/categoryTag/categoryTag.tsx
index f053c71..b3cbe0c 100644
--- a/packages/ui/components/atoms/categoryTag/categoryTag.tsx
+++ b/packages/ui/components/atoms/categoryTag/categoryTag.tsx
@@ -4,7 +4,7 @@ type TagProps = {
 
 export const CategoryTag = ({ label }: TagProps) => {
 	return (
-		<li className="inline border border-gray-300 rounded-lg mr-2 mt-3 py-1 px-2 bg-gray-100">
+		<li className="mr-2 mt-3 inline rounded-lg border border-gray-300 bg-gray-100 py-1 px-2">
 			{label}
 		</li>
 	);
diff --git a/packages/ui/components/atoms/divider/divider.tsx b/packages/ui/components/atoms/divider/divider.tsx
index e832934..56af853 100644
--- a/packages/ui/components/atoms/divider/divider.tsx
+++ b/packages/ui/components/atoms/divider/divider.tsx
@@ -1,3 +1,3 @@
 export const Divider = () => {
-	return <div className="h-0 border border-gray-200 px-2 w-full" />;
+	return <div className="h-0 w-full border border-gray-200 px-2" />;
 };
diff --git a/packages/ui/components/atoms/dropdownMenu/dropdownMenuContent/dropdownMenuContent.tsx b/packages/ui/components/atoms/dropdownMenu/dropdownMenuContent/dropdownMenuContent.tsx
index 4f46f89..bd38d3e 100644
--- a/packages/ui/components/atoms/dropdownMenu/dropdownMenuContent/dropdownMenuContent.tsx
+++ b/packages/ui/components/atoms/dropdownMenu/dropdownMenuContent/dropdownMenuContent.tsx
@@ -8,7 +8,7 @@ type DropdownMenuContentProps = {
 export const DropdownMenuContent = ({ children }: DropdownMenuContentProps) => {
 	return (
 		<Portal>
-			<Content className="border-2 max-w-xs w-full">{children}</Content>
+			<Content className="w-full max-w-xs border-2">{children}</Content>
 		</Portal>
 	);
 };
diff --git a/packages/ui/components/atoms/dropdownMenu/dropdownMenuItem/dropdownMenuItem.tsx b/packages/ui/components/atoms/dropdownMenu/dropdownMenuItem/dropdownMenuItem.tsx
index f0ba734..1a2cfa9 100644
--- a/packages/ui/components/atoms/dropdownMenu/dropdownMenuItem/dropdownMenuItem.tsx
+++ b/packages/ui/components/atoms/dropdownMenu/dropdownMenuItem/dropdownMenuItem.tsx
@@ -7,7 +7,7 @@ type DropdownMenuItemProps = {
 
 export const DropdownMenuItem = ({ children }: DropdownMenuItemProps) => {
 	return (
-		<Item className="p-4 bg-white hover:bg-gray-100 cursor-pointer">
+		<Item className="cursor-pointer bg-white p-4 hover:bg-gray-100">
 			{children}
 		</Item>
 	);
diff --git a/packages/ui/components/atoms/dropdownMenu/dropdownMenuTrigger/dropdownMenuTrigger.tsx b/packages/ui/components/atoms/dropdownMenu/dropdownMenuTrigger/dropdownMenuTrigger.tsx
index e07ff83..21d8f51 100644
--- a/packages/ui/components/atoms/dropdownMenu/dropdownMenuTrigger/dropdownMenuTrigger.tsx
+++ b/packages/ui/components/atoms/dropdownMenu/dropdownMenuTrigger/dropdownMenuTrigger.tsx
@@ -3,7 +3,7 @@ import { ReactComponent as MenuListDropdown } from '../../../icons/menu-list-dro
 
 export const DropdownMenuTrigger = () => {
 	return (
-		<Trigger className="w-12 h-12">
+		<Trigger className="h-12 w-12">
 			<MenuListDropdown />
 		</Trigger>
 	);
diff --git a/packages/ui/components/atoms/imgPreview/imgPreview.tsx b/packages/ui/components/atoms/imgPreview/imgPreview.tsx
index 1236455..6a22758 100644
--- a/packages/ui/components/atoms/imgPreview/imgPreview.tsx
+++ b/packages/ui/components/atoms/imgPreview/imgPreview.tsx
@@ -20,13 +20,13 @@ export const ImgPreview = ({
 }: ImgPreviewProps) => {
 	return (
 		<div
-			className={cx('w-full h-full', {
+			className={cx('h-full w-full', {
 				'max-h-16 max-w-xs ': size === 'small',
-				'max-h-4 max-w-4': size === 'big',
+				'max-w-4 max-h-4': size === 'big',
 			})}
 		>
 			<Image
-				className="w-auto h-auto"
+				className="h-auto w-auto"
 				src={src}
 				alt={alt}
 				height={height}
diff --git a/packages/ui/components/atoms/label/label.stories.tsx b/packages/ui/components/atoms/label/label.stories.tsx
index a1196cc..62fcfa7 100644
--- a/packages/ui/components/atoms/label/label.stories.tsx
+++ b/packages/ui/components/atoms/label/label.stories.tsx
@@ -10,7 +10,7 @@ export const Primary: ComponentStory<typeof Label> = (props) => {
 	return (
 		<div className="relative max-w-2xl">
 			<Label {...props}>
-				<input className="border  block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" />
+				<input className="border-1  peer block w-full appearance-none rounded-lg border bg-transparent px-2.5 pb-2.5 pt-4 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" />
 			</Label>
 		</div>
 	);
@@ -25,7 +25,7 @@ export const Disabled: ComponentStory<typeof Label> = (props) => {
 	return (
 		<div className="relative max-w-2xl">
 			<Label {...props}>
-				<input className="border  block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" />
+				<input className="border-1  peer block w-full appearance-none rounded-lg border bg-transparent px-2.5 pb-2.5 pt-4 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" />
 			</Label>
 		</div>
 	);
diff --git a/packages/ui/components/atoms/label/label.tsx b/packages/ui/components/atoms/label/label.tsx
index 8953784..33f40b3 100644
--- a/packages/ui/components/atoms/label/label.tsx
+++ b/packages/ui/components/atoms/label/label.tsx
@@ -16,7 +16,7 @@ export const Label = ({ children, id, label, disabled }: LabelProps) => {
 		},
 	);
 	return (
-		<div className="flex flex-col relative">
+		<div className="relative flex flex-col">
 			{children}
 			<label className={className} htmlFor={id}>
 				{label}
diff --git a/packages/ui/components/atoms/link/link.tsx b/packages/ui/components/atoms/link/link.tsx
index 5f933e4..348a82a 100644
--- a/packages/ui/components/atoms/link/link.tsx
+++ b/packages/ui/components/atoms/link/link.tsx
@@ -26,7 +26,7 @@ export const Link = ({
 	return (
 		<NextLink
 			href={href}
-			className={clsx(variants[variant], 'p-2 border-2 rounded-2xl', {
+			className={clsx(variants[variant], 'rounded-2xl border-2 p-2', {
 				'w-full': fullWidth,
 			})}
 			{...rest}
diff --git a/packages/ui/components/atoms/select/selectButton/selectButton.tsx b/packages/ui/components/atoms/select/selectButton/selectButton.tsx
index 4148bbf..95a22b1 100644
--- a/packages/ui/components/atoms/select/selectButton/selectButton.tsx
+++ b/packages/ui/components/atoms/select/selectButton/selectButton.tsx
@@ -25,7 +25,7 @@ export const SelectButton = ({
 	return (
 		<Listbox.Button className={cl}>
 			<span className="block truncate text-black">{label}</span>
-			<span className="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
+			<span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
 				<Selector />
 			</span>
 		</Listbox.Button>
diff --git a/packages/ui/components/atoms/select/selectOption/selectOption.tsx b/packages/ui/components/atoms/select/selectOption/selectOption.tsx
index bae5ce7..f59a1b0 100644
--- a/packages/ui/components/atoms/select/selectOption/selectOption.tsx
+++ b/packages/ui/components/atoms/select/selectOption/selectOption.tsx
@@ -18,16 +18,16 @@ export const SelectOption = ({ option }: SelectOptionProps) => {
 			{({ active, selected }) => (
 				<li
 					className={clsx(
-						'cursor-default select-none relative py-2 pl-3 pr-9 rounded-md',
+						'relative cursor-default select-none rounded-md py-2 pl-3 pr-9',
 						{
-							'text-white bg-primary': active,
+							'bg-primary text-white': active,
 							'text-gray-900': !active,
 						},
 					)}
 				>
 					<div className="flex items-center">
 						<span
-							className={clsx('flex items-center block truncate', {
+							className={clsx('block flex items-center truncate', {
 								'font-semibold': selected,
 								'font-normal': !selected,
 							})}
@@ -37,7 +37,7 @@ export const SelectOption = ({ option }: SelectOptionProps) => {
 						{selected && (
 							<span
 								className={clsx(
-									'absolute inset-y-0 right-0 flex items-center mr-3 pl-1.5',
+									'absolute inset-y-0 right-0 mr-3 flex items-center pl-1.5',
 									{
 										'text-white': active,
 										'text-indigo-600': !active,
diff --git a/packages/ui/components/molecules/checkbox/checkbox.tsx b/packages/ui/components/molecules/checkbox/checkbox.tsx
index 8d1284c..c42dcf4 100644
--- a/packages/ui/components/molecules/checkbox/checkbox.tsx
+++ b/packages/ui/components/molecules/checkbox/checkbox.tsx
@@ -12,7 +12,7 @@ export const Checkbox = ({ label }: CheckboxProps) => {
 				id={id}
 				name={id}
 				type="checkbox"
-				className="h-4 w-4 rounded-lg border-gray-200 text-indigo-600 dark:border-gray-300 focus:ring-indigo-500"
+				className="h-4 w-4 rounded-lg border-gray-200 text-indigo-600 focus:ring-indigo-500 dark:border-gray-300"
 			/>
 			<label htmlFor={id} className="ml-3 text-sm text-gray-600">
 				{label}
diff --git a/packages/ui/components/molecules/spinner/spinner.tsx b/packages/ui/components/molecules/spinner/spinner.tsx
index 13552ad..e1487c2 100644
--- a/packages/ui/components/molecules/spinner/spinner.tsx
+++ b/packages/ui/components/molecules/spinner/spinner.tsx
@@ -4,7 +4,7 @@ export const Spinner = () => {
 		<div>
 			<svg
 				aria-hidden="true"
-				className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+				className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
 				viewBox="0 0 100 101"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/ui/components/organisms/select/select.tsx b/packages/ui/components/organisms/select/select.tsx
index 885d648..48f43ce 100644
--- a/packages/ui/components/organisms/select/select.tsx
+++ b/packages/ui/components/organisms/select/select.tsx
@@ -58,7 +58,7 @@ export const Select = ({
 						>
 							<Listbox.Options
 								static
-								className="border border-gray-400 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+								className="max-h-56 overflow-auto rounded-md border border-gray-400 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
 							>
 								{options.map((option) => (
 									<SelectOption option={option} key={option.value} />
diff --git a/yarn.lock b/yarn.lock
index aa0995f..f8642c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14187,6 +14187,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
+prettier-plugin-tailwindcss@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.4.tgz#ed0ca759bc948eb2bc48b419c6e57eb2adabdb0a"
+  integrity sha512-wMyugRI2yD8gqmMpZSS8kTA0gGeKozX/R+w8iWE+yiCZL09zY0SvfiHfHabNhjGhzxlQ2S2VuTxPE3T72vppCQ==
+
 "prettier@>=2.2.1 <=2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"