format tw macros via Tailwind functions config

frontend/prettier.config.js

@@ -16,4 +16,5 @@ module.exports = {
 
   plugins: ["prettier-plugin-tailwindcss"],
   tailwindAttributes: ["className", "class", "tw"],
+  tailwindFunctions: ["tw"],
 };

frontend/src/components/Button.tsx

@@ -1,20 +1,13 @@
 import tw, { styled } from "twin.macro";
 
 const Button = styled.button({
-  ...tw`
-    px-3 py-1.5 flex items-center gap-1 rounded shadow transition outline-none
-    disabled:(opacity-50 cursor-not-allowed) focus:ring
-  `,
+  ...tw`flex items-center gap-1 rounded px-3 py-1.5 shadow outline-none transition focus:ring disabled:cursor-not-allowed disabled:opacity-50`,
 
   variants: {
     color: {
       primary: tw`bg-brand-500 text-white ring-brand-500/40 hover:bg-brand-600 active:bg-brand-700`,
       danger: tw`bg-red-600 text-white ring-red-600/40 hover:bg-red-700 active:bg-red-800`,
-      white: tw`
-        bg-white border border-brand-300 text-gray-900 ring-brand-300/40
-        hover:(bg-brand-50 text-brand-950 border-brand-400)
-        active:bg-brand-75
-      `,
+      white: tw`border border-brand-300 bg-white text-gray-900 ring-brand-300/40 hover:border-brand-400 hover:bg-brand-50 hover:text-brand-950 active:bg-brand-75`,
     },
   },
 

frontend/src/components/CampaignCard/CampaignStatus.tsx

@@ -1,15 +1,15 @@
 import tw, { styled } from "twin.macro";
 
 const CampaignStatus = styled.button({
-  ...tw`ml-auto flex items-center gap-1 px-2 py-1.5 text-white rounded-[0.2rem] shadow transition hover:shadow-md`,
+  ...tw`ml-auto flex items-center gap-1 rounded-[0.2rem] px-2 py-1.5 text-white shadow transition hover:shadow-md`,
 
   variants: {
     status: {
-      pending: tw`text-black bg-[hsl(220, 60%, 90%)] shadow-[hsl(220, 60%, 90%)]!`,
+      pending: tw`bg-[hsl(220, 60%, 90%)] shadow-[hsl(220, 60%, 90%)]! text-black`,
       open: tw`bg-[hsl(220, 93%, 60%)] shadow-[hsla(220, 93%, 60%, 50%)]!`,
       closed: tw`bg-gray-100 text-black`,
-      offered: tw`bg-green-200 text-green-900 shadow-green-200! hover:bg-green-300`,
-      rejected: tw`bg-red-200 text-red-900 shadow-red-200!`,
+      offered: tw`shadow-green-200! bg-green-200 text-green-900 hover:bg-green-300`,
+      rejected: tw`shadow-red-200! bg-red-200 text-red-900`,
     },
   },
 

frontend/src/components/Card.tsx

@@ -5,7 +5,7 @@ const Card = styled.div({
 
   variants: {
     hoverable: {
-      true: tw`transition hover:(-translate-y-1 shadow-lg)`,
+      true: tw`transition hover:-translate-y-1 hover:shadow-lg`,
     },
   },
 });

frontend/src/components/Container.tsx

@@ -1,3 +1,3 @@
 import tw from "twin.macro";
 
-export default tw.div`flex flex-col flex-1 max-w-7xl mx-auto p-4`;
+export default tw.div`mx-auto flex max-w-7xl flex-1 flex-col p-4`;

frontend/src/components/Input.tsx

@@ -2,16 +2,7 @@ import tw from "twin.macro";
 
 import type { PropsWithChildren } from "react";
 
-const Input = tw.input`
-  form-input w-96 rounded-md
-  border-gray-300 shadow-sm
-  transition hocus:border-blue-300 focus:(ring ring-blue-200/50)
-
-  invalid:(
-    border-red-300 text-red-600 ring-red-200/50
-    hover:(border-red-400)
-  )
-`;
+const Input = tw.input`hocus:border-blue-300 form-input w-96 rounded-md border-gray-300 shadow-sm transition invalid:border-red-300 invalid:text-red-600 invalid:ring-red-200/50 invalid:hover:border-red-400 focus:ring focus:ring-blue-200/50`;
 const Label = tw.label`flex flex-col`;
 
 type LabelTextProps = {

frontend/src/components/Link.tsx

@@ -1,9 +1,5 @@
 import tw from "twin.macro";
 
-const Link = tw.a`
-  text-brand-600 transition
-  underline decoration-transparent
-  hover:(text-brand-700 decoration-current)
-`;
+const Link = tw.a`text-brand-600 underline decoration-transparent transition hover:text-brand-700 hover:decoration-current`;
 
 export default Link;

frontend/src/components/NavBar/AvatarButton.tsx

@@ -7,20 +7,10 @@ import tw, { styled } from "twin.macro";
 import Transition from "components/Transition";
 
 const ToggleButton = styled(Popover.Button, {
-  ...tw`
-    w-8 h-8 text-xs flex items-center justify-center
-    bg-slate-500/10 text-violet-700 font-semibold
-    rounded-full transition
-    hover:bg-slate-500/20 focus:(outline-none ring ring-indigo-600/50)
-  `,
+  ...tw`flex h-8 w-8 items-center justify-center rounded-full bg-slate-500/10 text-xs font-semibold text-violet-700 transition hover:bg-slate-500/20 focus:outline-none focus:ring focus:ring-indigo-600/50`,
 });
 
-const ItemButton = tw.button`
-  px-2 py-1 flex items-center justify-end gap-1
-  rounded-md
-  hover:(bg-gray-50 text-indigo-700)
-  focus-within:(outline-none ring ring-indigo-600/50)
-`;
+const ItemButton = tw.button`flex items-center justify-end gap-1 rounded-md px-2 py-1 focus-within:outline-none focus-within:ring focus-within:ring-indigo-600/50 hover:bg-gray-50 hover:text-indigo-700`;
 
 const AvatarButton = () => {
   const name = localStorage.getItem("name") ?? "";
@@ -45,10 +35,10 @@ const AvatarButton = () => {
         <ToggleButton>{initials}</ToggleButton>
         <Transition
           as={Fragment}
-          enter={tw`transition ease-out duration-200`}
-          enterFrom={tw`opacity-0 -translate-y-1`}
-          leave={tw`transition ease-in duration-150`}
-          leaveTo={tw`opacity-0 translate-y-0.5`}
+          enter={tw`transition duration-200 ease-out`}
+          enterFrom={tw`-translate-y-1 opacity-0`}
+          leave={tw`transition duration-150 ease-in`}
+          leaveTo={tw`translate-y-0.5 opacity-0`}
         >
           <Popover.Panel tw="absolute right-0 top-11 flex w-max flex-col overflow-hidden rounded bg-white shadow-md">
             <div tw="bg-gray-50 px-4 py-2 text-gray-500">

frontend/src/components/NavBar/index.tsx

@@ -14,18 +14,11 @@ import AvatarButton from "./AvatarButton";
 
 const NavButton = styled(NavLink, {
   ...tw`relative rounded px-2 py-1 text-slate-800`,
-  ...tw`ring-blue-400 transition-shadow focus-visible:(outline-none ring)`,
+  ...tw`ring-blue-400 transition-shadow focus-visible:outline-none focus-visible:ring`,
 
-  "&.active": tw`rounded from-blue-700/20 to-indigo-700/20 shadow bg-gradient-to-r`,
+  "&.active": tw`rounded bg-gradient-to-r from-blue-700/20 to-indigo-700/20 shadow`,
 
-  "&:not(.active)": tw`
-    before:(
-      absolute inset-0
-      from-blue-700 to-indigo-700 bg-gradient-to-r
-      rounded opacity-0 transition-opacity duration-100
-    )
-    hover:before:opacity-[0.075]
-  `,
+  "&:not(.active)": tw`before:absolute before:inset-0 before:rounded before:bg-gradient-to-r before:from-blue-700 before:to-indigo-700 before:opacity-0 before:transition-opacity before:duration-100 hover:before:opacity-[0.075]`,
 });
 
 const NavBar = ({ campaign }: { campaign: string }) => {

frontend/src/components/NavCard/NavItem.tsx

@@ -6,16 +6,12 @@ const NavItem = styled.div({
   ...tw`relative z-0 hover:before:opacity-20`,
   "&::before": {
     content: "",
-    ...tw`
-      absolute inset-0 z-[-1]
-      bg-gradient-to-r from-blue-300 to-violet-300
-      rounded opacity-0 transition-opacity
-    `,
+    ...tw`absolute inset-0 z-[-1] rounded bg-gradient-to-r from-blue-300 to-violet-300 opacity-0 transition-opacity`,
   },
 
   variants: {
     active: {
-      true: tw`shadow-sm before:opacity-30!`,
+      true: tw`before:opacity-30! shadow-sm`,
     },
   },
 });

frontend/src/components/Tabs.tsx

@@ -19,14 +19,11 @@ const TabList = styled(Tab.List, {
 });
 
 const TabButton = styled("button", {
-  ...tw`
-    px-3 py-2 border border-transparent rounded outline-none transition
-    focus:(ring border-indigo-500) ring-blue-600 ring-opacity-30
-  `,
+  ...tw`rounded border border-transparent px-3 py-2 outline-none ring-blue-600 ring-opacity-30 transition focus:border-indigo-500 focus:ring`,
 
   variants: {
     active: {
-      true: tw`shadow bg-white border-gray-300 text-indigo-600 hover:(border-indigo-600 text-indigo-700)`,
+      true: tw`border-gray-300 bg-white text-indigo-600 shadow hover:border-indigo-600 hover:text-indigo-700`,
       false: tw`text-gray-700 hover:text-indigo-600`,
     },
   },

frontend/src/components/Textarea.tsx

@@ -1,13 +1,7 @@
 import tw, { styled } from "twin.macro";
 
 const styles = {
-  ...tw`
-    form-textarea block w-full rounded-md
-    border-gray-300 shadow-sm
-    transition
-    hover:border-blue-300
-    focus:(border-blue-300 ring ring-blue-200 ring-opacity-50)
-  `,
+  ...tw`form-textarea block w-full rounded-md border-gray-300 shadow-sm transition hover:border-blue-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50`,
 
   variants: {
     size: {
@@ -20,9 +14,9 @@ const styles = {
 const Textarea = styled("textarea", styles);
 const Wrapper = styled("label", {
   ...styles,
-  ...tw`p-0 overflow-hidden`,
+  ...tw`overflow-hidden p-0`,
 });
-const Header = tw.header`px-3 py-2 flex items-center bg-gray-100 border-b border-gray-200`;
+const Header = tw.header`flex items-center border-b border-gray-200 bg-gray-100 px-3 py-2`;
 
 export default Object.assign(Textarea, {
   Wrapper,

frontend/src/components/Toast.tsx

@@ -11,7 +11,7 @@ import type { Toast as ToastObject } from "react-hot-toast";
 const ButtonContainer = styled("div", tw`border-l border-gray-200`);
 
 const ToastContainer = styled("div", {
-  ...tw`flex w-full max-w-md bg-white rounded border shadow`,
+  ...tw`flex w-full max-w-md rounded border bg-white shadow`,
 
   variants: {
     type: {
@@ -46,9 +46,9 @@ const Toast = ({ t, title, description, type = "notification" }: Props) => (
     show={t.visible}
     appear
     enter={tw`duration-200 ease-out`}
-    enterFrom={tw`opacity-0 scale-95`}
+    enterFrom={tw`scale-95 opacity-0`}
     leave={tw`duration-150 ease-in`}
-    leaveTo={tw`opacity-0 scale-95`}
+    leaveTo={tw`scale-95 opacity-0`}
   >
     <ToastContainer type={type}>
       <div tw="flex flex-1 flex-col px-4 py-3">

frontend/src/pages/admin/review/finalise_candidates/index.tsx

@@ -32,7 +32,7 @@ import type {
 } from "types/api";
 import type { DropFirst } from "types/util";
 
-const Icon = styled.span(tw`inline w-4 h-4`);
+const Icon = styled.span(tw`inline h-4 w-4`);
 const tabIcons: { [status in ApplicationStatus]?: ReactNode } = {
   Success: <Icon as={CheckIcon} tw="text-green-600" />,
   Rejected: <Icon as={XMarkIcon} tw="text-red-600" />,

frontend/src/pages/dashboard/CampaignGrid/CampaignLoading.tsx

@@ -4,7 +4,7 @@ import PulsingBar from "components/PulsingBar";
 import { Pulse, pulseCss } from "styles/animations";
 
 const Button = styled(Pulse, {
-  ...tw`ml-auto px-2 py-1.5 text-transparent rounded-[0.2rem]`,
+  ...tw`ml-auto rounded-[0.2rem] px-2 py-1.5 text-transparent`,
   ...pulseCss,
 
   variants: {

frontend/src/pages/dashboard/index.tsx

@@ -12,7 +12,7 @@ import CampaignGrid from "./CampaignGrid";
 
 import type { CampaignWithRoles, Organisation } from "types/api";
 
-const Heading = tw.h2`my-3 font-semibold text-2xl`;
+const Heading = tw.h2`my-3 text-2xl font-semibold`;
 
 const Dashboard = () => {
   const navigate = useNavigate();

frontend/src/pages/landing/components/Campaigns/Campaign.tsx

@@ -11,7 +11,7 @@ const Bar = ({
 }: HTMLAttributes<HTMLDivElement> & { transitionDelay: number }) => (
   <Transition.Child
     as={Fragment}
-    enter={tw`duration-500 transition-[width]`}
+    enter={tw`transition-[width] duration-500`}
     enterFrom={tw`w-0!`}
   >
     <div
@@ -24,12 +24,12 @@ const Bar = ({
 );
 
 const Button = styled.div({
-  ...tw`ml-auto px-2 py-1.5 rounded-[0.2rem]`,
+  ...tw`ml-auto rounded-[0.2rem] px-2 py-1.5`,
 
   variants: {
     status: {
       pending: tw`bg-[hsl(220, 60%, 90%)] text-[hsl(220, 60%, 25%)]`,
-      open: tw`text-white bg-[hsl(220, 93%, 60%)]`,
+      open: tw`bg-[hsl(220, 93%, 60%)] text-white`,
     },
   },
 });

frontend/src/pages/landing/components/Campaigns/index.tsx

@@ -9,15 +9,11 @@ import Campaign from "./Campaign";
 import compclub from "./compclub.png";
 
 const Container = styled.div({
-  ...tw`
-    absolute top-1/2 right-[50px] w-[650px] h-[600px]
-    flex items-center justify-center
-    -translate-y-1/2 z-[-1]
-  `,
+  ...tw`absolute right-[50px] top-1/2 z-[-1] flex h-[600px] w-[650px] -translate-y-1/2 items-center justify-center`,
   perspective: 700,
 });
 
-const Heading = tw.h1`my-3 rounded bg-black/[0.15] font-bold text-xl h-[1em]`;
+const Heading = tw.h1`my-3 h-[1em] rounded bg-black/[0.15] text-xl font-bold`;
 const Row = tw.div`flex gap-4`;
 
 const DEFAULT_ROTATE_X = 7.5;
@@ -114,7 +110,7 @@ const Campaigns = forwardRef<HTMLDivElement, Props>(
               as={Heading}
               appear
               show
-              enter={tw`transition-[width] duration-[600ms] delay-[400ms]`}
+              enter={tw`transition-[width] delay-[400ms] duration-[600ms]`}
               enterFrom={tw`w-0`}
               enterTo={tw`w-56`}
             />

frontend/src/pages/landing/components/DashboardButton.tsx

@@ -3,21 +3,12 @@ import tw, { styled } from "twin.macro";
 
 import type { ComponentProps, ElementType, PropsWithChildren } from "react";
 
-const Button = tw.button`
-  relative flex items-center justify-center
-  w-max px-3 py-2
-  rounded border-0 text-[#191d24] font-normal outline-none ring-blue-500 transition
-  hover:text-black focus-visible:(text-black ring)
-`;
-
-const Bg = tw.div`
-  absolute inset-0 z-[-1]
-  rounded transition
-  from-fuchsia-200 to-indigo-200 bg-gradient-120
-`;
+const Button = tw.button`relative flex w-max items-center justify-center rounded border-0 px-3 py-2 font-normal text-[#191d24] outline-none ring-blue-500 transition hover:text-black focus-visible:text-black focus-visible:ring`;
+
+const Bg = tw.div`absolute inset-0 z-[-1] rounded from-fuchsia-200 to-indigo-200 transition bg-gradient-120`;
 
 const ButtonShadow = styled(Bg, {
-  ...tw`blur-sm filter group-hover:(translate-y-0.5 blur) group-focus-visible:blur group-active:blur-sm`,
+  ...tw`blur-sm filter group-hover:translate-y-0.5 group-hover:blur group-focus-visible:blur group-active:blur-sm`,
 });
 
 const ButtonBg = styled(Bg, {

frontend/src/pages/landing/index.tsx

@@ -62,7 +62,7 @@ const Landing = () => {
             as={Fragment}
             appear
             show
-            enter={tw`transition duration-[600ms] delay-[250ms]`}
+            enter={tw`transition delay-[250ms] duration-[600ms]`}
             enterFrom={tw`translate-y-4 opacity-0`}
             enterTo={tw`text-2xl`}
           >

frontend/src/pages/signup/SignupGenderSelection.tsx

@@ -3,11 +3,7 @@ import tw from "twin.macro";
 import type { ReactNode } from "react";
 import type React from "react";
 
-const Select = tw.select`
-  form-select w-96 rounded-md
-  border-gray-300 shadow-sm
-  transition hocus:border-blue-300 focus:(ring ring-blue-200/50)
-`;
+const Select = tw.select`hocus:border-blue-300 form-select w-96 rounded-md border-gray-300 shadow-sm transition focus:ring focus:ring-blue-200/50`;
 
 const Label = tw.label`flex flex-col`;
 const LabelText: React.FC<{ children: ReactNode }> = ({ children }) => (