diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 309308504..095ae4217 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,7 +5,6 @@
     "esbenp.prettier-vscode", // prettier plugin
     "dbaeumer.vscode-eslint", // eslint plugin
     "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
-    "heybourn.headwind", // automatically sort tailwind classes in predictable order, kinda like "prettier for tailwind",
     "ban.spellright", // Spell check for docs
     "fabianlauer.vs-code-xml-format" // xml formatter
   ]
diff --git a/components/Layout.tsx b/components/Layout.tsx
index debb22916..92765d060 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -14,7 +14,7 @@ const navigation = [
   {
     path: '/admin/saml/config',
     text: <span className='ml-4'>SAML Configurations</span>,
-    icon: <ShieldCheckIcon className='w-5 h-5' aria-hidden />,
+    icon: <ShieldCheckIcon className='h-5 w-5' aria-hidden />,
   },
 ];
 
@@ -67,10 +67,10 @@ function Layout({ children }: { children: ReactNode }) {
       </Head>
       <header
         role='banner'
-        className='fixed left-0 right-0 z-10 p-5 bg-white border-b md:px-12 dark:bg-gray-900 border-gray-900/10 dark:border-gray-300/10'>
+        className='fixed left-0 right-0 z-10 border-b border-gray-900/10 bg-white p-5 dark:border-gray-300/10 dark:bg-gray-900 md:px-12'>
         <div className='flex items-center justify-between'>
           <Link href='/'>
-            <a title='Go to dashboard' className='flex items-center ml-10 font-bold leading-10 md:ml-0'>
+            <a title='Go to dashboard' className='ml-10 flex items-center font-bold leading-10 md:ml-0'>
               <Image src={Logo} alt='BoxyHQ' layout='fixed' width={36} height={36} />
               <h1 className='ml-2 text-secondary hover:text-primary dark:text-white'>Jackson</h1>
             </a>
@@ -78,7 +78,7 @@ function Layout({ children }: { children: ReactNode }) {
           <div className='relative'>
             <button
               type='button'
-              className='flex items-center justify-center w-8 h-8 uppercase rounded-full bg-secondary text-cyan-50'
+              className='flex h-8 w-8 items-center justify-center rounded-full bg-secondary uppercase text-cyan-50'
               aria-label='user settings'
               aria-expanded={isOpen}
               onClick={() => setIsOpen(!isOpen)}>
@@ -86,14 +86,14 @@ function Layout({ children }: { children: ReactNode }) {
             </button>
             {isOpen && (
               <ul
-                className='absolute right-0 z-50 py-1 overflow-hidden text-sm font-semibold bg-white rounded-lg shadow-lg top-full ring-1 ring-slate-900/10 w-36 text-slate-700 dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300'
+                className='dark:highlight-white/5 absolute right-0 top-full z-50 w-36 overflow-hidden rounded-lg bg-white py-1 text-sm font-semibold text-slate-700 shadow-lg ring-1 ring-slate-900/10 dark:bg-slate-800 dark:text-slate-300 dark:ring-0'
                 ref={userDropDownRef}>
                 <li>
                   <button
                     type='button'
-                    className='flex items-center justify-center w-full h-8 px-2 py-1 cursor-pointer'
+                    className='flex h-8 w-full cursor-pointer items-center justify-center px-2 py-1'
                     onClick={() => signOut()}>
-                    <LogoutIcon className='w-5 h-5' aria-hidden />
+                    <LogoutIcon className='h-5 w-5' aria-hidden />
                     Log out
                   </button>
                 </li>
@@ -109,17 +109,17 @@ function Layout({ children }: { children: ReactNode }) {
         )}
         <nav role='navigation'>
           <button
-            className={`w-10 h-10 inline-flex items-center justify-center absolute top-5 md:hidden`}
+            className={`absolute top-5 inline-flex h-10 w-10 items-center justify-center md:hidden`}
             aria-expanded={isSideNavOpen}
             aria-controls='menu'
             onClick={() => setIsSideNavOpen((curState) => !curState)}>
             <span className='sr-only'>Menu</span>
-            <MenuIcon aria-hidden='true' className='w-6 h-6 text-black dark:text-slate-50'></MenuIcon>
+            <MenuIcon aria-hidden='true' className='h-6 w-6 text-black dark:text-slate-50'></MenuIcon>
           </button>
           <ul
-            className={`fixed top-0 bottom-0 left-0 w-60 p-6 border-r border-gray-900/10 dark:border-gray-300/10 transition-transform ${
+            className={`fixed top-0 bottom-0 left-0 w-60 border-r border-gray-900/10 p-6 transition-transform dark:border-gray-300/10 ${
               isSideNavOpen ? 'translate-x-0' : '-translate-x-full'
-            } md:translate-x-0 md:top-20 md:translate-y-[2px] bg-white dark:bg-gray-900`}
+            } bg-white dark:bg-gray-900 md:top-20 md:translate-x-0 md:translate-y-[2px]`}
             id='menu'
             ref={ref}>
             {navigation.map(({ path, text, icon }, index) => (
@@ -137,7 +137,7 @@ function Layout({ children }: { children: ReactNode }) {
       </header>
       <main
         role='main'
-        className='relative top-[81px] h-[calc(100%_-_81px)] md:left-60 md:w-[calc(100%_-_theme(space.60))] p-6 overflow-auto'>
+        className='relative top-[81px] h-[calc(100%_-_81px)] overflow-auto p-6 md:left-60 md:w-[calc(100%_-_theme(space.60))]'>
         {children}
       </main>
       {/* <footer role="contentinfo">
diff --git a/components/saml/AddEdit.tsx b/components/saml/AddEdit.tsx
index e6a8be1a7..24dac3d0f 100644
--- a/components/saml/AddEdit.tsx
+++ b/components/saml/AddEdit.tsx
@@ -189,7 +189,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
       {/* Or use router.back()  */}
       <Link href='/admin/saml/config'>
         <a className='link-primary'>
-          <ArrowLeftIcon aria-hidden className='w-4 h-4' />
+          <ArrowLeftIcon aria-hidden className='h-4 w-4' />
           <span className='ml-2'>Back to Configurations</span>
         </a>
       </Link>
@@ -198,7 +198,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
           {samlConfig?.name || samlConfig?.product || 'New SAML Configuration'}
         </h2>
         <form onSubmit={saveSAMLConfiguration}>
-          <div className='bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 p-6 rounded-xl md:w-3/4 min-w-[28rem] md:max-w-lg'>
+          <div className='min-w-[28rem] rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800 md:w-3/4 md:max-w-lg'>
             {fieldCatalog
               .filter(({ attributes: { showOnlyInEditView } }) => (isEditView ? true : !showOnlyInEditView))
               .map(
@@ -229,11 +229,11 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
                     <div className='mb-6 ' key={key}>
                       <label
                         htmlFor={key}
-                        className='block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300'>
+                        className='mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300'>
                         {_label}
                       </label>
                       {type === 'pre' ? (
-                        <pre className='block w-full p-2 overflow-auto text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'>
+                        <pre className='block w-full overflow-auto rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'>
                           {value}
                         </pre>
                       ) : type === 'textarea' ? (
@@ -245,7 +245,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
                           readOnly={readOnly}
                           maxLength={maxLength}
                           onChange={handleChange}
-                          className={`block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${
+                          className={`block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 ${
                             isArray ? 'whitespace-pre' : ''
                           }`}
                           rows={rows}
@@ -260,7 +260,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
                           readOnly={readOnly}
                           maxLength={maxLength}
                           onChange={handleChange}
-                          className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                          className='block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'
                         />
                       )}
                     </div>
@@ -278,14 +278,14 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
                 } transition-opacity motion-reduce:transition-none`}>
                 {status === 'SUCCESS' && (
                   <span className='inline-flex items-center text-primary'>
-                    <CheckCircleIcon aria-hidden className='w-5 h-5 mr-1'></CheckCircleIcon>
+                    <CheckCircleIcon aria-hidden className='mr-1 h-5 w-5'></CheckCircleIcon>
                     Saved
                   </span>
                 )}
                 {/* TODO: also display error message once we standardise the response format */}
                 {status === 'ERROR' && (
                   <span className='inline-flex items-center text-red-900'>
-                    <ExclamationCircleIcon aria-hidden className='w-5 h-5 mr-1'></ExclamationCircleIcon>
+                    <ExclamationCircleIcon aria-hidden className='mr-1 h-5 w-5'></ExclamationCircleIcon>
                     ERROR
                   </span>
                 )}
@@ -293,14 +293,14 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
             </div>
           </div>
           {samlConfig?.clientID && samlConfig.clientSecret && (
-            <section className='flex items-center p-6 mt-10 text-red-900 bg-red-100 rounded'>
+            <section className='mt-10 flex items-center rounded bg-red-100 p-6 text-red-900'>
               <div className='flex-1'>
                 <h6 className='mb-1 font-medium'>Delete this configuration</h6>
                 <p className='font-light'>All your apps using this configuration will stop working.</p>
               </div>
               <button
                 type='button'
-                className='inline-block px-4 py-2 text-sm font-bold leading-6 text-white bg-red-700 rounded hover:bg-red-800'
+                className='inline-block rounded bg-red-700 px-4 py-2 text-sm font-bold leading-6 text-white hover:bg-red-800'
                 onClick={toggleDelConfirm}
                 data-modal-toggle='popup-modal'>
                 Delete
@@ -315,18 +315,18 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
           visible={delModalVisible}
           onCancel={toggleDelConfirm}
           customFooter={
-            <div className='inline-flex ml-auto'>
+            <div className='ml-auto inline-flex'>
               <button
                 type='button'
                 onClick={toggleDelConfirm}
-                className='inline-block px-4 py-2 text-sm font-bold leading-6 bg-gray-200 border-2 rounded text-secondary/90 hover:bg-gray-300'>
+                className='inline-block rounded border-2 bg-gray-200 px-4 py-2 text-sm font-bold leading-6 text-secondary/90 hover:bg-gray-300'>
                 Cancel
               </button>
               <button
                 type='button'
                 disabled={userNameEntry !== samlConfig?.product}
                 onClick={deleteConfiguration}
-                className='ml-1.5 bg-red-700 hover:bg-red-800 disabled:bg-slate-400 text-white text-sm font-bold py-2 px-4 rounded leading-6 inline-block'>
+                className='ml-1.5 inline-block rounded bg-red-700 py-2 px-4 text-sm font-bold leading-6 text-white hover:bg-red-800 disabled:bg-slate-400'>
                 Delete
               </button>
             </div>
@@ -341,7 +341,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
           <input
             id='nameOfProd'
             required
-            className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:white dark:border-gray-600 dark:placeholder-gray-400 d dark:focus:ring-blue-500 dark:focus:border-blue-500'
+            className='dark:white d block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'
             value={userNameEntry}
             onChange={({ target }) => {
               setUserNameEntry(target.value);
diff --git a/package-lock.json b/package-lock.json
index 2148d6403..556ba6f0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
         "lint-staged": "12.3.4",
         "postcss": "8.4.6",
         "prettier": "2.5.1",
+        "prettier-plugin-tailwindcss": "0.1.7",
         "swagger-jsdoc": "6.1.0",
         "tailwindcss": "3.0.22",
         "ts-node": "10.5.0",
@@ -7251,6 +7252,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz",
+      "integrity": "sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -16202,6 +16215,13 @@
       "version": "2.5.1",
       "dev": true
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz",
+      "integrity": "sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/package.json b/package.json
index 03be3ebe6..358411a99 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "lint-staged": "12.3.4",
     "postcss": "8.4.6",
     "prettier": "2.5.1",
+    "prettier-plugin-tailwindcss": "0.1.7",
     "swagger-jsdoc": "6.1.0",
     "tailwindcss": "3.0.22",
     "ts-node": "10.5.0",
@@ -85,4 +86,4 @@
   "engines": {
     "node": ">=14.18.1"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 4c9feed38..ceaba8eaf 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -5,7 +5,7 @@ class MyDocument extends Document {
     return (
       <Html lang='en' className='h-full'>
         <Head />
-        <body className='h-full antialiased bg-white theme-default dark:bg-gray-900 selection:bg-primary/20 selection:text-secondary'>
+        <body className='theme-default h-full bg-white antialiased selection:bg-primary/20 selection:text-secondary dark:bg-gray-900'>
           <Main />
           <NextScript />
         </body>
diff --git a/pages/admin/saml/config/edit/[id].tsx b/pages/admin/saml/config/edit/[id].tsx
index 6af31964a..30f529b75 100644
--- a/pages/admin/saml/config/edit/[id].tsx
+++ b/pages/admin/saml/config/edit/[id].tsx
@@ -13,7 +13,7 @@ const EditSAMLConfiguration: NextPage = () => {
 
   if (error) {
     return (
-      <div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>
+      <div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>
         {error.info ? JSON.stringify(error.info) : error.status}
       </div>
     );
diff --git a/pages/admin/saml/config/index.tsx b/pages/admin/saml/config/index.tsx
index cd79426c3..351212b71 100644
--- a/pages/admin/saml/config/index.tsx
+++ b/pages/admin/saml/config/index.tsx
@@ -9,7 +9,7 @@ const SAMLConfigurations: NextPage = () => {
 
   if (error) {
     return (
-      <div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>
+      <div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>
         {error.info ? JSON.stringify(error.info) : error.status}
       </div>
     );
@@ -22,7 +22,7 @@ const SAMLConfigurations: NextPage = () => {
   if (!Array.isArray(data)) {
     return (
       <div>
-        <div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>Nothing to show</div>
+        <div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>Nothing to show</div>
       </div>
     );
   }
@@ -30,10 +30,10 @@ const SAMLConfigurations: NextPage = () => {
   return (
     <div>
       <div className='flex items-center justify-between'>
-        <h2 className='font-bold md:text-2xl text-primary dark:text-white'>SAML Configurations</h2>
+        <h2 className='font-bold text-primary dark:text-white md:text-2xl'>SAML Configurations</h2>
         <Link href={'/admin/saml/config/new'}>
           <a className='btn-primary'>
-            <span className='inline-block mr-1 md:mr-2' aria-hidden>
+            <span className='mr-1 inline-block md:mr-2' aria-hidden>
               +
             </span>
             Add Configuration
@@ -42,16 +42,16 @@ const SAMLConfigurations: NextPage = () => {
       </div>
       <div className='mt-6 overflow-auto rounded-lg shadow-md'>
         <table className='min-w-full'>
-          <thead className='shadow-md bg-gray-50 dark:bg-gray-700 sm:rounded-lg'>
+          <thead className='bg-gray-50 shadow-md dark:bg-gray-700 sm:rounded-lg'>
             <tr>
               <th
                 scope='col'
-                className='px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400'>
+                className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-400'>
                 Tenant
               </th>
               <th
                 scope='col'
-                className='px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400'>
+                className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-400'>
                 Product
               </th>
               <th></th>
@@ -59,17 +59,17 @@ const SAMLConfigurations: NextPage = () => {
           </thead>
           <tbody>
             {data.map((provider) => (
-              <tr key={provider.clientID} className='bg-white border-b dark:bg-gray-800 dark:border-gray-700'>
-                <td className='px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white'>
+              <tr key={provider.clientID} className='border-b bg-white dark:border-gray-700 dark:bg-gray-800'>
+                <td className='whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900 dark:text-white'>
                   {provider.tenant}
                 </td>
-                <td className='px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400'>
+                <td className='whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400'>
                   {provider.product}
                 </td>
                 <td>
                   <Link href={`/admin/saml/config/edit/${provider.clientID}`}>
                     <a className='link-primary'>
-                      <PencilAltIcon className='w-5 h-5 text-secondary' />
+                      <PencilAltIcon className='h-5 w-5 text-secondary' />
                     </a>
                   </Link>
                 </td>