Tailwind Automatic class sorting with Prettier

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!]!
+}

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>
 	);
 };

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"

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}
 				/>

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 })} />

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 />

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">

apps/web/components/organisms/header/header.tsx

@@ -7,20 +7,20 @@ 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 = () => {
 	const { user, isLoading } = useUser();
 	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>

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>

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>

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>

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')}

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>

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} />

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">

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": {

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}

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>
 	);

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>
 	);

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" />;
 };

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>
 	);
 };

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>
 	);

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>
 	);

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}

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>
 	);