Merge pull request #6566 from supabase/chore/turbo-cleanup

Chore: turbo cleanup

.github/workflows/prettier.yml

@@ -14,7 +14,7 @@ jobs:
       # disable this check while we migrate to monorepo
       - name: Run prettier
         run: |-
-          npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}' 
+          npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}' 
         # run: |-
         #   function run_check() {
         #     if $(grep -q '"prettier"' "$1") ; then

.prettierignore

@@ -2,4 +2,5 @@
 .next
 node_modules
 package-lock.json
-docker*
+docker*
+apps/**/out

.prettierrc

@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "endOfLine": "lf"
 }

DEVELOPERS.md

@@ -9,14 +9,20 @@
   - [Supabase Website Development Server](#supabase-website-development-server)
   - [Supabase Docs Development Server](#supabase-docs-development-server)
   - [Supabase Studio Development Server](#supabase-studio-development-server)
+- [Monorepo](#monorepo)
+  - [Getting started](#getting-started)
+  - [Shared components](#shared-components)
+  - [Installing packages](#installing-packages)
+  - [Development](#development)
 - [Finally](#finally)
 - [Community Channels](#community-channels)
-- [Monorepo](#monorepo)
-  - [Development](#development)
 
 ## Development Setup
 
-First off, thanks for your interest in Supabase and for wanting to contribute! before you begin, read the [code of conduct](https://github.com/supabase/.github/blob/main/CODE_OF_CONDUCT.md) and check out the [existing issues](https://github.com/supabase/supabase/issues). This document describes how to set up your development environment to build and test Supabase.
+First off, thanks for your interest in Supabase and for wanting to contribute! before you begin, read the 
+[code of conduct](https://github.com/supabase/.github/blob/main/CODE_OF_CONDUCT.md) and check out the 
+[existing issues](https://github.com/supabase/supabase/issues). 
+This document describes how to set up your development environment to build and test Supabase.
 
 ### Installing Dependencies
 
@@ -94,25 +100,7 @@ To debug code, and to see changes in real time, it is often useful to have a loc
 
 ### Supabase Website Development Server
 
-1. Start development server
-
-   npm
-
-   ```sh
-   npm run dev
-   ```
-
-   or with yarn
-
-   ```sh
-   yarn dev
-   ```
-
-2. To access the local server, enter the following URL into your web browser:
-
-   ```sh
-   http://localhost:3000/
-   ```
+The website is moving to a new monorepo setup. See the [Monorepo](#monorepo) section below.
 
 ### Supabase Docs Development Server
 
@@ -174,6 +162,57 @@ To debug code, and to see changes in real time, it is often useful to have a loc
 
 For more information on Supabase Studio, see the [Supabase Studio readme](./studio/README.md).
 
+## Monorepo
+
+We are in the process of migrating this repository to monorepo, using Turborepo. 
+Eventually, the docs and the Studio will be run using Turborepo, which will significantly improve the developer workflow.
+You must be using NPM 7 or higher.
+
+### Getting started
+
+```sh
+npm run install # install dependencies
+npm run dev # start all the applications
+```
+
+Then edit and visit any of the following sites:
+
+- `/apps/www`: http://localhost:3000
+  - The main website.
+- `/apps/temp-docs`: http://localhost:3001
+  - We are migrating the docs to a Next.js application.
+- `/apps/temp-community-forum`: http://localhost:3002 
+  - pulls all our github discussions into a nextjs site. Temporary/POC
+- `/apps/temp-community-tutorials`: http://localhost:3003 
+  - pulls all our DEV articles (which community members can write) into a nextjs site. Temporary/POC
+
+
+### Shared components
+
+The monorepo has a set of shared components under `/packages`:
+
+- `/packages/common`: Common React code, shared between all sites.
+- `/packages/config`: All shared config
+- `/packages/tsconfig`: Shared Typescript settings
+### Installing packages
+
+Installing a package with NPM workspaces requires you to add the `-w` flag to tell NPM which workspace you want to install into.
+
+The format is: `npm install <package name> -w=<workspace to install in>`. 
+
+For example: 
+
+- `npm install @supabase/ui -w common`: installs into `./packages/common`
+- `npm install @supabase/ui -w www`: installs into `./apps/www`
+
+You do not need to install `devDependencies` in each workspace. These can all be installed in the root package.
+
+### Development
+
+`npm run dev`
+
+
+
 ## Finally
 
 After making your changes to the file(s) you'd like to update, it's time to open a pull request. Once you submit your pull request, others from the Supabase team/community will review it with you.
@@ -183,20 +222,3 @@ Did you have an issue, like a merge conflict, or don't know how to open a pull r
 ## Community Channels
 
 Stuck somewhere? Have any questions? please join the [Discord Community Server](https://discord.supabase.com/) or the [Github Discussions](https://github.com/supabase/supabase/discussions). We are here to help!
-
-## Monorepo
-
-This is a monorepo, using Turborepo. You must be using NPM 7 or higher.
-
-- Install a package: `npm install <package name> -w=<workspace to install in>`. eg:
-  - `npm install @supabase/ui -w ui`: installs into `./packages/ui`
-  - `npm install @supabase/ui -w docs`: installs into `./packages/docs`
-
-### Development
-
-`npm run dev`
-
-- www: http://localhost:3000
-- docs: http://localhost:3001
-- forum: http://localhost:3002 - pulls all our github discussions into a nextjs site. Temporary/POC
-- tutorial: http://localhost:3003 - pulls all our DEV articles (which community members can write) into a nextjs site. Temporary/POC

apps/docs/.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require("config/eslint-preset");

apps/docs/next.config.js

@@ -1,5 +0,0 @@
-const withTM = require('next-transpile-modules')(['ui'])
-
-module.exports = withTM({
-  reactStrictMode: true,
-})

apps/temp-community-forum/.eslintrc.js

@@ -1 +1 @@
-module.exports = require("config/eslint-preset");
+module.exports = require('config/eslint-preset')

apps/temp-community-forum/next.config.js

@@ -1,5 +1,5 @@
-const withTM = require("next-transpile-modules")(["ui"]);
+const withTM = require('next-transpile-modules')(['common'])
 
 module.exports = withTM({
   reactStrictMode: true,
-});
+})

apps/temp-community-forum/package.json

@@ -13,7 +13,7 @@
     "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "ui": "*"
+    "common": "*"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",

apps/temp-community-forum/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { fetchDiscussions } from '../utils/api'
-import { Button, Layouts } from 'ui'
+import { Button, Layouts } from 'common'
 import { useEffect, useState } from 'react'
 
 export default function Main() {

apps/temp-community-forum/src/styles/tailwind.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

apps/temp-community-tutorials/.eslintrc.js

@@ -1 +1 @@
-module.exports = require("config/eslint-preset");
+module.exports = require('config/eslint-preset')

apps/temp-community-tutorials/next.config.js

@@ -1,5 +1,5 @@
-const withTM = require("next-transpile-modules")(["ui"]);
+const withTM = require('next-transpile-modules')(['common'])
 
 module.exports = withTM({
   reactStrictMode: true,
-});
+})

apps/temp-community-tutorials/package.json

@@ -12,7 +12,7 @@
     "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "ui": "*"
+    "common": "*"
   },
   "devDependencies": {
     "config": "*",

apps/temp-community-tutorials/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { fetchPosts, DevPost } from '../utils/api'
-import { Button, Layouts } from 'ui'
+import { Button, Layouts } from 'common'
 import { useEffect, useState } from 'react'
 
 export default function Main() {

apps/temp-community-tutorials/src/styles/tailwind.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

apps/temp-docs/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('config/eslint-preset')

apps/temp-docs/next.config.js

@@ -0,0 +1,5 @@
+const withTM = require('next-transpile-modules')(['common'])
+
+module.exports = withTM({
+  reactStrictMode: true,
+})

apps/temp-docs/package.json

@@ -12,7 +12,7 @@
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "ui": "*"
+    "common": "*"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",

apps/temp-docs/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Layouts } from 'ui'
+import { Button, Layouts } from 'common'
 import Sidebar from '../components/Sidebar'
 
 export default function Docs() {

apps/temp-docs/src/styles/tailwind.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

apps/www/components/AdminAccess/tabs.tsx

@@ -14,7 +14,7 @@ function Tabs(props: Props) {
   }
 
   return (
-    <div className="flex justify-between w-full sm:relative -mt-20 lg:mt-0">
+    <div className="-mt-20 flex w-full justify-between sm:relative lg:mt-0">
       <div>
         <div className="">
           <SBTabs

apps/www/components/AuthWidget/AuthComponentExample.tsx

@@ -67,7 +67,7 @@ function AuthComponentExample() {
         </Tabs.Panel>
       </Tabs> */}
       <div
-        className={`relative bg-white dark:bg-gray-800 py-2 pb-16 border dark:border-gray-600 auth-container`}
+        className={`auth-container relative border bg-white py-2 pb-16 dark:border-gray-600 dark:bg-gray-800`}
       >
         <Swiper
           // @ts-ignore
@@ -186,10 +186,10 @@ function AuthComponentExample() {
                       </Button>
                     </Link>
                   </div>
-                  <div className="flex flex-row w-full items-center justify-center">
-                    <div className="w-full h-[1px] bg-gray-500" />
+                  <div className="flex w-full flex-row items-center justify-center">
+                    <div className="h-[1px] w-full bg-gray-500" />
                     <p className="w-full text-center text-gray-500">or continue with</p>
-                    <div className="w-full h-[1px] bg-gray-500" />
+                    <div className="h-[1px] w-full bg-gray-500" />
                   </div>
                   {/* <Auth.UserContextProvider supabaseClient={supabase}>
                     <AuthContainer supabaseClient={supabase}>

apps/www/components/AuthWidget/AuthWidget.tsx

@@ -45,7 +45,7 @@ function AuthPage() {
 
   return (
     <DefaultLayout>
-      <div className="container mx-auto px-8 sm:px-16 xl:px-20 relative py-32">
+      <div className="container relative mx-auto px-8 py-32 sm:px-16 xl:px-20">
         <div className="grid grid-cols-12">
           <div className="col-span-8">
             <h2 className="mb-4">ReactJS Auth Widget</h2>
@@ -56,9 +56,9 @@ function AuthPage() {
           </div>
           <div className="col-span-8">
             <div
-              className={`relative bg-white dark:bg-gray-800 py-2 pb-16 border-t border-l border-b dark:border-gray-600 ${AuthStyles['auth-container']}`}
+              className={`relative border-t border-l border-b bg-white py-2 pb-16 dark:border-gray-600 dark:bg-gray-800 ${AuthStyles['auth-container']}`}
             >
-              <div className="w-full h-full left-0 top-2">
+              <div className="left-0 top-2 h-full w-full">
                 <Tabs
                   size="medium"
                   defaultActiveId="panel-1"
@@ -134,7 +134,7 @@ function AuthPage() {
           </div>
 
           <div className="col-span-4">
-            <div className="bg-white dark:bg-gray-800 border rounded-l-none dark:border-gray-600 rounded h-full">
+            <div className="h-full rounded rounded-l-none border bg-white dark:border-gray-600 dark:bg-gray-800">
               <div className={`p-8`}>
                 <Space size={12} direction="vertical">
                   <div>

apps/www/components/Blog/BlogHeader.tsx

@@ -6,7 +6,7 @@ interface Props {
 
 export default function BlogHeader({ title }: Props) {
   return (
-    <div className="bg-white dark:bg-dark-800 overflow-hidden pt-4 pb-4 border-b dark:border-gray-600">
+    <div className="dark:bg-dark-800 overflow-hidden border-b bg-white pt-4 pb-4 dark:border-gray-600">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto">
           <h1>

apps/www/components/Blog/BlogListItem.tsx

@@ -25,11 +25,11 @@ const BlogListItem = ({ post }: Props) => {
   return (
     <div>
       <a href={`/blog/${post.url}`}>
-        <div className="inline-block min-w-full group">
+        <div className="group inline-block min-w-full">
           <div className="flex flex-col space-y-6">
             <div className="flex flex-col space-y-3">
               <div
-                className={`relative overflow-auto w-full h-60 border border-scale-300 shadow-sm rounded-lg mb-4`}
+                className={`border-scale-300 relative mb-4 h-60 w-full overflow-auto rounded-lg border shadow-sm`}
               >
                 <Image
                   layout="fill"
@@ -41,22 +41,22 @@ const BlogListItem = ({ post }: Props) => {
                       : `/images/blog/${post.thumb}`
                   }
                   objectFit="cover"
-                  className="duration-100 ease-in transform scale-100 group-hover:scale-105"
+                  className="scale-100 transform duration-100 ease-in group-hover:scale-105"
                 />
               </div>
 
-              <h3 className="max-w-sm text-xl text-scale-1200">{post.title}</h3>
-              {post.date && <p className="text-xs text-scale-1100">{post.date}</p>}
-              <p className="max-w-sm text-base text-scale-1100">{post.description}</p>
+              <h3 className="text-scale-1200 max-w-sm text-xl">{post.title}</h3>
+              {post.date && <p className="text-scale-1100 text-xs">{post.date}</p>}
+              <p className="text-scale-1100 max-w-sm text-base">{post.description}</p>
             </div>
             <div className="flex items-center -space-x-2">
               {author.map((author: any) => {
                 return (
-                  <div className="w-10 rounded-full ring-2 ring-white dark:ring-scale-200">
+                  <div className="dark:ring-scale-200 w-10 rounded-full ring-2 ring-white">
                     {author.author_image_url && (
                       <Image
                         src={author.author_image_url}
-                        className="rounded-full border dark:border-dark"
+                        className="dark:border-dark rounded-full border"
                         width="100%"
                         height="100%"
                         layout="responsive"

apps/www/components/BuiltWithSupabase/index.tsx

@@ -14,7 +14,7 @@ const BuiltExamples = () => {
       <div className="text-center">
         <h3 className="h2">What can you build with supabase?</h3>
         <p className="p">There are many example apps and starter projects to get going</p>
-        <div className="flex gap-2 justify-center py-4">
+        <div className="flex justify-center gap-2 py-4">
           <Link href="/docs/guides/examples" as="/docs/guides/examples" passHref>
             <Button as="a" type="default" size="small">
               View all examples
@@ -31,7 +31,7 @@ const BuiltExamples = () => {
           </Link>
         </div>
       </div>
-      <div className="grid grid-cols-12 gap-5 mt-16">
+      <div className="mt-16 grid grid-cols-12 gap-5">
         {Examples.slice(0, 6).map((example, i) => {
           return (
             <div

apps/www/components/Button.tsx

@@ -31,8 +31,8 @@ const Button = (props: Props) => {
     <button
       type="button"
       className={`
-        inline-flex items-center text-sm leading-4 rounded-md
-        focus:outline-none group transition ${colorClass} ${className}
+        group inline-flex items-center rounded-md text-sm
+        leading-4 transition focus:outline-none ${colorClass} ${className}
       `}
       style={buttonStyles}
     >
@@ -44,7 +44,7 @@ const Button = (props: Props) => {
         {text}
       </span>
       {url && (
-        <span className={`ml-2 transition-all opacity-0 group-hover:opacity-100 ${arrowClass}`}>
+        <span className={`ml-2 opacity-0 transition-all group-hover:opacity-100 ${arrowClass}`}>
           →
         </span>
       )}

apps/www/components/CTABanner/index.tsx

@@ -5,7 +5,7 @@ const CTABanner = (props: any) => {
   return (
     <div
       className={`
-        py-32 grid grid-cols-12 gap-4 items-center text-center bg-dark-800 border-t dark:border-gray-600
+        bg-dark-800 grid grid-cols-12 items-center gap-4 border-t py-32 text-center dark:border-gray-600
         ${darkerBg ? 'dark:bg-dark-900' : ''} px-16
       `}
     >

apps/www/components/Card.tsx

@@ -54,23 +54,23 @@ const Card = (props: Props) => {
     <a
       href={url}
       target="_blank"
-      className="flex flex-col rounded-md shadow-lg overflow-hidden relative transition transform hover:-translate-y-1 hover:shadow-2xl"
+      className="relative flex transform flex-col overflow-hidden rounded-md shadow-lg transition hover:-translate-y-1 hover:shadow-2xl"
     >
-      <div className="flex-shrink-0 dark:bg-dark-800">
+      <div className="dark:bg-dark-800 flex-shrink-0">
         <img className="h-64 w-full object-cover" src={imgUrl} alt={title} />
       </div>
-      <div className="flex-1 bg-white p-8 flex flex-col justify-between dark:bg-scale-300">
+      <div className="dark:bg-scale-300 flex flex-1 flex-col justify-between bg-white p-8">
         <div className="flex-1">
           {/* {icons && (
             <div className="-mt-12 mb-6 flex -space-x-3">
               {iconMarkup}
             </div>
           )} */}
-          <p className="text-sm font-base capitalize text-gray-600 dark:text-dark-300">{type}</p>
-          <div className="mt-2 flex flex-col justify-between h-32">
+          <p className="font-base dark:text-dark-300 text-sm capitalize text-gray-600">{type}</p>
+          <div className="mt-2 flex h-32 flex-col justify-between">
             {/* {logoUrl && <img src={logoUrl} className="h-9 my-4" />} */}
             {title && <p className="text-xl text-gray-900 dark:text-white">{title}</p>}
-            <p className="mt-3 text-base text-gray-500 dark:text-dark-400">
+            <p className="dark:text-dark-400 mt-3 text-base text-gray-500">
               {type !== 'Project Example' ? postMeta.publishDate : description}
             </p>
           </div>
@@ -83,7 +83,7 @@ const Card = (props: Props) => {
             </div>
             <div className="ml-3">
               <p className="text-sm font-medium text-gray-900 dark:text-white">{postMeta.name}</p>
-              <div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
+              <div className="dark:text-dark-100 flex space-x-1 text-sm text-gray-500">
                 <time dateTime="2020-03-16">{postMeta.publishDate}</time>
                 <span aria-hidden="true">&middot;</span>
                 <span>{postMeta.readLength} min read</span>

apps/www/components/Carousels/ImageCarousel.tsx

@@ -50,7 +50,7 @@ function ImageCarousel(props: ImageCarouselProps) {
   const details = (
     <div className="h-64 bg-white">
       <p>
-        <span className="block text-white mb-8">Allow fetch something</span>
+        <span className="mb-8 block text-white">Allow fetch something</span>
       </p>
       <p>
         <p>
@@ -68,8 +68,8 @@ function ImageCarousel(props: ImageCarouselProps) {
 
   return (
     <div className="grid grid-cols-12">
-      <div className="col-span-12 lg:col-span-6 w-full">
-        <div className="col-span-12 lg:col-span-7 sbui-tabs--alt">
+      <div className="col-span-12 w-full lg:col-span-6">
+        <div className="sbui-tabs--alt col-span-12 lg:col-span-7">
           <div className={props.altTabView ? 'hidden' : 'block'}>
             <Tabs
               scrollable
@@ -93,7 +93,7 @@ function ImageCarousel(props: ImageCarouselProps) {
             </Tabs>
           </div>
           <div
-            className={`overflow-hidden border border-gray-100 dark:border-gray-600 rounded-md bg-gray-800 ${ImageCarouselStyles['gradient-bg']}`}
+            className={`overflow-hidden rounded-md border border-gray-100 bg-gray-800 dark:border-gray-600 ${ImageCarouselStyles['gradient-bg']}`}
           >
             <Swiper
               // @ts-ignore
@@ -134,7 +134,7 @@ function ImageCarousel(props: ImageCarouselProps) {
           </div>
         </div>
       </div>
-      <div className="mt-8 lg:mt-0 col-span-12 lg:col-span-5 lg:col-start-8 xl:col-span-5 xl:col-start-8">
+      <div className="col-span-12 mt-8 lg:col-span-5 lg:col-start-8 lg:mt-0 xl:col-span-5 xl:col-start-8">
         <div className={`sbui-tabs--underline-alt ${props.altTabView ? 'block' : 'hidden'} mb-3`}>
           <Tabs
             scrollable
@@ -165,7 +165,7 @@ function ImageCarousel(props: ImageCarouselProps) {
           {props.content.map((content, i) => {
             return (
               <SwiperSlide key={i} className="py-4">
-                <h4 className="text-xl text-scale-1200 mb-4">{content.title}</h4>
+                <h4 className="text-scale-1200 mb-4 text-xl">{content.title}</h4>
                 <p className="p text-base">{content.text}</p>
                 <TextLink
                   label={content.cta ? content.cta : 'View documentation'}

apps/www/components/Carousels/SplitCodeBlockCarousel.tsx

@@ -45,7 +45,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
   const details = (
     <div className="">
       <p>
-        <span className="block text-white mb-8">Allow fetch something</span>
+        <span className="mb-8 block text-white">Allow fetch something</span>
       </p>
       <p>
         <p>
@@ -60,7 +60,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
   )
 
   return (
-    <div className="col-span-12 lg:col-span-6 lg:col-start-7 sbui-tabs--alt space-y-2">
+    <div className="sbui-tabs--alt col-span-12 space-y-2 lg:col-span-6 lg:col-start-7">
       <Tabs
         scrollable
         // @ts-ignore
@@ -100,7 +100,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
         })}
       </Swiper>
 
-      <div className="overflow-hidden p-8 bg-scale-100 dark:bg-scale-300 rounded-md border border-scale-500">
+      <div className="bg-scale-100 dark:bg-scale-300 border-scale-500 overflow-hidden rounded-md border p-8">
         <Swiper
           // @ts-ignore
           onSwiper={setSwiperDetails}
@@ -117,11 +117,11 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
             return (
               <SwiperSlide key={i}>
                 <p>
-                  <span className="block text-lg text-scale-1200 dark:text-white mb-4">
+                  <span className="text-scale-1200 mb-4 block text-lg dark:text-white">
                     {extension.detail_title}
                   </span>
                 </p>
-                <p className="p block mb-6">{extension.detail_text}</p>
+                <p className="p mb-6 block">{extension.detail_text}</p>
                 <Space className="justify-between">
                   {extension.url && (
                     <Link href={extension.url} as={extension.url}>

apps/www/components/CaseStudies/benchmark.tsx

@@ -4,16 +4,16 @@ import { useRouter } from 'next/router'
 const Benchmark = () => {
   const { basePath } = useRouter()
   return (
-    <div className="mt-6 lg:mt-16 max-w-lg mx-auto lg:max-w-none lg:mx-0">
-      <div className="grid gap-4 items-center rounded-md grid-cols-1 lg:grid-cols-12 overflow-auto bg-dark-800 shadow-lg">
-        <div className="col-span-1 lg:col-span-10 flex items-center flex-col lg:flex-row">
+    <div className="mx-auto mt-6 max-w-lg lg:mx-0 lg:mt-16 lg:max-w-none">
+      <div className="bg-dark-800 grid grid-cols-1 items-center gap-4 overflow-auto rounded-md shadow-lg lg:grid-cols-12">
+        <div className="col-span-1 flex flex-col items-center lg:col-span-10 lg:flex-row">
           <img
-            className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 hidden lg:block"
+            className="mb-10 hidden w-full lg:mb-0 lg:mr-14 lg:block lg:h-44 lg:w-auto"
             src={`${basePath}/images/benchmark.svg`}
             alt="Benchmark illustration"
           />
           <img
-            className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 lg:hidden"
+            className="mb-10 w-full lg:mb-0 lg:mr-14 lg:hidden lg:h-44 lg:w-auto"
             src={`${basePath}/images/benchmark--mobile.svg`}
             alt="Benchmark illustration"
           />
@@ -31,7 +31,7 @@ const Benchmark = () => {
             </p>
           </div>
         </div>
-        <div className="pb-12 px-12 col-span-1 lg:pb-0 lg:px-0 lg:col-span-2 rounded-r-md">
+        <div className="col-span-1 rounded-r-md px-12 pb-12 lg:col-span-2 lg:px-0 lg:pb-0">
           <a href="https://supabasesubscribe.vercel.app/subscription/enterpriseBenchmarks">
             <Button>Get notified</Button>
           </a>

apps/www/components/CaseStudies/index.tsx

@@ -20,7 +20,7 @@ const CaseStudies = () => {
           }
         />
       </div>
-      <div className="grid max-w-lg gap-8 mx-auto mt-5 lg:gap-12 lg:grid-cols-3 lg:max-w-none">
+      <div className="mx-auto mt-5 grid max-w-lg gap-8 lg:max-w-none lg:grid-cols-3 lg:gap-12">
         {CaseStudiesData.map((caseStudy, idx: number) => (
           <BlogListItem
             key={idx}

apps/www/components/CodeBlock/CodeBlock.module.css

@@ -9,7 +9,7 @@
 }
 
 .code-block .code-line:first-of-type {
-  @apply flex items-end h-8;
+  @apply flex h-8 items-end;
 }
 
 .code-block .code-line:first-of-type :global(.linenumber) {
@@ -21,7 +21,7 @@
 }
 
 .code-block .code-line:last-of-type {
-  @apply flex items-start h-8;
+  @apply flex h-8 items-start;
 }
 
 .code-block .code-line:last-of-type :global(.linenumber) {

apps/www/components/CodeBlock/CodeBlock.tsx

@@ -82,7 +82,7 @@ function CodeBlock(props: CodeBlockProps) {
         className={[
           CodeBlockStyles['code-block'],
           '!bg-scale-1200 dark:!bg-scale-100',
-          props.hideBorder ? '' : 'rounded-lg border border-scale-1100 dark:border-scale-400',
+          props.hideBorder ? '' : 'border-scale-1100 dark:border-scale-400 rounded-lg border',
         ].join(' ')}
         customStyle={{
           padding: 0,
@@ -114,7 +114,7 @@ function CodeBlock(props: CodeBlockProps) {
       </SyntaxHighlighter>
 
       {!props.hideCopy && props.children ? (
-        <div className="absolute right-2 top-2 dark">
+        <div className="dark absolute right-2 top-2">
           <CopyToClipboard text={props.children}>
             <Button type="default" icon={<IconCopy />}>
               Copy

apps/www/components/DarkModeToggle.tsx

@@ -19,8 +19,8 @@ function DarkModeToggle() {
         type="button"
         aria-pressed="false"
         className={`
-                relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer 
-                transition-colors ease-in-out duration-200 focus:outline-none ${
+                relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+                transition-colors duration-200 ease-in-out focus:outline-none ${
                   isDarkMode ? 'bg-scale-500' : 'bg-scale-900'
                 } mx-5
               `}
@@ -32,8 +32,8 @@ function DarkModeToggle() {
           className={`
                   ${
                     isDarkMode ? 'translate-x-5' : 'translate-x-0'
-                  } inline-block h-5 w-5 rounded-full
-                  bg-white dark:bg-scale-300 shadow-lg transform ring-0 transition ease-in-out duration-200
+                  } dark:bg-scale-300 inline-block h-5 w-5
+                  transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
                 `}
         />
       </button>

apps/www/components/EnterpriseContactForm.tsx

@@ -139,7 +139,7 @@ const EnterpriseContactForm = () => {
               />
             </div>
 
-            <div className="flex flex-row-reverse w-full col-span-2 pt-4">
+            <div className="col-span-2 flex w-full flex-row-reverse pt-4">
               <Button
                 size="xlarge"
                 disabled={isSubmitting}
@@ -154,7 +154,7 @@ const EnterpriseContactForm = () => {
       </Form>
 
       {formSubmitted && (
-        <h3 className="mt-12 text-center h3">Thanks, we'll reach out to you shortly.</h3>
+        <h3 className="h3 mt-12 text-center">Thanks, we'll reach out to you shortly.</h3>
       )}
     </div>
   )

apps/www/components/ExampleCard.tsx

@@ -5,15 +5,15 @@ function ExampleCard(props: any) {
   return (
     <>
       <div
-        className="h-40 
-          bg-white 
-          dark:bg-scale-300 
-          border 
-          border-scale-400
-          border-t border-r border-l 
-          p-5
-          flex flex-col justify-between
-          rounded rounded-b-none
+        className="dark:bg-scale-300 
+          border-scale-400 
+          flex 
+          h-40 
+          flex-col
+          justify-between rounded rounded-b-none 
+          border
+          border-t border-r border-l
+          bg-white p-5
           "
       >
         <div className="mb-4">
@@ -23,9 +23,9 @@ function ExampleCard(props: any) {
             <img
               src={props.author_img}
               alt={props.author + ' GitHub profile picture'}
-              className="inline w-6 rounded-full border-scale-500"
+              className="border-scale-500 inline w-6 rounded-full"
             />
-            <span className="text-sm ml-2 text-scale-1200">{props.author}</span>
+            <span className="text-scale-1200 ml-2 text-sm">{props.author}</span>
           </div>
         </div>
       </div>
@@ -35,15 +35,15 @@ function ExampleCard(props: any) {
           className="
           bg-scale-100
           dark:bg-scale-400
-          border border-scale-400
-          border-b border-r border-l border-t-0
-          p-5
-          flex flex-col justify-between
-          rounded rounded-t-none"
+          border-scale-400 flex
+          flex-col justify-between rounded rounded-t-none
+          border
+          border-b border-r border-l
+          border-t-0 p-5"
         >
           <Link href={props.repo_url} as={props.repo_url} passHref>
             <a
-              className="text-sm text-scale-1100 hover:text-scale-1200 flex flex-row items-center"
+              className="text-scale-1100 hover:text-scale-1200 flex flex-row items-center text-sm"
               target="_blank"
             >
               <span>{props.repo_name}</span>
@@ -53,7 +53,7 @@ function ExampleCard(props: any) {
             </a>
           </Link>
 
-          <div className="flex gap-2 items-center mt-3">
+          <div className="mt-3 flex items-center gap-2">
             {props.vercel_deploy_url && (
               <a target="_blank" href={props.vercel_deploy_url}>
                 <img className="h-6" src="https://vercel.com/button" />

apps/www/components/FeatureColumn.tsx

@@ -1,8 +1,8 @@
 function FeatureColumn({ icon, title, text }: any) {
   return (
     <>
-      {icon && <div className="mb-2 p">{icon}</div>}
-      <h4 className="text-base text-scale-1200 mb-4">{title}</h4>
+      {icon && <div className="p mb-2">{icon}</div>}
+      <h4 className="text-scale-1200 mb-4 text-base">{title}</h4>
       <p className="p">{text}</p>
     </>
   )

apps/www/components/Features/index.tsx

@@ -10,10 +10,10 @@ const Features = () => {
   const IconSections = Object.values(Solutions).map((solution: any) => {
     const { name, description, icon, label, url } = solution
     return (
-      <div key={name} className="mb-10 md:mb-0 space-y-4">
+      <div key={name} className="mb-10 space-y-4 md:mb-0">
         <div className="flex items-center">
           <ProductIcon icon={icon} />
-          <dt className="text-scale-1200 flex flex-row xl:flex-col ml-4">{name}</dt>
+          <dt className="text-scale-1200 ml-4 flex flex-row xl:flex-col">{name}</dt>
         </div>
 
         <p className="p">{description}</p>
@@ -29,9 +29,9 @@ const Features = () => {
   })
 
   return (
-    <SectionContainer className="pb-0 space-y-16">
+    <SectionContainer className="space-y-16 pb-0">
       <h3 className="h3">Build faster and focus on your products</h3>
-      <dl className="grid grid-cols-1 sm:grid-cols-2  gap-y-4 md:grid-cols-2 lg:grid-cols-4 md:gap-16 lg:gap-x-8 xl:gap-x-24">
+      <dl className="grid grid-cols-1 gap-y-4  sm:grid-cols-2 md:grid-cols-2 md:gap-16 lg:grid-cols-4 lg:gap-x-8 xl:gap-x-24">
         {IconSections}
       </dl>
     </SectionContainer>

apps/www/components/FloatingIcons/FloatingIcons.module.css

@@ -1,35 +1,35 @@
 .icon-react-one {
-  @apply absolute w-20 z-10;
+  @apply absolute z-10 w-20;
   right: 13%;
   top: 8%;
 }
 .icon-electron {
-  @apply absolute w-16 z-0;
+  @apply absolute z-0 w-16;
   left: 17%;
   top: 25%;
 }
 .icon-vue {
-  @apply absolute w-16 z-10;
+  @apply absolute z-10 w-16;
   right: 33%;
   top: 3%;
 }
 .icon-angular {
-  @apply absolute w-12 z-10;
+  @apply absolute z-10 w-12;
   right: 21%;
   top: 28%;
 }
 .icon-flutter {
-  @apply absolute w-16 z-10;
+  @apply absolute z-10 w-16;
   left: 5%;
   top: 15%;
 }
 .icon-nuxt {
-  @apply absolute w-12 z-10;
+  @apply absolute z-10 w-12;
   right: 5%;
   top: 28%;
 }
 .icon-redwood {
-  @apply absolute w-14 z-10;
+  @apply absolute z-10 w-14;
   /* background-color: yellow; */
   left: 15%;
   top: 5%;

apps/www/components/FloatingIcons/FloatingIcons.tsx

@@ -7,8 +7,8 @@ function FloatingIcons() {
   const { basePath } = useRouter()
 
   return (
-    <div className="absolute w-full h-full hidden lg:block">
-      <div className="container max-w-screen-2xl h-full relative mx-auto">
+    <div className="absolute hidden h-full w-full lg:block">
+      <div className="container relative mx-auto h-full max-w-screen-2xl">
         <img
           className={`${Styles['icon-react-one']}`}
           src={`${basePath}/images/product/auth/react-icon.svg`}

apps/www/components/Footer/index.tsx

@@ -13,7 +13,7 @@ const Footer = () => {
 
   return (
     <footer
-      className="border-t border-scale-500 dark:border-scale-600"
+      className="border-scale-500 dark:border-scale-600 border-t"
       aria-labelledby="footerHeading"
     >
       <h2 id="footerHeading" className="sr-only">
@@ -39,7 +39,7 @@ const Footer = () => {
             <div className="flex space-x-5">
               <a
                 href="https://twitter.com/supabase"
-                className="transition text-scale-900 hover:text-scale-1200"
+                className="text-scale-900 hover:text-scale-1200 transition"
               >
                 <span className="sr-only">Twitter</span>
                 <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -49,7 +49,7 @@ const Footer = () => {
 
               <a
                 href="https://github.com/supabase"
-                className="transition text-scale-900 hover:text-scale-1200"
+                className="text-scale-900 hover:text-scale-1200 transition"
               >
                 <span className="sr-only">GitHub</span>
                 <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -63,7 +63,7 @@ const Footer = () => {
 
               <a
                 href="https://discord.supabase.com/"
-                className="transition text-scale-900 hover:text-scale-1200"
+                className="text-scale-900 hover:text-scale-1200 transition"
               >
                 <span className="sr-only">Discord</span>
                 <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 71 55" aria-hidden="true">
@@ -77,7 +77,7 @@ const Footer = () => {
 
               <a
                 href="https://youtube.com/c/supabase"
-                className="transition text-scale-900 hover:text-scale-1200"
+                className="text-scale-900 hover:text-scale-1200 transition"
               >
                 <span className="sr-only">Youtube</span>
                 <svg
@@ -91,18 +91,18 @@ const Footer = () => {
               </a>
             </div>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-8 xl:mt-0 xl:col-span-2">
+          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-2 xl:mt-0">
             <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
               {FooterLinks.map((segment: any) => {
                 return (
                   <div key={`footer_${segment.title}`}>
-                    <h6 className="text-base text-scale-1200 overwrite">{segment.title}</h6>
+                    <h6 className="text-scale-1200 overwrite text-base">{segment.title}</h6>
                     <ul className="mt-4 space-y-2">
                       {segment.links.map((link: any, idx: number) => (
                         <li key={`${segment.title}_link_${idx}`}>
                           <a
                             href={link.url}
-                            className={`transition-colors text-sm ${
+                            className={`text-sm transition-colors ${
                               link.url
                                 ? 'text-scale-1100 hover:text-scale-1200 '
                                 : 'text-scale-900 hover:text-scale-900'
@@ -110,7 +110,7 @@ const Footer = () => {
                           >
                             {link.text}
                             {!link.url && (
-                              <div className="inline ml-2 xl:ml-0 xl:block 2xl:inline 2xl:ml-2 text-xs">
+                              <div className="ml-2 inline text-xs xl:ml-0 xl:block 2xl:ml-2 2xl:inline">
                                 <Badge color="scale" size="small">
                                   Coming soon
                                 </Badge>
@@ -126,7 +126,7 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <div className="mt-32 border-t border-scale-500 dark:border-scale-600 pt-8 flex justify-between">
+        <div className="border-scale-500 dark:border-scale-600 mt-32 flex justify-between border-t pt-8">
           <small className="small">&copy; Supabase Inc</small>
           <DarkModeToggle />
         </div>

apps/www/components/Hero.tsx

@@ -13,22 +13,22 @@ const Hero = () => {
           <main className="">
             <div className="mx-auto">
               <div className="lg:grid lg:grid-cols-12 lg:gap-16">
-                <div className="md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+                <div className="md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:items-center lg:text-left">
                   <div
                     className="
-                    sm:mx-auto md:w-3/4 lg:w-full lg:mx-0 
-                    space-y-12"
+                    space-y-12 sm:mx-auto md:w-3/4 lg:mx-0 
+                    lg:w-full"
                   >
                     <div>
                       <h1
                         className="
-                        sm:leading-none 
-                        text-xl lg:text-4xl xl:text-5xl
-                        text-scale-1200
+                        text-scale-1200 
+                        text-xl sm:leading-none lg:text-4xl
+                        xl:text-5xl
                         "
                       >
                         <span className="block">The Open Source</span>
-                        <span className="text-brand-900 md:ml-0 block">Firebase Alternative</span>
+                        <span className="text-brand-900 block md:ml-0">Firebase Alternative</span>
                       </h1>
                       <div>
                         <p className="p text-base sm:mt-5 lg:text-lg ">
@@ -38,7 +38,7 @@ const Hero = () => {
                         </p>
                       </div>
                     </div>
-                    <div className="flex gap-2 items-center">
+                    <div className="flex items-center gap-2">
                       <Link href="https://app.supabase.io" as="https://app.supabase.io" passHref>
                         <Button as="a" size="small" className="text-white">
                           Start your project
@@ -55,17 +55,17 @@ const Hero = () => {
                       <div className="w-full sm:max-w-lg lg:ml-0">
                         <div className="flex flex-wrap items-center justify-start">
                           <img
-                            className="h-8 sm:h-10 pr-5 md:pr-10 mb-5"
+                            className="mb-5 h-8 pr-5 sm:h-10 md:pr-10"
                             src={`${basePath}/images/logos/yc--grey.png`}
                             alt="Y Combinator"
                           />
                           <img
-                            className="relative h-5 sm:h-7 pr-5 md:pr-10 mb-5"
+                            className="relative mb-5 h-5 pr-5 sm:h-7 md:pr-10"
                             src={`${basePath}/images/logos/mozilla--grey.png`}
                             alt="Mozilla"
                           />
                           <img
-                            className="relative h-5 sm:h-7 pr-5 md:pr-10 mb-5"
+                            className="relative mb-5 h-5 pr-5 sm:h-7 md:pr-10"
                             src={`${basePath}/images/logos/coatue.png`}
                             alt="Coatue"
                           />
@@ -74,20 +74,20 @@ const Hero = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex content-center mt-16 sm:mt-24 lg:absolute lg:-right-80 lg:w-9/12 lg:mt-0 lg:col-span-6 xl:relative xl:right-0 xl:w-full">
-                  <div className="flex flex-col items-center justify-center relative w-full rounded-md">
-                    <div className="w-full rounded-t-md h-5 bg-scale-400 flex items-center justify-start px-2">
-                      <div className="h-2 w-2 mr-2 rounded-full bg-scale-800" />
-                      <div className="h-2 w-2 mr-2 rounded-full bg-scale-800" />
-                      <div className="h-2 w-2 mr-2 rounded-full bg-scale-800" />
+                <div className="mt-16 flex content-center sm:mt-24 lg:absolute lg:-right-80 lg:col-span-6 lg:mt-0 lg:w-9/12 xl:relative xl:right-0 xl:w-full">
+                  <div className="relative flex w-full flex-col items-center justify-center rounded-md">
+                    <div className="bg-scale-400 flex h-5 w-full items-center justify-start rounded-t-md px-2">
+                      <div className="bg-scale-800 mr-2 h-2 w-2 rounded-full" />
+                      <div className="bg-scale-800 mr-2 h-2 w-2 rounded-full" />
+                      <div className="bg-scale-800 mr-2 h-2 w-2 rounded-full" />
                     </div>
                     <div
-                      className="w-full relative bg-scale-1000 shadow-lg rounded-b-md"
+                      className="bg-scale-1000 relative w-full rounded-b-md shadow-lg"
                       style={{ padding: '56.25% 0 0 0' }}
                     >
                       <iframe
                         title="Demo video showcasing Supabase"
-                        className="absolute w-full h-full rounded-b-md"
+                        className="absolute h-full w-full rounded-b-md"
                         src="https://www.youtube-nocookie.com/embed/dBOSUER_5T4?playlist=dBOSUER_5T4&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&disablekb=1&mute=1&muted=1"
                         style={{ top: 0, left: 0 }}
                         frameBorder="0"

apps/www/components/ImageGrid.tsx

@@ -70,7 +70,7 @@ const ImageGrid = ({
           if (x.link) {
             return (
               <Link href={link}>
-                <div className="cursor-pointer transform duration-100 ease-in-out scale-100 hover:scale-105 hover:shadow-sm hover:z-50">
+                <div className="scale-100 transform cursor-pointer duration-100 ease-in-out hover:z-50 hover:scale-105 hover:shadow-sm">
                   {children}
                 </div>
               </Link>
@@ -85,14 +85,14 @@ const ImageGrid = ({
             <div
               key={`${x.name}-${i}`}
               className={`
-                  col-span-1 flex items-center justify-center 
-                bg-gray-50 
-                dark:bg-scale-400
-                  ${x.link && 'hover:bg-gray-100 dark:hover:bg-scale-600'}
+                  dark:bg-scale-400 col-span-1 flex items-center 
+                justify-center 
+                bg-gray-50
+                  ${x.link && 'dark:hover:bg-scale-600 hover:bg-gray-100'}
                   p-8 ${className}`}
             >
               <div
-                className={`relative overflow-auto w-full h-8
+                className={`relative h-8 w-full overflow-auto
                     ${imgPadding[padding]}
                   `}
               >
@@ -104,9 +104,9 @@ const ImageGrid = ({
                   objectPosition="center"
                   className="
                       bg-no-repeat
-                    filter 
+                    opacity-50 
                     contrast-0
-                    opacity-50
+                    filter
                   "
                 />
               </div>

apps/www/components/Layouts/SectionContainer.tsx

@@ -8,7 +8,7 @@ interface Props {
 const SectionContainer = ({ children, className }: Props) => (
   <div
     className={classNames(
-      `container mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24`,
+      `sm:py-18 container relative mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20`,
       className
     )}
   >

apps/www/components/MadeForDevelopers/CodeExamples.tsx

@@ -132,9 +132,9 @@ const CodeExamples = () => {
       <div className="grid grid-cols-12 gap-2 xl:gap-8">
         <div className="col-span-12 text-center lg:col-span-3 lg:hidden">{<TabNav />}</div>
         <div className="col-span-12 lg:col-span-9">
-          <div className="rounded-md rounded-b-lg bg-dark-600 dark:bg-scale-300">
-            <div className="p-2 pl-5 flex justify-between items-center">
-              <p className="text-sm truncate mr-2 sm:text-base text-dark-100">
+          <div className="bg-dark-600 dark:bg-scale-300 rounded-md rounded-b-lg">
+            <div className="flex items-center justify-between p-2 pl-5">
+              <p className="text-dark-100 mr-2 truncate text-sm sm:text-base">
                 {exampleList[example].description}
               </p>
               <div className="dark">
@@ -177,7 +177,7 @@ const CodeExamples = () => {
             </SyntaxHighlighter>
           </div>
         </div>
-        <div className="col-span-12 text-center hidden lg:col-span-3 lg:block">{<Buttons />}</div>
+        <div className="col-span-12 hidden text-center lg:col-span-3 lg:block">{<Buttons />}</div>
       </div>
     </div>
   )

apps/www/components/MadeForDevelopers/index.tsx

@@ -23,7 +23,7 @@ const MadeForDevelopers = () => {
         // @ts-ignore
         content={CodeExamples}
         footer={[
-          <dl className="grid gap-y-4 grid-cols-12 md:gap-8" key={'madefordeveloper-footer'}>
+          <dl className="grid grid-cols-12 gap-y-4 md:gap-8" key={'madefordeveloper-footer'}>
             {DeveloperFeatures.map((feature: any, i: number) => {
               return (
                 <div className="col-span-12 md:col-span-6 lg:col-span-6" key={i}>
@@ -31,7 +31,7 @@ const MadeForDevelopers = () => {
                     <dt>
                       <FeatureColumn title={feature.name} text={feature.description} />
                       {feature.badge && (
-                        <div className="block mb-4">
+                        <div className="mb-4 block">
                           <Badge dot color="blue">
                             {feature.badge}
                           </Badge>

apps/www/components/Nav/Announcement.tsx

@@ -42,22 +42,22 @@ const Announcement = () => {
       <div
         onClick={handleLink}
         className="
-          relative
-          cursor-pointer
-          bg-gradient-to-r from-green-900 to-green-1000
-          hover:from-green-1000 hover:to-green-1100        
-          text-white 
-          flex flex-row space-x-3
+          to-green-1000
+          hover:from-green-1000
+          hover:to-green-1100 relative flex
+          cursor-pointer flex-row        
+          space-x-3 
+          bg-gradient-to-r from-green-900 text-white
         "
       >
         <div
           className="
-            flex items-center justify-center p-3 mx-auto text-sm lg:container lg:px-16 xl:px-20 font-medium 
-            lg:divide-x divide-white
+            mx-auto flex items-center justify-center divide-white p-3 text-sm font-medium lg:container lg:divide-x 
+            lg:px-16 xl:px-20
           "
         >
-          <span className="px-3 hidden lg:block">{announcement.text}</span>
-          <span className="px-3 flex items-center space-x-2">
+          <span className="hidden px-3 lg:block">{announcement.text}</span>
+          <span className="flex items-center space-x-2 px-3">
             <span>
               {
                 // @ts-ignore
@@ -68,7 +68,7 @@ const Announcement = () => {
           </span>
         </div>
         <div
-          className="transition-opacity absolute right-4 h-full flex items-center opacity-50 hover:opacity-100"
+          className="absolute right-4 flex h-full items-center opacity-50 transition-opacity hover:opacity-100"
           onClick={handleClose}
         >
           <IconX size={16} />

apps/www/components/Nav/Company.tsx

@@ -16,11 +16,11 @@ const Company = () => {
     const content = (
       <a
         href="#"
-        className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-dark-700 transition ease-in-out duration-150"
+        className="dark:hover:bg-dark-700 -m-3 flex items-start rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50"
       >
         {/* <!-- Heroicon name: support --> */}
         <svg
-          className="flex-shrink-0 h-6 w-6 stroke-gray dark:stroke-white "
+          className="stroke-gray h-6 w-6 flex-shrink-0 dark:stroke-white "
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -31,7 +31,7 @@ const Company = () => {
         </svg>
         <div className="ml-4">
           <p className="text-base font-medium text-gray-900 dark:text-white">{text}</p>
-          <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">{description}</p>
+          <p className="dark:text-dark-300 mt-1 text-sm text-gray-500">{description}</p>
         </div>
       </a>
     )
@@ -39,7 +39,7 @@ const Company = () => {
       <a
         key={text}
         href={url}
-        className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150"
+        className="-m-3 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out"
       >
         {content}
       </a>
@@ -56,7 +56,7 @@ const Company = () => {
       </nav>
       <div className="px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
         <div>
-          <h3 className="text-sm font-medium tracking-wide text-gray-500 dark:text-dark-300 uppercase">
+          <h3 className="dark:text-dark-300 text-sm font-medium uppercase tracking-wide text-gray-500">
             Latest blog posts
           </h3>
           <ul className="mt-6 space-y-6">
@@ -64,13 +64,13 @@ const Company = () => {
               <li className="flow-root" key={`flyout_case_${idx}`}>
                 <a
                   href={caseStudy.url}
-                  className="-m-3 py-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
+                  className="dark:hover:bg-dark-600 -m-3 flex rounded-lg py-3 transition duration-150 ease-in-out hover:bg-gray-100"
                 >
                   <div className="min-w-0 flex-1 sm:ml-3">
-                    <h4 className="text-base font-medium text-gray-900 dark:text-white truncate">
+                    <h4 className="truncate text-base font-medium text-gray-900 dark:text-white">
                       {caseStudy.title}
                     </h4>
-                    <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">
+                    <p className="dark:text-dark-300 mt-1 text-sm text-gray-500">
                       {caseStudy.description}
                     </p>
                   </div>
@@ -82,7 +82,7 @@ const Company = () => {
         <div className="mt-6 text-sm font-medium">
           <a
             href="/blog"
-            className="text-gray-600 hover:text-gray-500 dark:text-brand-900 dark:hover:text-brand-700 transition ease-in-out duration-150"
+            className="dark:text-brand-900 dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
           >
             View all posts <span aria-hidden="true">&rarr;</span>
           </a>

apps/www/components/Nav/Developers.tsx

@@ -18,10 +18,10 @@ const Developers = () => {
     const { text, description, url, icon } = company
 
     const content = (
-      <div className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-scale-500 transition ease-in-out duration-150">
+      <div className="dark:hover:bg-scale-500 -m-3 flex items-start rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50">
         {/* <!-- Heroicon name: support --> */}
         <svg
-          className="flex-shrink-0 h-5 w-5 stroke-scale-900"
+          className="stroke-scale-900 h-5 w-5 flex-shrink-0"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -31,8 +31,8 @@ const Developers = () => {
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={icon} />
         </svg>
         <div className="ml-4">
-          <h5 className="text-base text-scale-1200">{text}</h5>
-          <p className="text-sm text-scale-900">{description}</p>
+          <h5 className="text-scale-1200 text-base">{text}</h5>
+          <p className="text-scale-900 text-sm">{description}</p>
         </div>
       </div>
     )
@@ -40,14 +40,14 @@ const Developers = () => {
       <a
         key={text}
         href={url}
-        className="p-3 col-span-6 rounded hover:bg-gray-50 dark:hover:bg-scale-500 transition"
+        className="dark:hover:bg-scale-500 col-span-6 rounded p-3 transition hover:bg-gray-50"
       >
         {content}
       </a>
     ) : (
       <div
         key={text}
-        className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150"
+        className="-m-3 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out"
       >
         {content}
       </div>
@@ -57,7 +57,7 @@ const Developers = () => {
   return (
     <div className="grid grid-cols-12">
       <nav className="col-span-6 py-8" aria-labelledby="solutionsHeading">
-        <div className="grid grid-cols-12 m-3 gap-x-8 gap-y-4 py-4 pr-3">{iconSections}</div>
+        <div className="m-3 grid grid-cols-12 gap-x-8 gap-y-4 py-4 pr-3">{iconSections}</div>
       </nav>
       <div className="col-span-6">
         <div className="m-3 mx-6">
@@ -67,9 +67,9 @@ const Developers = () => {
               <li className="flow-root" key={`flyout_case_${idx}`}>
                 <a
                   href={caseStudy.url}
-                  className="p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition ease-in-out duration-150 border items-center"
+                  className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
                 >
-                  <div className="hidden sm:block flex-shrink-0 relative overflow-auto w-32 h-20 rounded-md">
+                  <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
                     <Image
                       src={`${basePath}/${caseStudy.imgUrl}`}
                       alt="caseStudyThumb"
@@ -78,7 +78,7 @@ const Developers = () => {
                     />
                   </div>
                   <div className="min-w-0 flex-1 sm:ml-4">
-                    <h4 className="text-base text-scale-1200 mb-0 text-normal">
+                    <h4 className="text-scale-1200 text-normal mb-0 text-base">
                       {caseStudy.title}
                     </h4>
                     <p className="p text-sm">{caseStudy.description}</p>

apps/www/components/Nav/Product.tsx

@@ -16,10 +16,10 @@ const Product = () => {
       <div className="flex lg:flex-col">
         <div className="flex flex-row items-center">
           <ProductIcon icon={icon} />
-          <h5 className="ml-3 mb-0 text-base text-scale-1200 overwrite">{name}</h5>
+          <h5 className="text-scale-1200 overwrite ml-3 mb-0 text-base">{name}</h5>
         </div>
-        <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 mt-3">
-          <p className="text-sm text-scale-1000">{description}</p>
+        <div className="ml-4 mt-3 md:flex md:flex-1 md:flex-col md:justify-between lg:ml-0">
+          <p className="text-scale-1000 text-sm">{description}</p>
           {label && (
             <div className="mt-2">
               <Badge>{label}</Badge>
@@ -33,7 +33,7 @@ const Product = () => {
         <a
           key={name}
           href={url}
-          className="p-3 col-span-6 rounded hover:bg-scale-300 dark:hover:bg-scale-500 transition"
+          className="hover:bg-scale-300 dark:hover:bg-scale-500 col-span-6 rounded p-3 transition"
         >
           {content}
         </a>
@@ -44,7 +44,7 @@ const Product = () => {
   return (
     <div className="grid grid-cols-12">
       <nav className="col-span-6" aria-labelledby="product">
-        <div className="grid grid-cols-12 m-3 gap-x-8 gap-y-4 py-4 pr-3">{iconSections}</div>
+        <div className="m-3 grid grid-cols-12 gap-x-8 gap-y-4 py-4 pr-3">{iconSections}</div>
       </nav>
       <div className="col-span-6">
         <div className="m-3 mx-6">
@@ -58,9 +58,9 @@ const Product = () => {
                 <li className="flow-root" key={`flyout_case_${idx}`}>
                   <a
                     href={caseStudy.url}
-                    className="p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition ease-in-out duration-150 border items-center"
+                    className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
                   >
-                    <div className="hidden sm:block flex-shrink-0 relative overflow-auto w-32 h-20 rounded-md">
+                    <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
                       <Image
                         src={`${basePath}/${caseStudy.imgUrl}`}
                         alt="caseStudyThumb"
@@ -69,7 +69,7 @@ const Product = () => {
                       />
                     </div>
                     <div className="min-w-0 flex-1 sm:ml-4">
-                      <h4 className="text-base text-scale-1200 mb-0 text-normal">
+                      <h4 className="text-scale-1200 text-normal mb-0 text-base">
                         {caseStudy.title}
                       </h4>
                       <p className="p text-sm">{caseStudy.description}</p>

apps/www/components/Nav/index.tsx

@@ -49,7 +49,7 @@ const Nav = () => {
     const content = (
       <div className="mb-3 flex md:h-full lg:flex-col">
         <div className="flex-shrink-0">
-          <div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-800 text-white dark:bg-white dark:text-gray-800 sm:h-12 sm:w-12">
+          <div className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-gray-800 text-white dark:bg-white dark:text-gray-800 sm:h-12 sm:w-12">
             {/* <!-- Heroicon name: chart-bar --> */}
             <svg
               className="h-6 w-6"
@@ -63,9 +63,9 @@ const Nav = () => {
             </svg>
           </div>
         </div>
-        <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
+        <div className="ml-4 md:flex md:flex-1 md:flex-col md:justify-between lg:ml-0 lg:mt-4">
           <div>
-            <p className="text-base font-medium text-gray-900 dark:text-white space-x-2">
+            <p className="space-x-2 text-base font-medium text-gray-900 dark:text-white">
               <span>{name}</span>
               {label && (
                 <Badge dot color="green">
@@ -73,10 +73,10 @@ const Nav = () => {
                 </Badge>
               )}
             </p>
-            <p className="mt-1 text-sm text-scale-1100 dark:text-dark-100">{description}</p>
+            <p className="text-scale-1100 dark:text-dark-100 mt-1 text-sm">{description}</p>
           </div>
           {url && (
-            <p className="mt-2 text-sm font-medium text-brand-900 lg:mt-4">
+            <p className="text-brand-900 mt-2 text-sm font-medium lg:mt-4">
               <TextLink label={label ? 'Get notified' : 'Learn more'} url={url} />
             </p>
           )}
@@ -87,14 +87,14 @@ const Nav = () => {
       <a
         key={`solution_${idx}`}
         href={url}
-        className="-m-3 p-3 my-2 flex flex-col justify-between rounded-lg hover:bg-gray-50 dark:hover:bg-scale-600 transition ease-in-out duration-150"
+        className="dark:hover:bg-scale-600 -m-3 my-2 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50"
       >
         {content}
       </a>
     ) : (
       <div
         key={`solution_${idx}`}
-        className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150"
+        className="-m-3 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out"
       >
         {content}
       </div>
@@ -107,11 +107,11 @@ const Nav = () => {
 
   const HamburgerButton = (props: HamburgerButtonProps) => (
     <div
-      className="absolute inset-y-0 left-0 px-2 flex items-center lg:hidden"
+      className="absolute inset-y-0 left-0 flex items-center px-2 lg:hidden"
       onClick={() => props.toggleFlyOut()}
     >
       <button
-        className="inline-flex items-center justify-center p-2 rounded-md bg-gray-50 text-scale-900 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300"
+        className="text-scale-900 focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset"
         aria-expanded="false"
       >
         <span className="sr-only">Open main menu</span>
@@ -155,13 +155,13 @@ const Nav = () => {
     <div
       className={
         `
-        inline-flex items-center 
-        px-1 border-b-2 border-transparent 
-        text-sm 
-        font-medium 
+        text-scale-1200 hover:text-brand-900 
+        inline-flex cursor-pointer items-center 
+        border-b-2 
+        border-transparent 
+        px-1
+        text-sm font-medium
         transition-colors
-        text-scale-1200 hover:text-brand-900
-        cursor-pointer
                 ` + props.active
       }
       onClick={props.onClick}
@@ -170,8 +170,8 @@ const Nav = () => {
         <span>{props.title}</span>
         <div
           className={
-            'flex items-center justify-center ml-2 h-5 w-5 text-scale-900 group-hover:text-scale-900 transition ease-in-out duration-150' +
-            (props.active && ' transform transition-all duration-100 rotate-180')
+            'text-scale-900 group-hover:text-scale-900 ml-2 flex h-5 w-5 items-center justify-center transition duration-150 ease-in-out' +
+            (props.active && ' rotate-180 transform transition-all duration-100')
           }
         >
           <IconChevronDown size={14} strokeWidth={2} />
@@ -184,14 +184,14 @@ const Nav = () => {
     <>
       <Announcement />
       <div className="sticky top-0 z-50">
-        <div className="absolute w-full h-full bg-scale-200 top-0 opacity-80"></div>
-        <nav className="backdrop-blur-sm border-b border-scale-400">
+        <div className="bg-scale-200 absolute top-0 h-full w-full opacity-80"></div>
+        <nav className="border-scale-400 border-b backdrop-blur-sm">
           {/* <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0"> */}
-          <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-16 xl:px-20">
+          <div className="relative mx-auto flex h-16 justify-between lg:container lg:px-16 xl:px-20">
             <HamburgerButton toggleFlyOut={() => setOpen(true)} />
-            <div className="flex-1 flex items-center justify-center sm:items-stretch lg:justify-between">
+            <div className="flex flex-1 items-center justify-center sm:items-stretch lg:justify-between">
               <div className="flex items-center">
-                <div className="flex-shrink-0 flex items-center">
+                <div className="flex flex-shrink-0 items-center">
                   <Link href="/" as="/">
                     <a className="block h-6 w-auto">
                       <Image
@@ -207,7 +207,7 @@ const Nav = () => {
                     </a>
                   </Link>
                 </div>
-                <div className="pl-4 hidden sm:ml-6 lg:flex sm:space-x-4">
+                <div className="hidden pl-4 sm:ml-6 sm:space-x-4 lg:flex">
                   <FlyOutNavButton
                     title={'Product'}
                     onClick={() => handleToggle(() => setOpenProduct(!openProduct))}
@@ -221,9 +221,9 @@ const Nav = () => {
                   <a
                     href="/pricing"
                     className={`
-                    inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium
-                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 p-5
-                    dark:text-dark-100 dark:hover:border-dark-100
+                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                    border-b-2 border-transparent p-5 px-1
+                    text-sm font-medium
                   `}
                   >
                     Pricing
@@ -231,9 +231,9 @@ const Nav = () => {
                   <a
                     href="/blog"
                     className={`
-                    inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium
-                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 p-5
-                    dark:text-dark-100 dark:hover:border-dark-100
+                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                    border-b-2 border-transparent p-5 px-1
+                    text-sm font-medium
                   `}
                   >
                     Blog
@@ -249,18 +249,18 @@ const Nav = () => {
                   target="_blank"
                   type="text"
                   icon={
-                    <div className="flex items-center justify-center  text-brand-800 w-4 h-4">
+                    <div className="text-brand-800 flex h-4  w-4 items-center justify-center">
                       <div
-                        className="text-scale-900 flex items-center justify-center w-3 h-3 
+                        className="text-scale-900 flex h-3 w-3 items-center justify-center 
                       
-                      group-hover:w-4  
+                      transition-all  
                       group-hover:h-4 
-                      group-hover:text-yellow-900 
-                      group-focus:w-4  
+                      group-hover:w-4 
+                      group-hover:text-yellow-900  
                       group-focus:h-4 
-                      group-focus:text-yellow-900 
+                      group-focus:w-4 
                       
-                      transition-all"
+                      group-focus:text-yellow-900"
                       >
                         <IconStar strokeWidth={2} />
                       </div>
@@ -276,7 +276,7 @@ const Nav = () => {
                   </Button>
                 </a>
                 <a href="https://app.supabase.io/">
-                  <Button className="text-white hidden lg:block">Start your project</Button>
+                  <Button className="hidden text-white lg:block">Start your project</Button>
                 </a>
               </div>
             </div>
@@ -294,13 +294,13 @@ const Nav = () => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <div className="p-4 md:p-8 h-screen w-screen fixed bg-white transform overflow-y-scroll -inset-y-0 z-50 dark:bg-scale-300">
+            <div className="dark:bg-scale-300 fixed -inset-y-0 z-50 h-screen w-screen transform overflow-y-scroll bg-white p-4 md:p-8">
               <div className="absolute right-4 top-4 items-center justify-between">
                 <div className="-mr-2">
                   <button
                     onClick={() => setOpen(false)}
                     type="button"
-                    className="inline-flex items-center justify-center p-2 rounded-md bg-white text-scale-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-900 dark:bg-scale-300 dark:hover:bg-scale-400"
+                    className="text-scale-900 focus:ring-brand-900 dark:bg-scale-300 dark:hover:bg-scale-400 inline-flex items-center justify-center rounded-md bg-white p-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
                   >
                     <span className="sr-only">Close menu</span>
                     <svg
@@ -323,50 +323,50 @@ const Nav = () => {
               </div>
               {/* </div> */}
               <div className="mt-6 mb-12">
-                <div className="pt-2 pb-4 space-y-1">
+                <div className="space-y-1 pt-2 pb-4">
                   <a
                     href="https://app.supabase.io/"
-                    className="block pl-3 pr-4 text-base font-medium text-scale-900 dark:text-white"
+                    className="text-scale-900 block pl-3 pr-4 text-base font-medium dark:text-white"
                   >
                     Sign in
                   </a>
                 </div>
-                <div className="pt-2 pb-4 space-y-1">
+                <div className="space-y-1 pt-2 pb-4">
                   <a
                     href="/docs"
-                    className="block pl-3 pr-4 py-2 text-base font-medium text-scale-900 hover:bg-gray-50 dark:hover:bg-scale-600 hover:border-gray-300 dark:text-white rounded-md"
+                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
                   >
                     Developers
                   </a>
                   <a
                     href="/company"
-                    className="block pl-3 pr-4 py-2 text-base font-medium text-scale-900 hover:bg-gray-50 dark:hover:bg-scale-600 hover:border-gray-300 dark:text-white rounded-md"
+                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
                   >
                     Company
                   </a>
                   <a
                     href="/pricing"
-                    className="block pl-3 pr-4 py-2 text-base font-medium text-scale-900 hover:bg-gray-50 dark:hover:bg-scale-600 hover:border-gray-300 dark:text-white rounded-md"
+                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
                   >
                     Pricing
                   </a>
                   <a
                     href="https://github.com/supabase/supabase"
                     target="_blank"
-                    className="block pl-3 pr-4 py-2 text-base font-medium text-scale-900 hover:bg-gray-50 dark:hover:bg-scale-600 hover:border-gray-300 dark:text-white rounded-md"
+                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
                   >
                     GitHub
                   </a>
                   <a
                     href="/blog"
                     target="_blank"
-                    className="block pl-3 pr-4 py-2 text-base font-medium text-scale-900 hover:bg-gray-50 dark:hover:bg-scale-600 hover:border-gray-300 dark:text-white rounded-md"
+                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
                   >
                     Blog
                   </a>
                 </div>
                 <div className="p-3">
-                  <p className="mb-6 text-sm text-scale-900">Products available:</p>
+                  <p className="text-scale-900 mb-6 text-sm">Products available:</p>
                   {iconSections}
                 </div>
               </div>

apps/www/components/Partners/BecomeAPartners.tsx

@@ -68,13 +68,13 @@ export default function BecomeAPartner({ supabase }: { supabase: SupabaseClient
 
   return (
     <div className="border-t">
-      <div id="become-a-partner" className="max-w-2xl mx-auto space-y-12 py-12 px-6">
+      <div id="become-a-partner" className="mx-auto max-w-2xl space-y-12 py-12 px-6">
         <h2 className="h2">Become a Partner</h2>
 
         <Form initialValues={INITIAL_VALUES} validate={validate} onSubmit={handleFormSubmit}>
           {({ isSubmitting }: any) => (
             <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-              <div className="h-24 col-span-2">
+              <div className="col-span-2 h-24">
                 <Select
                   id="type"
                   name="type"
@@ -182,7 +182,7 @@ export default function BecomeAPartner({ supabase }: { supabase: SupabaseClient
                 />
               </div>
 
-              <div className="flex flex-row-reverse w-full col-span-2 pt-4">
+              <div className="col-span-2 flex w-full flex-row-reverse pt-4">
                 <Button
                   size="xlarge"
                   disabled={formSubmitted}

apps/www/components/Partners/PartnerLinkBox.tsx

@@ -25,18 +25,18 @@ const PartnerLinkBox = ({
   const content = (
     <div
       className="
-        cursor-pointer
         hover:bg-scale-300
-        rounded
-        group px-5 py-4 bg-scale-200 
-        border border-scale-500 dark:border-scale-400 
+        bg-scale-200
+        border-scale-500
+        dark:border-scale-400 group cursor-pointer rounded 
+        border px-5 py-4 
         "
     >
       <div className="flex flex-col gap-3">
         <div
           className={`${colors[color]}
-            rounded-md h-8 w-8
-            flex items-center justify-center
+            flex h-8 w-8
+            items-center justify-center rounded-md
             transition-all
             group-hover:scale-110
             `}
@@ -44,7 +44,7 @@ const PartnerLinkBox = ({
           {icon}
         </div>
         <div>
-          <h5 className="text-base mb-2 text-scale-1200">{title}</h5>
+          <h5 className="text-scale-1200 mb-2 text-base">{title}</h5>
           <p className="p text-sm">{description}</p>
         </div>
       </div>

apps/www/components/Partners/TileGrid.tsx

@@ -14,7 +14,7 @@ export default function TileGrid({
       {Object.keys(partnersByCategory).map((category) => (
         <div key={category} id={category.toLowerCase()} className="space-y-8">
           {!hideCategories && <h2 className="h2">{category}</h2>}
-          <div className="grid  gap-5 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+          <div className="grid  grid-cols-1 gap-5 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
             {partnersByCategory[category].map((p) => (
               <Link key={p.slug} href={`/partners/${p.slug}`}>
                 <a
@@ -26,30 +26,30 @@ export default function TileGrid({
 
                 bg-scale-100 dark:bg-scale-300
                 hover:bg-scale-200 hover:dark:bg-scale-400
-                group flex flex-col w-full h-full px-6 py-6 transition-all 
-                border rounded 
-                shadow 
+                group flex h-full w-full flex-col rounded border px-6 
+                py-6 shadow 
+                transition-all 
 
                
                 
                 hover:shadow-lg"
                   >
                     <div className="flex w-full space-x-6">
-                      <div className="w-10 h-10 transition-all scale-100 group-hover:scale-110">
+                      <div className="h-10 w-10 scale-100 transition-all group-hover:scale-110">
                         <Image
                           layout="fixed"
                           width={40}
                           height={40}
-                          className="w-10 h-10 bg-gray-300 rounded-full"
+                          className="h-10 w-10 rounded-full bg-gray-300"
                           src={p.logo}
                           alt={p.title}
                         />
                       </div>
                       <div>
-                        <h3 className="transition-colors text-xl text-scale-1100 group-hover:text-scale-1200 mb-2">
+                        <h3 className="text-scale-1100 group-hover:text-scale-1200 mb-2 text-xl transition-colors">
                           {p.title}
                         </h3>
-                        <p className="text-sm text-scale-900">{p.description}</p>
+                        <p className="text-scale-900 text-sm">{p.description}</p>
                       </div>
                     </div>
                   </div>

apps/www/components/PricingAddOnTable.tsx

@@ -30,19 +30,19 @@ const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {
   )
 
   return (
-    <div className="overflow-hidden transition duration-500 rounded-md shadow-md hover:shadow-lg group">
+    <div className="group overflow-hidden rounded-md shadow-md transition duration-500 hover:shadow-lg">
       <Collapsible open={isAddOnOpen} onOpenChange={setIsAddOnOpen}>
         <Collapsible.Trigger asChild>
           <button
             className={classNames(
-              'flex flex-col items-start lg:flex-row lg:items-center w-full rounded-t-md group text-scale-1200 bg-scale-100 dark:bg-scale-200 dark:border border-scale-300',
+              'text-scale-1200 bg-scale-100 dark:bg-scale-200 border-scale-300 group flex w-full flex-col items-start rounded-t-md dark:border lg:flex-row lg:items-center',
               !isAddOnOpen && 'rounded-b-md'
             )}
             type="button"
           >
-            <div className="flex flex-col items-start flex-1 w-full lg:w-auto lg:items-center lg:flex-row">
-              <div className="relative flex items-center self-stretch w-full py-8 pl-4 space-x-3 bg-white dark:bg-scale-300 lg:py-0 lg:w-72">
-                <span className="p-2 transition-transform duration-500 rounded-md shadow-sm group-hover:scale-105 bg-scale-1200 text-scale-100 group-hover:shadow">
+            <div className="flex w-full flex-1 flex-col items-start lg:w-auto lg:flex-row lg:items-center">
+              <div className="dark:bg-scale-300 relative flex w-full items-center space-x-3 self-stretch bg-white py-8 pl-4 lg:w-72 lg:py-0">
+                <span className="bg-scale-1200 text-scale-100 rounded-md p-2 shadow-sm transition-transform duration-500 group-hover:scale-105 group-hover:shadow">
                   {icon}
                 </span>
                 <span className="flex-shrink-0">
@@ -50,8 +50,8 @@ const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {
                 </span>
               </div>
 
-              <div className="flex items-center justify-between flex-1 lg:border-l border-scale-500 dark:border-scale-400">
-                <div className="grid grid-cols-1 px-3 py-6 gap-y-3 gap-x-6 grid-flow-rows lg:grid-cols-2">
+              <div className="border-scale-500 dark:border-scale-400 flex flex-1 items-center justify-between lg:border-l">
+                <div className="grid-flow-rows grid grid-cols-1 gap-y-3 gap-x-6 px-3 py-6 lg:grid-cols-2">
                   {pricing.features.map((feature, i) => (
                     <div key={i} className="flex items-center space-x-2">
                       <Check />
@@ -62,19 +62,19 @@ const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {
               </div>
             </div>
 
-            <div className="flex items-center self-center gap-2 p-3">
-              <IconChevronUp className="w-8 h-8 transition data-open-parent:rotate-0 data-closed-parent:rotate-180" />
+            <div className="flex items-center gap-2 self-center p-3">
+              <IconChevronUp className="data-open-parent:rotate-0 data-closed-parent:rotate-180 h-8 w-8 transition" />
             </div>
           </button>
         </Collapsible.Trigger>
 
         <Collapsible.Content>
           <div>
-            <table className="hidden w-full m-0 overflow-hidden rounded-b table-auto text-scale-1200 lg:table">
+            <table className="text-scale-1200 m-0 hidden w-full table-auto overflow-hidden rounded-b lg:table">
               <thead>
                 <tr className="bg-scale-500">
                   {columnNames.map((column) => (
-                    <th key={column.key} className="p-3 font-medium text-left">
+                    <th key={column.key} className="p-3 text-left font-medium">
                       {column.title}
                     </th>
                   ))}
@@ -93,13 +93,13 @@ const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {
               </tbody>
             </table>
 
-            <table className="w-full m-0 overflow-hidden rounded-b table-auto text-scale-1200 lg:hidden">
+            <table className="text-scale-1200 m-0 w-full table-auto overflow-hidden rounded-b lg:hidden">
               <tbody>
                 {pricing.rows.map((row, i) => (
                   <Fragment key={i}>
                     {row.columns.map((column) => (
                       <tr key={column.key} className={classNames(i % 2 === 0 && 'bg-scale-300')}>
-                        <th className="py-3 pl-4 font-medium text-left">{column.title}</th>
+                        <th className="py-3 pl-4 text-left font-medium">{column.title}</th>
                         <td className="px-4 py-3">{column.value}</td>
                       </tr>
                     ))}

apps/www/components/PricingTableRow.tsx

@@ -28,7 +28,7 @@ const IncludedCheck = (props: any) => (
 const Minus = (props: any) => (
   <>
     <svg
-      className="w-5 h-5 text-scale-1200 dark:text-white"
+      className="text-scale-1200 h-5 w-5 dark:text-white"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 20 20"
       fill="currentColor"
@@ -50,11 +50,11 @@ export const PricingTableRowDesktop = (props: any) => {
   return (
     <>
       <tr
-        className="divide-x divide-scale-600 dark:divide-scale-400 bg-scale-200"
+        className="divide-scale-600 dark:divide-scale-400 bg-scale-200 divide-x"
         style={{ borderTop: 'none' }}
       >
         <th
-          className="py-3 pl-6 sticky z-10 top-[62px] text-sm font-medium bg-scale-200 text-left bg-scale-50 dark:bg-scale-300 text-scale-1200 dark:text-white"
+          className="bg-scale-200 bg-scale-50 dark:bg-scale-300 text-scale-1200 sticky top-[62px] z-10 py-3 pl-6 text-left text-sm font-medium dark:text-white"
           scope="colgroup"
         >
           <div className="flex items-center">
@@ -62,22 +62,22 @@ export const PricingTableRowDesktop = (props: any) => {
             <h4 className="m-0 ml-2">{category.title}</h4>
           </div>
         </th>
-        <td className="px-6 py-5 bg-scale-50 dark:bg-scale-300"></td>
-        <td className="px-6 py-5 bg-scale-50 dark:bg-scale-300"></td>
-        <td className="px-6 py-5 bg-scale-50 dark:bg-scale-300"></td>
+        <td className="bg-scale-50 dark:bg-scale-300 px-6 py-5"></td>
+        <td className="bg-scale-50 dark:bg-scale-300 px-6 py-5"></td>
+        <td className="bg-scale-50 dark:bg-scale-300 px-6 py-5"></td>
       </tr>
 
       {category.features.map((feat: any) => {
         return (
-          <tr className="divide-x divide-scale-600 dark:divide-scale-400">
+          <tr className="divide-scale-600 dark:divide-scale-400 divide-x">
             <th
-              className="flex items-center px-6 py-5 text-sm font-normal text-left text-scale-1200 dark:text-white"
+              className="text-scale-1200 flex items-center px-6 py-5 text-left text-sm font-normal dark:text-white"
               scope="row"
             >
               <span>{feat.title} </span>
               {feat.tooltip && (
                 <span
-                  className="ml-2 cursor-pointer hover:text-scale-800 dark:hover:text-white"
+                  className="hover:text-scale-800 ml-2 cursor-pointer dark:hover:text-white"
                   data-tip={feat.tooltip}
                 >
                   <IconHelpCircle size="small" />
@@ -93,7 +93,7 @@ export const PricingTableRowDesktop = (props: any) => {
                   ) : typeof tier === 'boolean' && tier === false ? (
                     <Minus tier={tier} />
                   ) : (
-                    <span className="block text-sm text-scale-1200 dark:text-white">{tier}</span>
+                    <span className="text-scale-1200 block text-sm dark:text-white">{tier}</span>
                   )}
                 </td>
               )
@@ -112,11 +112,11 @@ export const PricingTableRowMobile = (props: any) => {
 
   return (
     <>
-      <table className="w-full mt-8">
-        <caption className="px-4 py-3 text-sm font-medium text-left border-t bg-scale-50 dark:bg-dark-900 border-scale-200 dark:border-scale-600 text-scale-1200 dark:text-white">
+      <table className="mt-8 w-full">
+        <caption className="bg-scale-50 dark:bg-dark-900 border-scale-200 dark:border-scale-600 text-scale-1200 border-t px-4 py-3 text-left text-sm font-medium dark:text-white">
           <div className="flex items-center gap-2">
             {category.icon ? <ProductIcon icon={props.icon} /> : null}
-            <span className="font-normal text-scale-1200">{category.title}</span>
+            <span className="text-scale-1200 font-normal">{category.title}</span>
           </div>
         </caption>
         <thead>
@@ -129,11 +129,11 @@ export const PricingTableRowMobile = (props: any) => {
             </th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-scale-600">
+        <tbody className="divide-scale-600 divide-y">
           {category.features.map((feat: any, i: number) => {
             return (
               <tr key={i} className="border-t">
-                <th className="px-4 py-5 text-sm font-normal text-left text-scale-1100" scope="row">
+                <th className="text-scale-1100 px-4 py-5 text-left text-sm font-normal" scope="row">
                   <span>
                     <p>{feat.title}</p>
                   </span>
@@ -148,7 +148,7 @@ export const PricingTableRowMobile = (props: any) => {
                       <Minus tier={tier} />
                     </div>
                   ) : (
-                    <span className="block text-sm text-scale-1200">{feat.tiers[tier]}</span>
+                    <span className="text-scale-1200 block text-sm">{feat.tiers[tier]}</span>
                   )}
                 </td>
               </tr>

apps/www/components/ProductIcon.tsx

@@ -4,7 +4,7 @@ interface ProductIcon {
 
 function ProductIcon({ icon }: ProductIcon) {
   return (
-    <div className="inline-flex items-center justify-center rounded-md bg-scale-1200 text-scale-100 h-8 w-8">
+    <div className="bg-scale-1200 text-scale-100 inline-flex h-8 w-8 items-center justify-center rounded-md">
       <svg
         className="h-5 w-5 stroke-white dark:stroke-black"
         xmlns="http://www.w3.org/2000/svg"

apps/www/components/Quote.tsx

@@ -11,15 +11,15 @@ export default function Quote(props: Props) {
   const { children, caption, img } = props
 
   return (
-    <figure className="border border-gray-100 dark:border-gray-600 p-8">
+    <figure className="border border-gray-100 p-8 dark:border-gray-600">
       <Space direction="vertical" size={5}>
-        <blockquote className="border-none mb-4" style={{ margin: 0, padding: 0 }}>
+        <blockquote className="mb-4 border-none" style={{ margin: 0, padding: 0 }}>
           {children}
         </blockquote>
         <Space size={4} className="align-center">
           <img
             src={'/images/blog/avatars/' + img}
-            className="rounded-full w-16 h-16 object-cover text-center"
+            className="h-16 w-16 rounded-full object-cover text-center"
             style={{ margin: 0 }}
           />
           <figcaption style={{ marginTop: 0 }}>

apps/www/components/ScrollableCodeBlock.tsx

@@ -37,17 +37,17 @@ const ScrollableCodeBlock = ({
   return (
     <div>
       {showToolbar && (
-        <div className="bg-scale-1200 dark:bg-scale-200 border border-scale-1200 dark:border-scale-400 border-b-0 h-7 w-full rounded-t-lg flex gap-1.5 items-center px-4">
+        <div className="bg-scale-1200 dark:bg-scale-200 border-scale-1200 dark:border-scale-400 flex h-7 w-full items-center gap-1.5 rounded-t-lg border border-b-0 px-4">
           <div className="flex items-center gap-1.5">
-            <div className="w-2.5 h-2.5 bg-scale-1100 dark:bg-scale-400 rounded-full"></div>
-            <div className="w-2.5 h-2.5 bg-scale-1100 dark:bg-scale-400 rounded-full"></div>
-            <div className="w-2.5 h-2.5 bg-scale-1100 dark:bg-scale-400 rounded-full"></div>
+            <div className="bg-scale-1100 dark:bg-scale-400 h-2.5 w-2.5 rounded-full"></div>
+            <div className="bg-scale-1100 dark:bg-scale-400 h-2.5 w-2.5 rounded-full"></div>
+            <div className="bg-scale-1100 dark:bg-scale-400 h-2.5 w-2.5 rounded-full"></div>
           </div>
         </div>
       )}
 
       <div
-        className="overflow-hidden border rounded-b-lg border-scale-1100 dark:border-scale-400"
+        className="border-scale-1100 dark:border-scale-400 overflow-hidden rounded-b-lg border"
         style={{ maxHeight: MAX_HEIGHT, transform: 'translateZ(0)' }}
       >
         <div

apps/www/components/Sections/APISection.tsx

@@ -34,7 +34,7 @@ function APISection(props: Props) {
 
   return (
     <div className="grid grid-cols-12 lg:gap-16">
-      <div className="col-span-12 lg:col-span-5 xl:col-span-5 pb-8">
+      <div className="col-span-12 pb-8 lg:col-span-5 xl:col-span-5">
         <h2 className="h3">{props.title}</h2>
         <p className="p">{props.text}</p>
         {props.documentation_link && (
@@ -48,7 +48,7 @@ function APISection(props: Props) {
         )}
         {props.footer && <div className="py-8">{props.footer}</div>}
       </div>
-      <div className="col-span-12 lg:col-span-7 xl:col-span-6 xl:col-start-7 sbui-tabs--alt">
+      <div className="sbui-tabs--alt col-span-12 lg:col-span-7 xl:col-span-6 xl:col-start-7">
         <Tabs
           scrollable
           activeId={apiSwiperActiveIndex.toString()}

apps/www/components/Sections/FunctionsUsecases.tsx

@@ -34,7 +34,7 @@ function FunctionsUsecases(props: Props) {
 
   return (
     <div className="grid grid-cols-12 lg:gap-16">
-      <div className="col-span-12 lg:col-span-5 xl:col-span-5 pb-8">
+      <div className="col-span-12 pb-8 lg:col-span-5 xl:col-span-5">
         <h2 className="h3">{props.title}</h2>
         <p className="p">{props.text}</p>
 
@@ -45,8 +45,8 @@ function FunctionsUsecases(props: Props) {
               <button
                 key={`featureHighlighted-${i}`}
                 className={
-                  'group transition-all border px-6 py-4 text-left rounded-md bg-scale-200 hover:bg-scale-100 hover:dark:bg-scale-300 hover:boder' +
-                  (active ? ' bg-white dark:bg-scale-400 border-scale-500' : ' border-scale-300')
+                  'bg-scale-200 hover:bg-scale-100 hover:dark:bg-scale-300 hover:boder group rounded-md border px-6 py-4 text-left transition-all' +
+                  (active ? ' dark:bg-scale-400 border-scale-500 bg-white' : ' border-scale-300')
                 }
                 // onClick={() => setCurrentSelection(feat.highlightLines)}
                 onClick={() => handleApiSwiperNavChange(i)}
@@ -61,7 +61,7 @@ function FunctionsUsecases(props: Props) {
                 </div>
                 <div
                   className={
-                    'transition-colors text-sm ' +
+                    'text-sm transition-colors ' +
                     (active ? ' text-scale-1100' : ' text-scale-800 group-hover:text-scale-1100 ')
                   }
                 >
@@ -83,7 +83,7 @@ function FunctionsUsecases(props: Props) {
           )}
         </div>
       </div>
-      <div className="col-span-12 lg:col-span-7 xl:col-span-6 xl:col-start-7 sbui-tabs--alt">
+      <div className="sbui-tabs--alt col-span-12 lg:col-span-7 xl:col-span-6 xl:col-start-7">
         <div className="overflow-hidden">
           <Swiper
             // @ts-ignore

apps/www/components/Sections/GithubExamples.tsx

@@ -30,7 +30,7 @@ function GithubExamples() {
           <p className="p ">
             Supported by a network of early advocates, contributors, and champions.
           </p>
-          <div className="flex items-center gap-2 justify-center py-4">
+          <div className="flex items-center justify-center gap-2 py-4">
             <Link href="/docs/guides/examples#guides" as="/docs/guides/examples#guides">
               <Button size="small" as="a" type="default" icon={<IconBookOpen size={12} />}>
                 View guides
@@ -99,11 +99,11 @@ function GithubExamples() {
                 </SwiperSlide>
               )
             })}
-            <div className="container mx-auto hidden md:flex flex-row justify-between mt-3">
-              <div ref={prevRef} className="cursor-pointer ml-4 p">
+            <div className="container mx-auto mt-3 hidden flex-row justify-between md:flex">
+              <div ref={prevRef} className="p ml-4 cursor-pointer">
                 <IconArrowLeft />
               </div>
-              <div ref={nextRef} className="cursor-pointer mr-4 p">
+              <div ref={nextRef} className="p mr-4 cursor-pointer">
                 <IconArrowRight />
               </div>
             </div>

apps/www/components/Sections/ProductHeader.tsx

@@ -14,12 +14,12 @@ interface Types {
 }
 
 const ProductHeader = (props: Types) => (
-  <div className="container mx-auto px-6 sm:px-16 xl:px-20 relative pt-16 lg:pt-32 pb-0">
+  <div className="container relative mx-auto px-6 pt-16 pb-0 sm:px-16 lg:pt-32 xl:px-20">
     <div className="grid grid-cols-12">
-      <div className="col-span-12 lg:col-span-5 space-y-8">
+      <div className="col-span-12 space-y-8 lg:col-span-5">
         <div>
           {props.icon || props.title ? (
-            <div className="flex mb-4 items-center gap-3">
+            <div className="mb-4 flex items-center gap-3">
               {props.icon && <ProductIcon icon={props.icon} />}
               {props.title && (
                 <span className="text-scale-1200" key={`product-name-${props.title}`}>
@@ -63,7 +63,7 @@ const ProductHeader = (props: Types) => (
         {props.footer && <div className="mb-4">{props.footer}</div>}
       </div>
       {props.image && (
-        <div className="mt-8 lg:mt-0 col-span-12 lg:col-span-7 xl:col-span-6 xl:col-start-7">
+        <div className="col-span-12 mt-8 lg:col-span-7 lg:mt-0 xl:col-span-6 xl:col-start-7">
           {props.image}
         </div>
       )}

apps/www/components/Sections/TwitterSocialProof.tsx

@@ -35,7 +35,7 @@ function TwitterSocialProof() {
           <p className="p">
             Supported by a network of early advocates, contributors, and champions.
           </p>
-          <div className="my-8 flex gap-2 justify-center">
+          <div className="my-8 flex justify-center gap-2">
             <Link href={'https://github.com/supabase/supabase/discussions'} passHref>
               <Button
                 as="a"
@@ -113,13 +113,13 @@ function TwitterSocialProof() {
                 </SwiperSlide>
               )
             })}
-            <div className="container mx-auto hidden md:flex flex-row justify-between mt-3">
-              <div ref={prevRef} className="cursor-pointer ml-4">
+            <div className="container mx-auto mt-3 hidden flex-row justify-between md:flex">
+              <div ref={prevRef} className="ml-4 cursor-pointer">
                 <p>
                   <IconArrowLeft />
                 </p>
               </div>
-              <div ref={nextRef} className="cursor-pointer mr-4">
+              <div ref={nextRef} className="mr-4 cursor-pointer">
                 <p>
                   <IconArrowRight />
                 </p>

apps/www/components/TextLink.tsx

@@ -5,9 +5,9 @@ function TextLink({ url, label }: any) {
   return (
     <a
       href={url}
-      className="block text-sm text-scale-1100 hover:text-scale-1200 mt-3 cursor-pointer"
+      className="text-scale-1100 hover:text-scale-1200 mt-3 block cursor-pointer text-sm"
     >
-      <div className="flex items-center gap-1 group">
+      <div className="group flex items-center gap-1">
         <span>{label}</span>
         <div className="transition-all group-hover:ml-0.5">
           <IconChevronRight size={14} strokeWidth={2} />

apps/www/components/TweetCard.tsx

@@ -12,9 +12,9 @@ function TweetCard(props: TweetCard) {
     <div
       className="
       
-      bg-white dark:bg-scale-300 rounded-md
+      dark:bg-scale-300 border-scale-300 dark:border-scale-400
     
-      border border-scale-300 dark:border-scale-400 p-6
+      rounded-md border bg-white p-6
       drop-shadow-sm
 
     
@@ -22,12 +22,12 @@ function TweetCard(props: TweetCard) {
     >
       <div className="relative">
         <div className="flex items-center gap-2">
-          <div className="rounded-full w-10 h-10 border dark:border-gray-600 overflow-hidden">
+          <div className="h-10 w-10 overflow-hidden rounded-full border dark:border-gray-600">
             <Image src={props.img_url} layout="responsive" width="64" height="64" />
           </div>
-          <p className="text-sm font-medium text-scale-1200 mt-3">{props.handle}</p>
+          <p className="text-scale-1200 mt-3 text-sm font-medium">{props.handle}</p>
           <div
-            className="absolute -left-1 -top-1 w-5 h-5 flex justify-center items-center rounded-full"
+            className="absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full"
             style={{ background: '#00acee' }}
           >
             <div className="text-white">
@@ -38,7 +38,7 @@ function TweetCard(props: TweetCard) {
       </div>
 
       <p>
-        <p className="text-base mt-3 text-scale-1100">"{props.quote}"</p>
+        <p className="text-scale-1100 mt-3 text-base">"{props.quote}"</p>
       </p>
     </div>
   )

apps/www/components/UI/FlyOut.tsx

@@ -36,21 +36,21 @@ const FlyOut = (props: Props) => {
         <>
           <div className="absolute inset-x-0 transform shadow-lg ">
             <div
-              className="border-b dark:border-scale-500 absolute inset-0 flex sm:flex-col lg:flex-row"
+              className="dark:border-scale-500 absolute inset-0 flex border-b sm:flex-col lg:flex-row"
               aria-hidden="true"
             >
-              <div className="bg-white dark:bg-scale-200 border-r dark:border-scale-400 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full" />
+              <div className="dark:bg-scale-200 dark:border-scale-400 border-r bg-white sm:h-1/2 sm:w-full lg:h-full lg:w-1/2" />
               <div
                 className={`${
-                  singleBgColor ? 'bg-white dark:bg-scale-200' : 'bg-gray-50 dark:bg-scale-200'
-                } sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full`}
+                  singleBgColor ? 'dark:bg-scale-200 bg-white' : 'dark:bg-scale-200 bg-gray-50'
+                } sm:h-1/2 sm:w-full lg:h-full lg:w-1/2`}
               />
             </div>
-            <div className="container relative mx-auto lg:grid-cols-2 px-6 lg:px-10 xl:px-14 py-2">
+            <div className="container relative mx-auto px-6 py-2 lg:grid-cols-2 lg:px-10 xl:px-14">
               {children}
             </div>
             <div
-              className="z-50 w-full h-screen absolute opacity-0"
+              className="absolute z-50 h-screen w-full opacity-0"
               style={{
                 pointerEvents: 'visiblePainted',
               }}

apps/www/components/UI/SectionHeader.tsx

@@ -2,7 +2,7 @@ const SectionHeader = (props: any) => {
   return (
     <div className={props.className}>
       <div className="space-y-4">
-        <span className="block text-xs tracking-widest uppercase text-scale-900 font-mono">
+        <span className="text-scale-900 block font-mono text-xs uppercase tracking-widest">
           {props.subtitle}
         </span>
         <h3 className="h2">
@@ -10,7 +10,7 @@ const SectionHeader = (props: any) => {
           {props.title_alt && <span className="text-scale-1100 inline">{props.title_alt}</span>}
         </h3>
       </div>
-      {props.paragraph && <p className="p text-lg sm:mt-4 max-w-3xl">{props.paragraph}</p>}
+      {props.paragraph && <p className="p max-w-3xl text-lg sm:mt-4">{props.paragraph}</p>}
     </div>
   )
 }

apps/www/data/Community.tsx

@@ -16,11 +16,11 @@ const data: CommunityItem[] = [
     statLabel: 'Registered developers',
     img: 'supabase.png',
     detail: () => (
-      <div className="mt-5 max-w-lg mx-auto grid gap-0 sm:grid-cols-3 lg:grid-cols-4 lg:max-w-none text-center border border-dashed rounded-lg overflow-hidden ">
+      <div className="mx-auto mt-5 grid max-w-lg gap-0 overflow-hidden rounded-lg border border-dashed text-center sm:grid-cols-3 lg:max-w-none lg:grid-cols-4 ">
         {DeveloperSignups.map((signup) => (
           <div
             key={signup.title}
-            className="col-span-1 flex justify-center py-8 px-8 border border-dashed"
+            className="col-span-1 flex justify-center border border-dashed py-8 px-8"
           >
             <img key={signup.title} className="max-h-12" src={signup.img} alt={signup.title} />
           </div>

apps/www/pages/404.tsx

@@ -19,11 +19,11 @@ const Error404 = () => {
 
   return (
     <DefaultLayout hideHeader hideFooter>
-      <div className="w-full h-screen relative flex flex-col items-center justify-center mx-auto">
-        <div className="absolute top-0 w-full max-w-7xl mx-auto pt-6 px-8 sm:px-6 lg:px-8">
+      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
+        <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
           <nav className="relative flex items-center justify-between sm:h-10">
-            <div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
-              <div className="flex items-center justify-between w-full md:w-auto">
+            <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
+              <div className="flex w-full items-center justify-between md:w-auto">
                 <a href="/">
                   <Image
                     src={
@@ -42,7 +42,7 @@ const Error404 = () => {
         </div>
         <div className="absolute">
           <h1
-            className={`select-none filter transition opacity-[5%] duration-200 ${
+            className={`select-none opacity-[5%] filter transition duration-200 ${
               show404 ? 'blur-sm' : 'blur-none'
             }`}
             style={{ fontSize: '28rem' }}
@@ -51,12 +51,12 @@ const Error404 = () => {
           </h1>
         </div>
         <div
-          className={`transition flex flex-col space-y-6 items-center justify-center ${
+          className={`flex flex-col items-center justify-center space-y-6 transition ${
             show404 ? 'opacity-100' : 'opacity-0'
           }`}
         >
-          <div className="w-[320px] flex flex-col items-center justify-center space-y-3 text-scale-1200">
-            <h1 className="text-2xl m-2">Looking for something? 🔍</h1>
+          <div className="text-scale-1200 flex w-[320px] flex-col items-center justify-center space-y-3">
+            <h1 className="m-2 text-2xl">Looking for something? 🔍</h1>
             <p className="text-center text-sm">
               We couldn't find the page that you're looking for!
             </p>

apps/www/pages/auth/Auth.tsx

@@ -75,7 +75,7 @@ function AuthPage() {
             "Including PostgreSQL's policy engine, for fine-grained access rules.",
           ]}
           image={[
-            <div className="w-full header--light block" key="light">
+            <div className="header--light block w-full" key="light">
               <Image
                 src={`${basePath}/images/product/auth/header--light.png`}
                 alt="auth header"
@@ -84,7 +84,7 @@ function AuthPage() {
                 height="1074"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block" key="dark">
+            <div className="header--dark mr-0 w-full dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/auth/header--dark.png`}
                 alt="auth header"
@@ -99,10 +99,10 @@ function AuthPage() {
 
         <SectionContainer>
           <div className="grid grid-cols-12">
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:mb-0">
               <p className="mb-4 -mt-[1.9rem]">
-                <div className="grid grid-rows-2 grid-flow-col gap-2 xl:w-64">
-                  <div className="w-fit flex items-center">
+                <div className="grid grid-flow-col grid-rows-2 gap-2 xl:w-64">
+                  <div className="flex w-fit items-center">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 32.58 31.77"
@@ -118,7 +118,7 @@ function AuthPage() {
                   </div>
                   {AuthProviders.map((auth) => {
                     return (
-                      <div className="w-fit flex items-center">
+                      <div className="flex w-fit items-center">
                         <Image
                           src={`${basePath}/images/product/auth/${auth.name}-icon.svg`}
                           alt={`${auth.name} auth login icon`}
@@ -137,7 +137,7 @@ function AuthPage() {
                 Gitlab, Twitter, Discord, and many more.
               </p>
             </div>
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3 lg:col-start-5">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:col-start-5 lg:mb-0">
               <p className="p mb-4">
                 <IconLink />
               </p>
@@ -180,7 +180,7 @@ function AuthPage() {
               </p>,
             ]}
             footer={[
-              <div className="grid grid-cols-12 md:gap-8 lg:gap-0 xl:gap-16 mt-8" key={0}>
+              <div className="mt-8 grid grid-cols-12 md:gap-8 lg:gap-0 xl:gap-16" key={0}>
                 <div className="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4">
                   <FeatureColumn
                     icon={<IconBriefcase />}
@@ -219,7 +219,7 @@ function AuthPage() {
 
         <SectionContainer>
           <div className="grid grid-cols-12 lg:gap-16">
-            <div className="col-span-12 lg:col-span-5 mb-8">
+            <div className="col-span-12 mb-8 lg:col-span-5">
               <h2 className="h3">User permissions without the middleware</h2>
 
               <p className="p text-base lg:text-lg">

apps/www/pages/beta.tsx

@@ -28,17 +28,17 @@ const NavFlyOutMenu = (props: any) => {
 
   return (
     <>
-      <div className="grid items-center grid-cols-12 col-span-12 border-b border-dashed border-dark-300 dark:border-dark-400 sm:border-r">
+      <div className="border-dark-300 dark:border-dark-400 col-span-12 grid grid-cols-12 items-center border-b border-dashed sm:border-r">
         {segments.flat().map((segment: any) => (
           <div
             key={segment.key}
             onClick={() => scrollTo(segment.key)}
             className={`
-              col-span-12 lg:col-span-4 px-4 lg:px-6 py-4 lg:py-10 text-dark-300 dark:text-dark-400 cursor-pointer bg-white dark:bg-dark-600
-              hover:bg-dark-100 dark:hover:bg-dark-500 border-dark-300 dark:border-dark-400 border-t sm:border-l border-dashed`}
+              text-dark-300 dark:text-dark-400 dark:bg-dark-600 hover:bg-dark-100 dark:hover:bg-dark-500 border-dark-300 dark:border-dark-400 col-span-12 cursor-pointer border-t border-dashed
+              bg-white px-4 py-4 sm:border-l lg:col-span-4 lg:px-6 lg:py-10`}
           >
             <p className="flex items-center text-black dark:text-white">
-              <span className="mr-2 font-mono text-xs text-dark-300 dark:text-dark-400">
+              <span className="text-dark-300 dark:text-dark-400 mr-2 font-mono text-xs">
                 0{segment.no}
               </span>
               <span>{segment.name}</span>
@@ -53,12 +53,12 @@ const NavFlyOutMenu = (props: any) => {
 const VideoShot = (props: any) => {
   const { src } = props
   return (
-    <div className="p-2 rounded-xl bg-gradient-to-r from-green-400 via-violet-500 to-blue-500">
+    <div className="rounded-xl bg-gradient-to-r from-green-400 via-violet-500 to-blue-500 p-2">
       <div className="rounded-md shadow-lg" style={{ height: 'fit-content' }}>
-        <div className="flex items-center justify-start w-full h-5 px-2 rounded-t-md bg-dark-400">
-          <div className="w-2 h-2 mr-2 rounded-full bg-dark-500" />
-          <div className="w-2 h-2 mr-2 rounded-full bg-dark-500" />
-          <div className="w-2 h-2 mr-2 rounded-full bg-dark-500" />
+        <div className="bg-dark-400 flex h-5 w-full items-center justify-start rounded-t-md px-2">
+          <div className="bg-dark-500 mr-2 h-2 w-2 rounded-full" />
+          <div className="bg-dark-500 mr-2 h-2 w-2 rounded-full" />
+          <div className="bg-dark-500 mr-2 h-2 w-2 rounded-full" />
         </div>
         <video className="rounded-b-md" src={src} autoPlay loop muted playsInline>
           Your browser does not support the video tag
@@ -94,7 +94,7 @@ const SectionHeader = (props: any) => {
   const { sectionNumber, header } = props
   return (
     <div className="col-span-12">
-      <span className="block mb-3 font-mono text-3xl text-scale-1200">0{sectionNumber}</span>
+      <span className="text-scale-1200 mb-3 block font-mono text-3xl">0{sectionNumber}</span>
       <h3 className="text-6xl text-black dark:text-white">{header}</h3>
     </div>
   )
@@ -112,10 +112,10 @@ const Hero = (props: Props) => {
         backgroundSize: '65%',
         backgroundPosition: '120% 50%',
       }}
-      className="py-16 bg-no-repeat lg:py-36 bg-gray-50 dark:bg-scale-300"
+      className="dark:bg-scale-300 bg-gray-50 bg-no-repeat py-16 lg:py-36"
     >
-      <div className="container grid items-center h-full grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28 text-dark-300">
-        <div className="col-span-12 md:col-span-9 lg:col-span-8 xl:col-span-6 text-scale-900 dark:text-white">
+      <div className="text-dark-300 container mx-auto grid h-full grid-cols-12 items-center gap-4 px-8 py-20 lg:px-28">
+        <div className="text-scale-900 col-span-12 dark:text-white md:col-span-9 lg:col-span-8 xl:col-span-6">
           <p className="mb-10 text-4xl">Supabase is an open source Firebase alternative.</p>
           <p className="text-2xl">
             Today, we're moving to <span className="text-brand-900">Beta</span>
@@ -131,10 +131,10 @@ const Hero = (props: Props) => {
 
 const Introduction = () => {
   return (
-    <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28 text-dark-300">
+    <div className="text-dark-300 container mx-auto grid grid-cols-12 gap-4 px-8 py-20 lg:px-28">
       <div className="col-span-12 sm:col-span-9 xl:col-span-8">
         <p>
-          <span className="block text-2xl text-scale-1200">
+          <span className="text-scale-1200 block text-2xl">
             After the launch of our{' '}
             <a
               href="https://news.ycombinator.com/item?id=23319901"
@@ -147,7 +147,7 @@ const Introduction = () => {
           </span>
         </p>
       </div>
-      <div className="col-span-12 mb-20 text-base sm:col-span-9 xl:col-span-6 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-20 text-base sm:col-span-9 xl:col-span-6">
         <p>
           we've been fortunate to work with thousands of early adopters on improving both our Open
           Source, and Hosted offerings. Companies like{' '}
@@ -179,35 +179,35 @@ const Introduction = () => {
       </div>
 
       <div className="col-span-12 mb-10 text-base">
-        <p className="pb-2 border-b-2 w-60 border-dark-200 text-scale-1100 dark:border-dark-400">
+        <p className="border-dark-200 text-scale-1100 dark:border-dark-400 w-60 border-b-2 pb-2">
           Alpha Program in Numbers
         </p>
       </div>
 
       <div
         id="alphaNumbers"
-        className="grid grid-cols-12 col-span-12 mb-20 gap-y-12 lg:gap-y-20 gap-x-3 sm:gap-x-0"
+        className="col-span-12 mb-20 grid grid-cols-12 gap-y-12 gap-x-3 sm:gap-x-0 lg:gap-y-20"
       >
         {AlphaNumbers.map((stat: any, idx: number) => (
           <div
             key={`stat_${idx}`}
-            className="grid items-center grid-cols-8 col-span-6 sm:col-span-4 sm:grid-cols-12 gap-x-1 md:gap-x-0 xl:gap-x-6"
+            className="col-span-6 grid grid-cols-8 items-center gap-x-1 sm:col-span-4 sm:grid-cols-12 md:gap-x-0 xl:gap-x-6"
           >
             <div className="col-span-4 sm:col-span-4 md:col-span-3 xl:col-span-2">
-              <div className="flex items-center justify-center w-12 h-12 rounded-md bg-scale-1200 dark:bg-white">
+              <div className="bg-scale-1200 flex h-12 w-12 items-center justify-center rounded-md dark:bg-white">
                 {stat.icon}
               </div>
             </div>
-            <div className="col-span-7 sm-col-span-8 md:col-span-9 xl:col-span-10 text-dark-400">
-              <p className="text-5xl lg:text-6xl text-scale-1200">
+            <div className="sm-col-span-8 text-dark-400 col-span-7 md:col-span-9 xl:col-span-10">
+              <p className="text-scale-1200 text-5xl lg:text-6xl">
                 <CountUp triggerAnimOnScroll={true} referenceElId="alphaNumbers">
                   {stat.value}
                 </CountUp>
-                {stat.unit && <span className="ml-1 text-2xl text-scale-1200">{stat.unit}</span>}
+                {stat.unit && <span className="text-scale-1200 ml-1 text-2xl">{stat.unit}</span>}
               </p>
             </div>
-            <div className="col-span-12 sm:col-span-9 md:col-span-10 col-start-0 sm:col-start-5 md:col-start-4 xl:col-start-3">
-              <p className="text-xs lg:text-base text-scale-1000">{stat.name}</p>
+            <div className="col-start-0 col-span-12 sm:col-span-9 sm:col-start-5 md:col-span-10 md:col-start-4 xl:col-start-3">
+              <p className="text-scale-1000 text-xs lg:text-base">{stat.name}</p>
             </div>
           </div>
         ))}
@@ -219,30 +219,30 @@ const Introduction = () => {
 const TableOfContents = (props: any) => {
   const { scrollTo } = props
   return (
-    <div className="bg-gray-50 dark:bg-scale-300 text-dark-400 dark:text-dark-200">
-      <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28">
+    <div className="dark:bg-scale-300 text-dark-400 dark:text-dark-200 bg-gray-50">
+      <div className="container mx-auto grid grid-cols-12 gap-4 px-8 py-20 lg:px-28">
         <div className="col-span-12 mb-10 text-base">
           <p className="text-2xl text-black dark:text-white">
             Supabase <span className="text-brand-900 dark:text-brand-900">Beta</span> is starting
             now.
           </p>
         </div>
-        <div className="grid grid-cols-12 col-span-12 gap-y-10">
+        <div className="col-span-12 grid grid-cols-12 gap-y-10">
           {IntroductionSegments.map((segment: any, segmentIdx: number) => (
-            <div key={`introSegment_${segmentIdx}`} className="grid grid-cols-12 col-span-12">
-              <div className="col-span-12 mb-10 sm:col-span-5 xl:col-span-4 sm:mb-0 text-scale-1200">
+            <div key={`introSegment_${segmentIdx}`} className="col-span-12 grid grid-cols-12">
+              <div className="text-scale-1200 col-span-12 mb-10 sm:col-span-5 sm:mb-0 xl:col-span-4">
                 <p>{segment.description}</p>
               </div>
-              <div className="hidden sm:block sm:col-span-1 xl:col-span-2" />
-              <div className="flex flex-col col-span-12 sm:col-span-6">
+              <div className="hidden sm:col-span-1 sm:block xl:col-span-2" />
+              <div className="col-span-12 flex flex-col sm:col-span-6">
                 {segment.chapters.map((chapter: any, idx: number) => (
                   <div
                     key={`section_select_${idx}`}
-                    className="flex items-center mb-5 cursor-pointer"
+                    className="mb-5 flex cursor-pointer items-center"
                     onClick={() => scrollTo(chapter.key)}
                   >
-                    <p className="font-mono text-xs text-scale-1200">{`0${chapter.no}`}</p>
-                    <p className="ml-4 text-base transition border-b border-gray-400 text-black dark:text-white hover:text-gray-1000 dark:hover:text-gray-1000">
+                    <p className="text-scale-1200 font-mono text-xs">{`0${chapter.no}`}</p>
+                    <p className="hover:text-gray-1000 dark:hover:text-gray-1000 ml-4 border-b border-gray-400 text-base text-black transition dark:text-white">
                       {chapter.name}
                     </p>
                   </div>
@@ -292,7 +292,7 @@ const Performance = () => {
       return () => window.removeEventListener('scroll', handleScroll)
     }, [animTriggered])
 
-    return <div className={`${color} rounded-full h-3`} style={{ width: `${count.toFixed(2)}%` }} />
+    return <div className={`${color} h-3 rounded-full`} style={{ width: `${count.toFixed(2)}%` }} />
   }
 
   const ComparisonChart = () => {
@@ -302,13 +302,13 @@ const Performance = () => {
         {PerformanceComparisonData.map((metric: any) => {
           const multiplier = (metric.stats[0].value / metric.stats[1].value).toFixed(1)
           return (
-            <div key={`${metric.key}`} className="mb-10 text-dark-400 dark:text-dark-300">
-              <p className="pb-2 mb-4 sm:w-36">{metric.title}</p>
+            <div key={`${metric.key}`} className="text-dark-400 dark:text-dark-300 mb-10">
+              <p className="mb-4 pb-2 sm:w-36">{metric.title}</p>
               <div className="flex flex-col sm:flex-row sm:items-center">
                 <div className="w-full sm:w-5/6">
                   {metric.stats.map((stat: any, idx: number) => (
                     <div key={`metric_${metric.key}_${idx}`} className="flex items-center">
-                      <p className="w-20 py-2 pr-4 mr-4 text-left border-r lg:w-24 sm:text-right">
+                      <p className="mr-4 w-20 border-r py-2 pr-4 text-left sm:text-right lg:w-24">
                         {stat.name}
                       </p>
                       <Bar
@@ -324,7 +324,7 @@ const Performance = () => {
                   ))}
                 </div>
                 <div className="flex flex-col text-left sm:w-1/6 sm:text-right">
-                  <p className="text-6xl text-dark-700 dark:text-dark-100">{multiplier}x</p>
+                  <p className="text-dark-700 dark:text-dark-100 text-6xl">{multiplier}x</p>
                   <p className="-mt-2 text-sm">more {metric.key}s per second</p>
                 </div>
               </div>
@@ -336,11 +336,11 @@ const Performance = () => {
   }
 
   return (
-    <div id="performance" className="bg-white dark:bg-scale-200">
-      <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
+    <div id="performance" className="dark:bg-scale-200 bg-white">
+      <div className="text-dark-400 dark:text-dark-300 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
         <SectionHeader sectionNumber={1} header="Performance" />
 
-        <div className="grid items-center grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+        <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 items-center gap-x-2 lg:gap-x-8">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-10">
               We started Supabase to give developers a web-ready database that is delightful to use,
@@ -419,11 +419,11 @@ const Performance = () => {
 
 const Security = () => {
   return (
-    <div id="security" className="bg-gray-50 dark:bg-scale-300">
-      <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
+    <div id="security" className="dark:bg-scale-300 bg-gray-50">
+      <div className="text-dark-400 dark:text-dark-200 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
         <SectionHeader sectionNumber={2} header="Security" />
 
-        <div className="grid grid-cols-12 col-span-12 gap-x-2 lg:gap-x-8 text-scale-1200">
+        <div className="text-scale-1200 col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-10">
               As an infrastructure provider, security has been a priority from day one. While we had
@@ -434,7 +434,7 @@ const Security = () => {
               Approaching the launch of our Beta period, we worked with security advisors and
               specialists globally to enforce new measures and processes:
             </p>
-            <ul className="ml-6 list-disc list-outside">
+            <ul className="ml-6 list-outside list-disc">
               <li className="mb-5">
                 Employed DigitalXRAID to run a full Pen Test on both our internal and customer
                 infrastructure. We immediately patched one medium priority issue and are currently
@@ -484,17 +484,17 @@ const Security = () => {
 const Reliability = () => {
   const { basePath } = useRouter()
   return (
-    <div id="reliability" className="bg-white dark:bg-scale-200">
-      <div className="container grid grid-cols-12 px-8 py-12 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300 ">
+    <div id="reliability" className="dark:bg-scale-200 bg-white">
+      <div className="text-dark-400 dark:text-dark-300 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-12 lg:px-28 ">
         <SectionHeader sectionNumber={3} header="Reliability" />
 
-        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+        <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-5">
               During Alpha we experienced 2 availability incidents, neither affecting customer
               access to their data. These were:
             </p>
-            <ul className="mb-10 ml-6 list-disc list-outside">
+            <ul className="mb-10 ml-6 list-outside list-disc">
               <li className="mb-5">
                 A third-party CDN API outage. As a result, subdomains were not created for new
                 projects.
@@ -537,11 +537,11 @@ const Reliability = () => {
 const NewFeaturesAndIntegrations = () => {
   const { basePath } = useRouter()
   return (
-    <div id="newFeaturesAndIntegrations" className="bg-gray-50 dark:bg-scale-300">
-      <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
+    <div id="newFeaturesAndIntegrations" className="dark:bg-scale-300 bg-gray-50">
+      <div className="text-dark-400 dark:text-dark-200 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
         <SectionHeader sectionNumber={4} header="New Features & Integrations" />
 
-        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+        <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-5">
               If you're new to Supabase, here's a few of the things you get when you choose us as
@@ -549,7 +549,7 @@ const NewFeaturesAndIntegrations = () => {
             </p>
             <ul className="">
               <li className="mb-10">
-                <p className="w-20 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-20 border-b-2 pb-2">
                   Auth
                 </p>
                 <p className="mb-5">
@@ -580,7 +580,7 @@ const NewFeaturesAndIntegrations = () => {
                 <VideoShot src={`${basePath}/videos/tabAuthRules.mp4`} />
               </li>
               <li className="mb-10">
-                <p className="w-20 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-20 border-b-2 pb-2">
                   Realtime
                 </p>
                 <p>
@@ -598,7 +598,7 @@ const NewFeaturesAndIntegrations = () => {
                 </p>
               </li>
               <li className="mb-10">
-                <p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-24 border-b-2 pb-2">
                   CRUD API
                 </p>
                 <p>
@@ -623,7 +623,7 @@ const NewFeaturesAndIntegrations = () => {
                 </p>
               </li>
               <li className="mb-10">
-                <p className="pb-2 mb-2 border-b-2 w-44 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-44 border-b-2 pb-2">
                   Quickstart Templates
                 </p>
                 <p>
@@ -633,7 +633,7 @@ const NewFeaturesAndIntegrations = () => {
                 </p>
               </li>
               <li className="mb-10">
-                <p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-24 border-b-2 pb-2">
                   Table View
                 </p>
                 <p className="mb-5">
@@ -643,7 +643,7 @@ const NewFeaturesAndIntegrations = () => {
                 <VideoShot src={`${basePath}/videos/tabTableEditor.mp4`} />
               </li>
               <li>
-                <p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
+                <p className="border-dark-200 dark:border-dark-400 mb-2 w-24 border-b-2 pb-2">
                   SQL Editor
                 </p>
                 <p className="mb-5">
@@ -661,11 +661,11 @@ const NewFeaturesAndIntegrations = () => {
 }
 
 const BetaPricing = () => (
-  <div id="betaPricing" className="bg-white dark:bg-scale-200">
-    <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
+  <div id="betaPricing" className="dark:bg-scale-200 bg-white">
+    <div className="text-dark-400 dark:text-dark-300 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
       <SectionHeader sectionNumber={5} header="Beta Pricing" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">For up to date pricing info see: https://supabase.com/pricing</p>
           <p className="mb-10">
@@ -673,7 +673,7 @@ const BetaPricing = () => (
             course our Alpha Users, to provide a predictable and sustainable pricing model.
           </p>
           <p className="mb-5">Our key aims going into this exercise were:</p>
-          <ul className="mb-10 ml-6 list-disc list-outside">
+          <ul className="mb-10 ml-6 list-outside list-disc">
             <li className="mb-5">
               To continue offering free Supabase instances for Students, Hobbyists, and Early
               Adopters
@@ -688,7 +688,7 @@ const BetaPricing = () => (
             </li>
           </ul>
           <p className="mb-10">We are committing to the following initiatives:</p>
-          <ul className="mb-10 ml-6 list-decimal list-outside">
+          <ul className="mb-10 ml-6 list-outside list-decimal">
             <li className="mb-5">
               All Alpha Users will receive credits equivalent of 2 years of base tier usage. These
               will automatically be credited to your account if you signed up prior to December
@@ -729,11 +729,11 @@ const BetaPricing = () => (
 )
 
 const OpenSource = () => (
-  <div id="openSource" className="bg-gray-50 dark:bg-scale-300">
-    <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
+  <div id="openSource" className="dark:bg-scale-300 bg-gray-50">
+    <div className="text-dark-400 dark:text-dark-200 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
       <SectionHeader sectionNumber={6} header="Open Source" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             Great software is multi generational and stretches beyond any single company.
@@ -796,10 +796,10 @@ const OpenSource = () => (
 )
 
 const FundingPartners = () => (
-  <div id="fundingPartners" className="bg-white dark:bg-scale-200">
-    <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
+  <div id="fundingPartners" className="dark:bg-scale-200 bg-white">
+    <div className="text-dark-400 dark:text-dark-300 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
       <SectionHeader sectionNumber={7} header="Funding Partners" />
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             Building a platform that can offer all the amazing features of Firebase will take
@@ -833,11 +833,11 @@ const FundingPartners = () => (
 )
 
 const ScalingOurTeam = () => (
-  <div id="scalingOurTeam" className="bg-gray-50 dark:bg-scale-300">
-    <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
+  <div id="scalingOurTeam" className="dark:bg-scale-300 bg-gray-50">
+    <div className="text-dark-400 dark:text-dark-200 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
       <SectionHeader sectionNumber={8} header="Scaling Our Team" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             We are extremely proud of our team. We're a mix of 11 engineers, from 8 different
@@ -872,12 +872,12 @@ const ScalingOurTeam = () => (
 const WhatsNext = () => (
   <div
     id="whatsNext"
-    className="bg-white border-b-px border-gray-50 dark:bg-scale-200 dark:border-scale-600"
+    className="border-b-px dark:bg-scale-200 dark:border-scale-600 border-gray-50 bg-white"
   >
-    <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
+    <div className="text-dark-400 dark:text-dark-300 container mx-auto grid grid-cols-12 gap-y-10 px-8 py-20 lg:px-28">
       <SectionHeader sectionNumber={9} header="What's Next" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
+      <div className="text-scale-1200 col-span-12 mb-10 grid grid-cols-12 gap-x-2 lg:gap-x-8">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-5">
             If you watch our repos you'll see that development never stops, we ship every day (and
@@ -885,7 +885,7 @@ const WhatsNext = () => (
             performance, security, and reliability improvements, here are some new features we're
             working on for 2021:
           </p>
-          <ul className="mb-10 ml-6 list-disc list-outside">
+          <ul className="mb-10 ml-6 list-outside list-disc">
             <li className="mb-5">Storage - Making blob storage easier than ever before</li>
             <li className="mb-5">
               Functions - write and deploy serverless functions that have access to your Supabase
@@ -998,7 +998,7 @@ const Beta = (props: Props) => {
       />
       <Container>
         <div className="sticky inset-0 z-50">
-          <div className="flex items-center justify-between px-5 py-5 shadow-lg xl:px-20 bg-scale-1200 dark:bg-scale-300">
+          <div className="bg-scale-1200 dark:bg-scale-300 flex items-center justify-between px-5 py-5 shadow-lg xl:px-20">
             <Link href="/">
               <a>
                 <Image src={`${basePath}/images/logo-dark.png`} height={24} width={120} />

apps/www/pages/blog.tsx

@@ -88,7 +88,7 @@ function Blog(props: any) {
       />
       <DefaultLayout>
         <div className="overflow-hidden py-12">
-          <div className="container mx-auto px-8 sm:px-16 xl:px-20 mt-16">
+          <div className="container mx-auto mt-16 px-8 sm:px-16 xl:px-20">
             <div className="mx-auto ">
               {props.blogs.slice(0, 1).map((blog: any, i: number) => (
                 <FeaturedThumb key={i} {...blog} />
@@ -97,8 +97,8 @@ function Blog(props: any) {
           </div>
         </div>
 
-        <div className="border-t border-scale-600">
-          <div className="container mx-auto px-8 sm:px-16 xl:px-20 mt-16">
+        <div className="border-scale-600 border-t">
+          <div className="container mx-auto mt-16 px-8 sm:px-16 xl:px-20">
             <div className="mx-auto ">
               <div className="grid grid-cols-12">
                 <div className="col-span-12 lg:col-span-12">
@@ -117,7 +117,7 @@ function Blog(props: any) {
             <ol className="grid grid-cols-12 py-16 lg:gap-16">
               {blogs.map((blog: PostTypes, idx: number) => (
                 <div
-                  className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-4 mb-16"
+                  className="col-span-12 mb-16 md:col-span-12 lg:col-span-6 xl:col-span-4"
                   key={idx}
                 >
                   <BlogListItem post={blog} />
@@ -147,10 +147,10 @@ function FeaturedThumb(blog: PostTypes) {
   }
 
   return (
-    <div key={blog.slug} className="cursor-pointer w-full">
+    <div key={blog.slug} className="w-full cursor-pointer">
       <Link href={`/blog/${blog.url}`}>
-        <a className="grid lg:grid-cols-2 gap-8 lg:gap-16">
-          <div className="relative overflow-auto w-full h-96 border rounded-lg">
+        <a className="grid gap-8 lg:grid-cols-2 lg:gap-16">
+          <div className="relative h-96 w-full overflow-auto rounded-lg border">
             <Image
               src={`/images/blog/` + (blog.thumb ? blog.thumb : blog.image)}
               layout="fill"
@@ -169,12 +169,12 @@ function FeaturedThumb(blog: PostTypes) {
               <p className="p text-xl">{blog.description}</p>
             </div>
 
-            <div className="grid grid-rows-4 grid-flow-col gap-4 w-max">
+            <div className="grid w-max grid-flow-col grid-rows-4 gap-4">
               {author.map((author: any) => {
                 return (
-                  <div className="flex space-x-3 items-center">
+                  <div className="flex items-center space-x-3">
                     {author.author_image_url && (
-                      <div className="relative overflow-auto w-10 h-10">
+                      <div className="relative h-10 w-10 overflow-auto">
                         <Image
                           src={author.author_image_url}
                           alt={`${author.author} avatar`}
@@ -185,8 +185,8 @@ function FeaturedThumb(blog: PostTypes) {
                       </div>
                     )}
                     <div className="flex flex-col">
-                      <span className="m-0 text-sm text-scale-1200">{author.author}</span>
-                      <span className="m-0 text-xs text-scale-900">{author.position}</span>
+                      <span className="text-scale-1200 m-0 text-sm">{author.author}</span>
+                      <span className="text-scale-900 m-0 text-xs">{author.position}</span>
                     </div>
                   </div>
                 )

apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx

@@ -109,13 +109,13 @@ function BlogPostPage(props: any) {
     return (
       <Link href={`/blog/${post.url}`} as={`/blog/${post.url}`}>
         <div className={className}>
-          <div className="cursor-pointer border border-scale-500 p-6 transition rounded hover:bg-scale-100 dark:hover:bg-scale-300">
+          <div className="border-scale-500 hover:bg-scale-100 dark:hover:bg-scale-300 cursor-pointer rounded border p-6 transition">
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-scale-900">{label}</p>
+                <p className="text-scale-900 text-sm">{label}</p>
               </div>
               <div>
-                <h4 className="text-lg text-scale-1200">{post.title}</h4>
+                <h4 className="text-scale-1200 text-lg">{post.title}</h4>
                 <p className="small">{post.date}</p>
               </div>
             </div>
@@ -183,17 +183,17 @@ function BlogPostPage(props: any) {
       <DefaultLayout>
         <div
           className="
-            container px-8 sm:px-16 xl:px-20 mx-auto
-            py-16
+            container mx-auto px-8 py-16 sm:px-16
+            xl:px-20
           "
         >
           <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-12 lg:col-span-2 mb-2">
+            <div className="col-span-12 mb-2 lg:col-span-2">
               {/* Back button */}
               <p>
                 <a
                   href={'/blog'}
-                  className="transition text-sm text-scale-900 hover:text-scale-1200 cursor-pointer flex items-center"
+                  className="text-scale-900 hover:text-scale-1200 flex cursor-pointer items-center text-sm transition"
                 >
                   <IconChevronLeft style={{ padding: 0 }} />
                   Back
@@ -202,7 +202,7 @@ function BlogPostPage(props: any) {
             </div>
             <div className="col-span-12 lg:col-span-12 xl:col-span-10">
               {/* Title and description */}
-              <div className="mb-16 space-y-8 max-w-5xl">
+              <div className="mb-16 max-w-5xl space-y-8">
                 <div className="space-y-4">
                   <p className="text-brand-900">Blog post</p>
                   <h1 className="h1">{props.blog.title}</h1>
@@ -214,15 +214,15 @@ function BlogPostPage(props: any) {
                   <div className="flex gap-3">
                     {author.map((author: any) => {
                       return (
-                        <div className="mt-6 mb-8 mr-4 lg:mb-0 w-max">
+                        <div className="mt-6 mb-8 mr-4 w-max lg:mb-0">
                           <Link href={author.author_url}>
                             <a className="cursor-pointer">
-                              <div className="flex gap-3 items-center">
+                              <div className="flex items-center gap-3">
                                 {author.author_image_url && (
                                   <div className="w-10">
                                     <Image
                                       src={author.author_image_url}
-                                      className="rounded-full border dark:border-dark"
+                                      className="dark:border-dark rounded-full border"
                                       width="100%"
                                       height="100%"
                                       layout="responsive"
@@ -230,10 +230,10 @@ function BlogPostPage(props: any) {
                                   </div>
                                 )}
                                 <div className="flex flex-col">
-                                  <span className="text-sm text-scale-1200 mb-0">
+                                  <span className="text-scale-1200 mb-0 text-sm">
                                     {author.author}
                                   </span>
-                                  <span className="text-xs mb-0 text-scale-900">
+                                  <span className="text-scale-900 mb-0 text-xs">
                                     {author.position}
                                   </span>
                                 </div>
@@ -250,7 +250,7 @@ function BlogPostPage(props: any) {
                 {/* Content */}
                 <div className="col-span-12 lg:col-span-7 xl:col-span-7">
                   {props.blog.thumb && (
-                    <div className="relative overflow-auto w-full h-96 mb-8 border rounded">
+                    <div className="relative mb-8 h-96 w-full overflow-auto rounded border">
                       <Image
                         src={'/images/blog/' + props.blog.thumb}
                         layout="fill"
@@ -262,10 +262,10 @@ function BlogPostPage(props: any) {
                     {content}
                   </article>
                   <div className="py-16">
-                    <div className="text-sm text-scale-900 dark:text-scale-1000">
+                    <div className="text-scale-900 dark:text-scale-1000 text-sm">
                       Share this article
                     </div>
-                    <div className="flex space-x-4 items-center mt-4">
+                    <div className="mt-4 flex items-center space-x-4">
                       <Link
                         passHref
                         href={`https://twitter.com/share?text=${props.blog.title}&url=https://supabase.com/blog/${props.blog.slug}`}
@@ -304,7 +304,7 @@ function BlogPostPage(props: any) {
                       </Link>
                     </div>
                   </div>
-                  <div className="grid lg:grid-cols-1 gap-8 py-8">
+                  <div className="grid gap-8 py-8 lg:grid-cols-1">
                     <div>
                       {props.prevPost && <NextCard post={props.prevPost} label="Last post" />}
                     </div>
@@ -316,12 +316,12 @@ function BlogPostPage(props: any) {
                   </div>
                 </div>
                 {/* Sidebar */}
-                <div className="col-span-12 lg:col-span-5 xl:col-span-3 xl:col-start-9 space-y-8">
-                  <div className="space-y-8 lg:mb-16 lg:top-16 lg:sticky">
+                <div className="col-span-12 space-y-8 lg:col-span-5 xl:col-span-3 xl:col-start-9">
+                  <div className="space-y-8 lg:sticky lg:top-16 lg:mb-16">
                     <div className="hidden lg:block">{toc}</div>
                     <div>
                       <div className="mb-4">
-                        <p className="text-sm text-scale-1200">Related articles</p>
+                        <p className="text-scale-1200 text-sm">Related articles</p>
                       </div>
                       <div className="space-y-3">
                         {props.relatedPosts.map((post: any) => (
@@ -332,7 +332,7 @@ function BlogPostPage(props: any) {
                                   <div className="text-scale-900">
                                     <IconFile size={'small'} style={{ minWidth: '1.2rem' }} />
                                   </div>
-                                  <span className="text-sm text-scale-1100 hover:text-gray-1200">
+                                  <span className="text-scale-1100 hover:text-gray-1200 text-sm">
                                     {post.title}
                                   </span>
                                 </div>
@@ -343,7 +343,7 @@ function BlogPostPage(props: any) {
                         ))}
                         <div className="mt-2">
                           <Link href={`/blog`} passHref>
-                            <a className="text-sm text-scale-1100 hover:text-scale-1200 cursor-pointer">
+                            <a className="text-scale-1100 hover:text-scale-1200 cursor-pointer text-sm">
                               View all posts
                             </a>
                           </Link>

apps/www/pages/blog/tags/[tag].tsx

@@ -35,7 +35,7 @@ function TagBlogsPage(props: Props) {
     <>
       <NextSeo title={`Blog | ${tag}`} description="Latest news from the Supabase team." />
       <DefaultLayout>
-        <div className="container px-8 py-16 mx-auto sm:px-16 xl:px-20">
+        <div className="container mx-auto px-8 py-16 sm:px-16 xl:px-20">
           <div className="flex space-x-1">
             <p className="cursor-pointer">
               <Link href="/blog">Blog</Link>

apps/www/pages/brand-assets.tsx

@@ -37,24 +37,24 @@ const Index = () => {
         <Container>
           <SectionContainer className="pb-0 md:pb-0 lg:pb-0">
             <div className="max-w-xl">
-              <h1 className="text-5xl text-scale-1200">Brand assets</h1>
-              <p className="text-2xl text-scale-1200">Download official Supabase logos</p>
-              <p className="text-sm text-scale-1200">
+              <h1 className="text-scale-1200 text-5xl">Brand assets</h1>
+              <p className="text-scale-1200 text-2xl">Download official Supabase logos</p>
+              <p className="text-scale-1200 text-sm">
                 All Supabase trademarks, logos, or other brand elements can never be modified or
                 used for any other purpose other than to represent Supabase Inc.
               </p>
             </div>
           </SectionContainer>
           <SectionContainer>
-            <div className="grid grid-cols-12 border dark:border-gray-600 rounded-lg shadow-small">
-              <div className="col-span-12 lg:col-span-5 relative overflow-auto w-full h-60 rounded-lg">
+            <div className="shadow-small grid grid-cols-12 rounded-lg border dark:border-gray-600">
+              <div className="relative col-span-12 h-60 w-full overflow-auto rounded-lg lg:col-span-5">
                 <Image src={`/brand-assets/logo-preview.jpg`} layout="fill" objectFit="cover" />
               </div>
-              <div className="col-span-12 lg:col-span-7 flex items-center">
+              <div className="col-span-12 flex items-center lg:col-span-7">
                 <div className="p-16">
                   <div className="space-y-2">
-                    <h1 className="text-4xl text-scale-1200">Supabase logos</h1>
-                    <p className="text-sm text-scale-1100">
+                    <h1 className="text-scale-1200 text-4xl">Supabase logos</h1>
+                    <p className="text-scale-1100 text-sm">
                       <p>
                         Download Supabase official logos, including as SVG's, in both light and dark
                         theme.

apps/www/pages/company.tsx

@@ -71,11 +71,11 @@ const Header = () => {
     <>
       <div
         className="
-          container 
-          mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24
-          text-center"
+          sm:py-18 
+          container relative mx-auto px-6 py-16 text-center md:py-24 lg:px-16 lg:py-24
+          xl:px-20"
       >
-        <h1 className="text-5xl text-scale-1200">
+        <h1 className="text-scale-1200 text-5xl">
           Join one of the world's fastest growing open source communities.
         </h1>
       </div>
@@ -92,7 +92,7 @@ const Team = () => {
   const IconLink = ({ link, icon }: iIconLink) => {
     return (
       <a href={link} target="_blank">
-        <div className="transition-opacity opacity-50 hover:opacity-75">{icon}</div>
+        <div className="opacity-50 transition-opacity hover:opacity-75">{icon}</div>
       </a>
     )
   }
@@ -104,14 +104,14 @@ const Team = () => {
         <div className="grid grid-cols-2 md:grid-cols-12">
           <div className="col-span-8 ">
             <p>
-              <p className="text-lg text-scale-1200">
+              <p className="text-scale-1200 text-lg">
                 Supabase is fully remote, with a strong affinity for open source maintainers and
                 ex-Founders. Our engineering team is made up of developers from AWS, Google,
                 Palantir, Stripe, and other YC companies.
               </p>
             </p>
           </div>
-          <div className=" md:text-right pt-8 md:mt-0 col-span-4">
+          <div className=" col-span-4 pt-8 md:mt-0 md:text-right">
             <a href="https://about.supabase.com/careers">
               <Button size="medium" className="text-white">
                 Join the team
@@ -190,19 +190,19 @@ const Community = () => {
         }
       /> */}
       <div className="space-y-16">
-        <div className="relative gap-8 grid grid-cols-2 lg:grid-cols-4 max-w-5xl ">
+        <div className="relative grid max-w-5xl grid-cols-2 gap-8 lg:grid-cols-4 ">
           {CommunityData.map((x, i) => (
             <div
               key={x.title}
               className={`
               space-y-4 text-center lg:text-left
               ${i !== CommunityData.length - 1 ? 'dark:border-r-dark lg:border-r' : ''}
-              ${i === 1 ? 'md:border-0 dark:border-r-dark lg:border-r ' : ''}
+              ${i === 1 ? 'dark:border-r-dark md:border-0 lg:border-r ' : ''}
           `}
             >
               <div
-                className={`relative h-7 w-7 mx-auto lg:mx-0 ${
-                  x.invertImgDarkMode ? ' dark:filter dark:invert' : ''
+                className={`relative mx-auto h-7 w-7 lg:mx-0 ${
+                  x.invertImgDarkMode ? ' dark:invert dark:filter' : ''
                 }`}
               >
                 <Image
@@ -217,15 +217,15 @@ const Community = () => {
                 />
               </div>
               <div>
-                <h1 className="mb-0 text-4xl text-scale-1200">{x.stat}</h1>
-                <p className="text-sm text-scale-1100">{x.statLabel}</p>
+                <h1 className="text-scale-1200 mb-0 text-4xl">{x.stat}</h1>
+                <p className="text-scale-1100 text-sm">{x.statLabel}</p>
               </div>
             </div>
           ))}
         </div>
         <div className="space-y-8">
           <div className="max-w-3xl">
-            <p className="text-sm text-scale-1100">
+            <p className="text-scale-1100 text-sm">
               With developer signups from the world's leading brands.
             </p>
           </div>
@@ -256,17 +256,17 @@ const Investors = () => {
         />
       </div>
 
-      <div className="mt-5 max-w-lg mx-auto grid gap-0.5 lg:grid-cols-3 lg:max-w-none mb-16">
+      <div className="mx-auto mt-5 mb-16 grid max-w-lg gap-0.5 lg:max-w-none lg:grid-cols-3">
         {InvestorData.filter((x) => x.lead === true).map((x) => (
           <div key={x.name}>
             <div
               className="
-              col-span-1 
-              flex justify-center content-end items-center
-              bg-gray-50 dark:bg-scale-400 
-              h-32"
+              dark:bg-scale-400 
+              col-span-1 flex h-32 content-end
+              items-center justify-center 
+              bg-gray-50"
             >
-              <div className="relative overflow-auto w-full h-8">
+              <div className="relative h-8 w-full overflow-auto">
                 <Image
                   layout="fill"
                   src={`${x.img}`}
@@ -274,9 +274,9 @@ const Investors = () => {
                   objectFit="scale-down"
                   objectPosition="center"
                   className="
-                    filter 
+                    opacity-50 
                     contrast-0
-                    opacity-50
+                    filter
                   "
                 />
               </div>
@@ -284,8 +284,8 @@ const Investors = () => {
           </div>
         ))}
       </div>
-      <h2 className="text-2xl text-scale-1200">Individual investors</h2>
-      <div className="mt-5 mx-auto grid gap-5 grid-cols-2 lg:grid-cols-4 lg:max-w-none">
+      <h2 className="text-scale-1200 text-2xl">Individual investors</h2>
+      <div className="mx-auto mt-5 grid grid-cols-2 gap-5 lg:max-w-none lg:grid-cols-4">
         {InvestorData.filter((x) => x.lead === false)
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((x) => (
@@ -294,8 +294,8 @@ const Investors = () => {
 
               <div className="flex flex-col justify-center space-y-2">
                 <div>
-                  <h1 className="mb-0 text-base text-scale-1200">{x.name}</h1>
-                  <p className="mb-0 text-xs text-scale-1000">{x.title}</p>
+                  <h1 className="text-scale-1200 mb-0 text-base">{x.name}</h1>
+                  <p className="text-scale-1000 mb-0 text-xs">{x.title}</p>
                 </div>
               </div>
             </div>
@@ -311,28 +311,28 @@ const Press = () => {
       <div>
         <SectionHeader title={'Press'} />
       </div>
-      <div className="mt-5 mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none">
+      <div className="mx-auto mt-5 grid gap-5 lg:max-w-none lg:grid-cols-2">
         {PressData.filter((x) => x.type == 'article').map((x) => (
           <a href={x.href} key={x.href} target="_blank">
-            <Card key={`press_${x.href}`} hoverable className="bg-white dark:bg-scale-400">
-              <Space className="justify-between h-40" direction="vertical">
+            <Card key={`press_${x.href}`} hoverable className="dark:bg-scale-400 bg-white">
+              <Space className="h-40 justify-between" direction="vertical">
                 <div>
-                  <h1 className="text-xl text-scale-1200">{x.type.toUpperCase()}</h1>
-                  <p className="text-base text-scale-1100">{x.title}</p>
+                  <h1 className="text-scale-1200 text-xl">{x.type.toUpperCase()}</h1>
+                  <p className="text-scale-1100 text-base">{x.title}</p>
                 </div>
               </Space>
             </Card>
           </a>
         ))}
       </div>
-      <div className="mt-5 mx-auto grid gap-5 sm:grid-cols-2 lg:grid-cols-4 lg:max-w-none">
+      <div className="mx-auto mt-5 grid gap-5 sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
         {PressData.filter((x) => x.type == 'podcast').map((x) => (
           <a href={x.href} key={x.href} target="_blank">
-            <Card key={`press_${x.href}`} hoverable className="bg-white dark:bg-scale-400">
-              <Space className="justify-between h-40" direction="vertical">
+            <Card key={`press_${x.href}`} hoverable className="dark:bg-scale-400 bg-white">
+              <Space className="h-40 justify-between" direction="vertical">
                 <div>
-                  <h1 className="text-xl text-scale-1200">{x.type.toUpperCase()}</h1>
-                  <p className="text-base text-scale-1100">{x.title}</p>
+                  <h1 className="text-scale-1200 text-xl">{x.type.toUpperCase()}</h1>
+                  <p className="text-scale-1100 text-base">{x.title}</p>
                 </div>
               </Space>
             </Card>

apps/www/pages/contact/enterprise.tsx

@@ -26,8 +26,8 @@ const EnterpriseContactPage = () => {
         }}
       />
 
-      <div className="max-w-xl px-4 mx-auto my-16 md:my-20 lg:my-24 xl:my-32">
-        <h2 className="block pb-16 text-center h2">Contact Enterprise Sales</h2>
+      <div className="mx-auto my-16 max-w-xl px-4 md:my-20 lg:my-24 xl:my-32">
+        <h2 className="h2 block pb-16 text-center">Contact Enterprise Sales</h2>
 
         <EnterpriseContactForm />
       </div>

apps/www/pages/database/Database.tsx

@@ -76,7 +76,7 @@ function Database() {
             'PostgreSQL is one of the worlds most scalable databases.',
           ]}
           image={[
-            <div className="w-full header--light block" key="light">
+            <div className="header--light block w-full" key="light">
               <Image
                 src={`${basePath}/images/product/database/header--light-2.png`}
                 alt="database header"
@@ -85,7 +85,7 @@ function Database() {
                 height="1116"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block" key="dark">
+            <div className="header--dark mr-0 w-full dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/database/header--dark-2.png`}
                 alt="database header"
@@ -100,11 +100,11 @@ function Database() {
 
         <SectionContainer>
           <div className="grid grid-cols-12">
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3">
-              <div className="mb-4 flex items-center space-x-2 p">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:mb-0">
+              <div className="p mb-4 flex items-center space-x-2">
                 <ProductIcon icon={Solutions['database'].icon} />
                 <IconX />
-                <div className="w-fit flex items-center">
+                <div className="flex w-fit items-center">
                   <Image
                     src={`${basePath}/images/product/database/postgresql-icon.svg`}
                     width={30}
@@ -118,8 +118,8 @@ function Database() {
                 100% portable. Bring your existing Postgres database, or migrate away at any time.
               </p>
             </div>
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3 lg:col-start-5">
-              <div className="mb-4 flex items-center space-x-2 p">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:col-start-5 lg:mb-0">
+              <div className="p mb-4 flex items-center space-x-2">
                 <ProductIcon icon={Solutions['database'].icon} />
                 <IconX />
                 <ProductIcon icon={Solutions['authentication'].icon} />
@@ -133,7 +133,7 @@ function Database() {
               </p>
             </div>
             <div className="col-span-12 lg:col-span-3 lg:col-start-9">
-              <div className="mb-4 flex items-center space-x-2 p">
+              <div className="p mb-4 flex items-center space-x-2">
                 <ProductIcon icon={Solutions['database'].icon} />
                 <IconX />
                 <ProductIcon icon={'M13 10V3L4 14h7v7l9-11h-7z'} />
@@ -240,18 +240,18 @@ function Database() {
             ]}
             footer={[
               <div className="grid grid-cols-12" key={0}>
-                <div className="mt-0 col-span-12 lg:col-span-6 xl:col-span-12 xl:mb-8 flex">
+                <div className="col-span-12 mt-0 flex lg:col-span-6 xl:col-span-12 xl:mb-8">
                   <p>
-                    <p className="m-0 text-scale-1100">Libraries coming soon:</p>
+                    <p className="text-scale-1100 m-0">Libraries coming soon:</p>
                   </p>
-                  <div className="space-x-1 ml-1">
+                  <div className="ml-1 space-x-1">
                     <Badge dot={false}>Python</Badge>
                     <Badge dot={false}>Dart</Badge>
                     <Badge dot={false}>C#</Badge>
                     <Badge dot={false}>Kotlin</Badge>
                   </div>
                 </div>
-                <div className="col-span-12 lg:col-span-6 xl:col-span-10 hidden xl:block" key={1}>
+                <div className="col-span-12 hidden lg:col-span-6 xl:col-span-10 xl:block" key={1}>
                   {/* <TweetCard
                     handle="@eunjae_lee"
                     img_url="https://pbs.twimg.com/profile_images/1188191474401320965/eGjSYbQd_400x400.jpg"
@@ -284,7 +284,7 @@ function Database() {
 
         <SectionContainer className="lg:py-48">
           <div className="grid grid-cols-12 lg:gap-16">
-            <div className="col-span-12 lg:col-span-6 xl:col-span-5 mb-8">
+            <div className="col-span-12 mb-8 lg:col-span-6 xl:col-span-5">
               <h2 className="h3">Extend your database</h2>
 
               <p className="p">Supabase works natively with Postgres extensions.</p>
@@ -302,7 +302,7 @@ function Database() {
                 </Button>
               </Link>
             </div>
-            <div className="mt-8 lg:mt-0 col-span-12 lg:col-span-6 lg:col-start-7">
+            <div className="col-span-12 mt-8 lg:col-span-6 lg:col-start-7 lg:mt-0">
               <SplitCodeBlockCarousel
                 // @ts-ignore
                 content={ExtensionsExamplesData}

apps/www/pages/edge-functions/edge-functions.tsx

@@ -114,7 +114,7 @@ function Database() {
           ]}
           subheader={[subtitle, 'PostgreSQL is one of the worlds most scalable databases.']}
           image={[
-            <div className="block w-full header--light" key="light">
+            <div className="header--light block w-full" key="light">
               <Image
                 src={`${basePath}/images/product/functions/functions-hero.png`}
                 alt="database header"
@@ -123,7 +123,7 @@ function Database() {
                 height="1116"
               />
             </div>,
-            <div className="w-full mr-0 header--dark dark:block" key="dark">
+            <div className="header--dark mr-0 w-full dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/functions/functions-hero.png`}
                 alt="database header"
@@ -137,18 +137,18 @@ function Database() {
         />
 
         <SectionContainer>
-          <div className="col-span-12 mb-10 space-y-12 lg:mb-0 lg:col-span-3 ">
-            <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-8 rounded">
+          <div className="col-span-12 mb-10 space-y-12 lg:col-span-3 lg:mb-0 ">
+            <div className="grid gap-8 rounded md:grid-cols-2 xl:grid-cols-4">
               {featureBlocks.map((item) => {
                 return (
-                  <div className="flex flex-col gap-4 px-8 py-6 border rounded group bg-scale-100 dark:bg-scale-300">
-                    <div className="flex items-center justify-center w-12 h-12 transition-all border rounded-md bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand-900 group-hover:scale-105">
+                  <div className="bg-scale-100 dark:bg-scale-300 group flex flex-col gap-4 rounded border px-8 py-6">
+                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand-900 flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
                       {item.icon ? item.icon : <IconCode strokeWidth={2} />}
                     </div>
 
                     <div>
-                      <h3 className="text-lg text-scale-1200">{item.title}</h3>
-                      <p className="text-sm text-scale-900">{item.description}</p>
+                      <h3 className="text-scale-1200 text-lg">{item.title}</h3>
+                      <p className="text-scale-900 text-sm">{item.description}</p>
                     </div>
                   </div>
                 )
@@ -158,9 +158,9 @@ function Database() {
         </SectionContainer>
 
         <SectionContainer>
-          <div className="col-span-12 mb-10 space-y-12 lg:mb-0 lg:col-span-3 ">
-            <div className="grid lg:grid-cols-12 gap-6 lg:gap-32 items-center">
-              <div className="flex flex-col lg:col-span-5 gap-8">
+          <div className="col-span-12 mb-10 space-y-12 lg:col-span-3 lg:mb-0 ">
+            <div className="grid items-center gap-6 lg:grid-cols-12 lg:gap-32">
+              <div className="flex flex-col gap-8 lg:col-span-5">
                 <div>
                   <h3 className="h3">Anatomy of an Edge Function</h3>
                   <p className="p">
@@ -175,9 +175,9 @@ function Database() {
                       <button
                         key={`featureHighlighted-${i}`}
                         className={
-                          'group transition-all border px-6 py-4 text-left rounded-md bg-scale-200 hover:bg-scale-100 hover:dark:bg-scale-300 hover:border' +
+                          'bg-scale-200 hover:bg-scale-100 hover:dark:bg-scale-300 group rounded-md border px-6 py-4 text-left transition-all hover:border' +
                           (active
-                            ? ' bg-white dark:bg-scale-400 border-scale-500'
+                            ? ' dark:bg-scale-400 border-scale-500 bg-white'
                             : ' border-scale-300')
                         }
                         onClick={() => setCurrentSelection(feat.highlightLines)}
@@ -194,7 +194,7 @@ function Database() {
                         </div>
                         <div
                           className={
-                            'transition-colors text-sm ' +
+                            'text-sm transition-colors ' +
                             (active
                               ? ' text-scale-1100'
                               : ' text-scale-800 group-hover:text-scale-1100 ')
@@ -207,7 +207,7 @@ function Database() {
                   })}
                 </div>
               </div>
-              <div className="lg:col-span-7 overflow-hidden">
+              <div className="overflow-hidden lg:col-span-7">
                 <ScrollableCodeBlock
                   lang="ts"
                   highlightLines={currentSelection}
@@ -273,11 +273,11 @@ serve(async (req) => {
             ]}
             footer={[
               <div className="grid grid-cols-12" key={0}>
-                <div className="mt-0 col-span-12 lg:col-span-6 xl:col-span-12 xl:mb-8 flex">
+                <div className="col-span-12 mt-0 flex lg:col-span-6 xl:col-span-12 xl:mb-8">
                   <p>
-                    <p className="m-0 text-scale-1100">Libraries coming soon:</p>
+                    <p className="text-scale-1100 m-0">Libraries coming soon:</p>
                   </p>
-                  <div className="space-x-1 ml-1">
+                  <div className="ml-1 space-x-1">
                     <Badge dot={false}>Python</Badge>
                     <Badge dot={false}>Dart</Badge>
                     <Badge dot={false}>C#</Badge>
@@ -285,7 +285,7 @@ serve(async (req) => {
                   </div>
                 </div>
                 <div
-                  className="col-span-12 lg:col-span-6 xl:col-span-10 hidden xl:block"
+                  className="col-span-12 hidden lg:col-span-6 xl:col-span-10 xl:block"
                   key={1}
                 ></div>
               </div>,

apps/www/pages/partners/[slug].tsx

@@ -33,10 +33,10 @@ function Partner({ partner }: { partner: Partner }) {
 
       <DefaultLayout>
         <SectionContainer>
-          <div className="max-w-5xl col-span-12 mx-auto mb-2 space-y-12 lg:col-span-2">
+          <div className="col-span-12 mx-auto mb-2 max-w-5xl space-y-12 lg:col-span-2">
             {/* Back button */}
             <Link href={`/partners/${partner.type === 'technology' ? 'integrations' : 'experts'}`}>
-              <a className="flex items-center transition-colors cursor-pointer text-scale-1200 hover:text-scale-1000">
+              <a className="text-scale-1200 hover:text-scale-1000 flex cursor-pointer items-center transition-colors">
                 <IconChevronLeft style={{ padding: 0 }} />
                 Back
               </a>
@@ -47,7 +47,7 @@ function Partner({ partner }: { partner: Partner }) {
                 layout="fixed"
                 width={56}
                 height={56}
-                className="rounded-full bg-scale-400 w-14 h-14 flex-shrink-f0"
+                className="bg-scale-400 flex-shrink-f0 h-14 w-14 rounded-full"
                 src={partner.logo}
                 alt={partner.title}
               />
@@ -57,7 +57,7 @@ function Partner({ partner }: { partner: Partner }) {
             </div>
 
             <div
-              className="py-6 bg-scale-300"
+              className="bg-scale-300 py-6"
               style={{ marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' }}
             >
               <Swiper
@@ -88,7 +88,7 @@ function Partner({ partner }: { partner: Partner }) {
                 {partner.images.map((image: any, i: number) => {
                   return (
                     <SwiperSlide key={i}>
-                      <div className="relative block ml-3 mr-3 overflow-hidden rounded-md cursor-move">
+                      <div className="relative ml-3 mr-3 block cursor-move overflow-hidden rounded-md">
                         <Image
                           layout="responsive"
                           objectFit="contain"
@@ -124,7 +124,7 @@ function Partner({ partner }: { partner: Partner }) {
                   Details
                 </h2>
 
-                <div className="divide-y text-scale-1200">
+                <div className="text-scale-1200 divide-y">
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Developer</span>
                     <span className="text-scale-1200">{partner.developer}</span>
@@ -137,7 +137,7 @@ function Partner({ partner }: { partner: Partner }) {
                         partner.type === 'technology' ? 'integrations' : 'experts'
                       }#${partner.category.toLowerCase()}`}
                     >
-                      <a className="transition-colors text-brand-900 hover:text-brand-800">
+                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -149,7 +149,7 @@ function Partner({ partner }: { partner: Partner }) {
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="transition-colors text-brand-900 hover:text-brand-800"
+                      className="text-brand-900 hover:text-brand-800 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -161,7 +161,7 @@ function Partner({ partner }: { partner: Partner }) {
                       href={partner.docs}
                       target="_blank"
                       rel="noreferrer"
-                      className="transition-colors text-brand-900 hover:text-brand-800"
+                      className="text-brand-900 hover:text-brand-800 transition-colors"
                     >
                       <span className="flex items-center space-x-1">
                         <span>Learn</span>

apps/www/pages/partners/experts/index.tsx

@@ -60,7 +60,7 @@ function ExpertPartnersPage(props: Props) {
         <SectionContainer className="space-y-12">
           <div>
             <h1 className="h1">{meta_title}</h1>
-            <h2 className="text-xl text-scale-900">{meta_description}</h2>
+            <h2 className="text-scale-900 text-xl">{meta_description}</h2>
           </div>
           <div className="grid grid-cols-12 lg:gap-16 xl:gap-32">
             <div className="col-span-3">
@@ -68,7 +68,7 @@ function ExpertPartnersPage(props: Props) {
               <div className="space-y-6">
                 {/* Search Bar */}
                 <div className="space-y-4">
-                  <div className="mb-2 text-sm text-scale-900">Explore more</div>
+                  <div className="text-scale-900 mb-2 text-sm">Explore more</div>
                   <PartnerLinkBox
                     title="Integrations"
                     color="blue"
@@ -77,7 +77,7 @@ function ExpertPartnersPage(props: Props) {
                     icon={
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="w-6 h-6"
+                        className="h-6 w-6"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -99,7 +99,7 @@ function ExpertPartnersPage(props: Props) {
                     icon={
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="w-5 h-5"
+                        className="h-5 w-5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"

apps/www/pages/partners/integrations/index.tsx

@@ -112,10 +112,10 @@ function IntegrationPartnersPage(props: Props) {
         <SectionContainer className="space-y-16">
           <div>
             <h1 className="h1">{meta_title}</h1>
-            <h2 className="text-xl text-scale-900">{meta_description}</h2>
+            <h2 className="text-scale-900 text-xl">{meta_description}</h2>
           </div>
           {/* Title */}
-          <div className="grid space-y-12 lg:grid-cols-12 lg:space-y-0 md:gap-8 lg:gap-16 xl:gap-16">
+          <div className="grid space-y-12 md:gap-8 lg:grid-cols-12 lg:gap-16 lg:space-y-0 xl:gap-16">
             <div className="lg:col-span-4 xl:col-span-3">
               {/* Horizontal link menu */}
               <div className="space-y-6">
@@ -131,20 +131,20 @@ function IntegrationPartnersPage(props: Props) {
                   onChange={(e) => setSearch(e.target.value)}
                   actions={
                     isSearching && (
-                      <span className="mr-1 text-white animate-spin">
+                      <span className="mr-1 animate-spin text-white">
                         <IconLoader />
                       </span>
                     )
                   }
                 />
                 <div className="hidden lg:block">
-                  <div className="mb-2 text-sm text-scale-900">Categories</div>
+                  <div className="text-scale-900 mb-2 text-sm">Categories</div>
                   <div className="space-y-1">
                     {allCategories.map((category) => (
                       <button
                         key={category}
                         onClick={() => router.push(`#${category.toLowerCase()}`)}
-                        className="block text-base text-scale-1100"
+                        className="text-scale-1100 block text-base"
                       >
                         {category}
                       </button>
@@ -152,7 +152,7 @@ function IntegrationPartnersPage(props: Props) {
                   </div>
                 </div>
                 <div className="space-y-4">
-                  <div className="mb-2 text-sm text-scale-900">Explore more</div>
+                  <div className="text-scale-900 mb-2 text-sm">Explore more</div>
                   <div className="grid grid-cols-2 gap-8 lg:grid-cols-1">
                     <PartnerLinkBox
                       title="Experts"
@@ -162,7 +162,7 @@ function IntegrationPartnersPage(props: Props) {
                       icon={
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
-                          className="w-6 h-6"
+                          className="h-6 w-6"
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
@@ -185,7 +185,7 @@ function IntegrationPartnersPage(props: Props) {
                       icon={
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
-                          className="w-5 h-5"
+                          className="h-5 w-5"
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"

apps/www/pages/pricing/index.tsx

@@ -108,10 +108,10 @@ export default function IndexPage() {
     from?: boolean
   }) => {
     return (
-      <div className="px-4 mt-8">
-        <h2 className="text-base font-normal text-scale-1200">{tier}</h2>
-        <div className="flex gap-2 items-baseline">
-          {from && <span className="text-base text-scale-1200">From</span>}
+      <div className="mt-8 px-4">
+        <h2 className="text-scale-1200 text-base font-normal">{tier}</h2>
+        <div className="flex items-baseline gap-2">
+          {from && <span className="text-scale-1200 text-base">From</span>}
           <span className="h1">
             {showDollarSign && '$'}
             {price}
@@ -147,9 +147,9 @@ export default function IndexPage() {
 
       <div className="">
         <div className="relative z-10 py-16 shadow-sm lg:py-28">
-          <div className="px-4 mx-auto text-center max-w-7xl sm:px-6 lg:px-8">
-            <div className="max-w-3xl mx-auto space-y-2 lg:max-w-none">
-              <h1 className="text-base uppercase font-mono text-brand-900 tracking-widest">
+          <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+            <div className="mx-auto max-w-3xl space-y-2 lg:max-w-none">
+              <h1 className="text-brand-900 font-mono text-base uppercase tracking-widest">
                 Pricing
               </h1>
               <h2 className="h1">Predictable pricing, no surprises</h2>
@@ -160,63 +160,63 @@ export default function IndexPage() {
           </div>
         </div>
 
-        <div className="flex flex-col max-w-7xl mx-auto">
+        <div className="mx-auto flex max-w-7xl flex-col">
           {/* <div className="absolute inset-0 shadow-sm bg-scale-200 h-3/5" /> */}
 
           <div
-            className="relative z-10 px-4 mx-auto w-full sm:px-6 lg:px-8
+            className="relative z-10 mx-auto -mt-8 w-full px-4 sm:px-6
           
-            -mt-8
+            lg:px-8
           "
           >
-            <div className="max-w-md mx-auto space-y-4 lg:max-w-7xl lg:grid lg:grid-cols-3 lg:gap-5 lg:space-y-0">
+            <div className="mx-auto max-w-md space-y-4 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-5 lg:space-y-0">
               {tiers.map((tier) => (
                 <div
                   key={tier.name}
                   className="
-                  border 
                   flex 
-                  flex-col
-                  overflow-hidden 
+                  flex-col 
+                  overflow-hidden
                   rounded 
+                  border 
                   "
                 >
-                  <div className="h-48 px-8 pt-6 bg-white dark:bg-scale-300">
+                  <div className="dark:bg-scale-300 h-48 bg-white px-8 pt-6">
                     <h3
                       className="
-                        inline-flex 
+                        text-scale-1200 
                         mb-2 
+                        inline-flex 
+                        rounded-full 
                         text-sm 
                         font-normal 
                         tracking-wide 
-                        rounded-full 
-                        lg:text-xl 
-                        text-scale-1200"
+                        lg:text-xl"
                       id="tier-standard"
                     >
                       {tier.name}
                     </h3>
                     <div
                       className="
-                      flex items-baseline text-5xl 
+                      text-scale-1200 flex items-baseline 
+                      text-5xl 
                       font-normal 
                       lg:text-4xl 
-                      xl:text-4xl 
-                      text-scale-1200
+                      xl:text-4xl
                       
                       "
                     >
                       {tier.priceMonthly !== undefined ? (
                         <div className="flex items-end gap-2">
                           {tier.from && (
-                            <span className="text-base xl:text-xl font-medium">From</span>
+                            <span className="text-base font-medium xl:text-xl">From</span>
                           )}
                           <div>
                             <span>${tier.priceMonthly}</span>
-                            <span className="ml-1 text-2xl font-medium text-scale-900">/mo</span>
+                            <span className="text-scale-900 ml-1 text-2xl font-medium">/mo</span>
                           </div>
                           {tier.warning && (
-                            <div className="px-2 py-1 mt-2 text-xs rounded-md bg-brand-300 bg-opacity-30 text-brand-1000">
+                            <div className="bg-brand-300 text-brand-1000 mt-2 rounded-md bg-opacity-30 px-2 py-1 text-xs">
                               {tier.warning}
                             </div>
                           )}
@@ -225,38 +225,38 @@ export default function IndexPage() {
                         <span>Contact Us</span>
                       )}
                     </div>
-                    <p className="mt-4 text-base text-scale-1100">{tier.description}</p>
+                    <p className="text-scale-1100 mt-4 text-base">{tier.description}</p>
                   </div>
                   <div
                     className="
-                    flex flex-col justify-between flex-1
+                    dark:border-scale-400 bg-scale-100 dark:bg-scale-300 flex
                     
+                    h-full 
+                    flex-1 
+                    flex-col
+                    
+                    justify-between 
                     space-y-6 
-                    border-t 
-                    dark:border-scale-400
-                    
-                    bg-scale-100 
-                    dark:bg-scale-300 
 
+                    border-t
                     px-8
-                    py-6
 
-                    h-full
+                    py-6
                   "
                   >
-                    {tier.preface && <p className="text-base text-scale-1200">{tier.preface}</p>}
+                    {tier.preface && <p className="text-scale-1200 text-base">{tier.preface}</p>}
                     {/* <p className="text-scale-900 text-sm">Included with plan:</p> */}
-                    <ul role="list" className="divide-y dark:divide-scale-400">
+                    <ul role="list" className="dark:divide-scale-400 divide-y">
                       {tier.features.map((feature) => (
                         <li key={feature} className="flex items-center py-2">
                           {/* <div className="flex items-center justify-center w-6 h-6 rounded-full bg-brand-600 dark:bg-brand-400 bg-opacity-30"> */}
                           <IconCheck
-                            className="w-4 h-4 text-brand-900 "
+                            className="text-brand-900 h-4 w-4 "
                             aria-hidden="true"
                             strokeWidth={3}
                           />
                           {/* </div> */}
-                          <p className="mb-0 ml-3 text-sm text-scale-1100 dark:text-scale-1200">
+                          <p className="text-scale-1100 dark:text-scale-1200 mb-0 ml-3 text-sm">
                             {feature}
                           </p>
                         </li>
@@ -266,10 +266,10 @@ export default function IndexPage() {
                     <div className="flex flex-col gap-6">
                       <div className="space-y-2">
                         {tier.additional && (
-                          <p className="text-base text-scale-1200">{tier.additional}</p>
+                          <p className="text-scale-1200 text-base">{tier.additional}</p>
                         )}
-                        {tier.scale && <p className="text-xs text-scale-900">{tier.scale}</p>}
-                        {tier.shutdown && <p className="text-xs text-scale-900">{tier.shutdown}</p>}
+                        {tier.scale && <p className="text-scale-900 text-xs">{tier.scale}</p>}
+                        {tier.shutdown && <p className="text-scale-900 text-xs">{tier.shutdown}</p>}
                       </div>
                       <a href={tier.href}>
                         <Button block size="large" className="dark:text-white">
@@ -285,36 +285,36 @@ export default function IndexPage() {
         </div>
       </div>
 
-      <div className="container relative px-4 py-16 mx-auto shadow-sm lg:px-16 xl:px-20 sm:py-18 md:py-24 lg:py-24">
+      <div className="sm:py-18 container relative mx-auto px-4 py-16 shadow-sm md:py-24 lg:px-16 lg:py-24 xl:px-20">
         <div className="text-center">
-          <h2 className="text-3xl text-scale-1200">Add-Ons</h2>
-          <p className="mb-16 text-lg text-scale-1100">
+          <h2 className="text-scale-1200 text-3xl">Add-Ons</h2>
+          <p className="text-scale-1100 mb-16 text-lg">
             Level up your Supabase experience with add-ons.
           </p>
         </div>
 
         <div className="space-y-8">
           <PricingAddOnTable
-            icon={<ServerIcon className="w-8 h-8" strokeWidth={1.5} />}
+            icon={<ServerIcon className="h-8 w-8" strokeWidth={1.5} />}
             pricing={pricingAddOn.database}
           />
           <PricingAddOnTable
-            icon={<SupportIcon className="w-8 h-8" strokeWidth={1.5} />}
+            icon={<SupportIcon className="h-8 w-8" strokeWidth={1.5} />}
             pricing={pricingAddOn.support}
           />
         </div>
       </div>
 
       <div className="bg-scale-200">
-        <div className="container relative px-4 py-16 mx-auto lg:px-16 xl:px-20 sm:py-18 md:py-24 lg:py-24">
+        <div className="sm:py-18 container relative mx-auto px-4 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20">
           <div className="text-center">
-            <h2 className="text-3xl text-scale-1200">Compare Plans</h2>
-            <p className="mb-16 text-lg text-scale-1100">
+            <h2 className="text-scale-1200 text-3xl">Compare Plans</h2>
+            <p className="text-scale-1100 mb-16 text-lg">
               Start with a hobby project, collaborate with a team, and scale to millions of users.
             </p>
           </div>
 
-          <div className="mb-16 sm:mb-18 md:mb-24 lg:mb-24">
+          <div className="sm:mb-18 mb-16 md:mb-24 lg:mb-24">
             {/* <!-- xs to lg --> */}
 
             <div className="lg:hidden">
@@ -440,60 +440,60 @@ export default function IndexPage() {
 
             {/* <!-- lg+ --> */}
             <div className="hidden lg:block">
-              <table className="w-full h-px table-fixed">
+              <table className="h-px w-full table-fixed">
                 <caption className="sr-only">Pricing plan comparison</caption>
-                <thead className="sticky z-10 top-[62px] border-b border-scale-700 dark:border-scale-400 bg-scale-200 dark:bg-scale-300">
+                <thead className="border-scale-700 dark:border-scale-400 bg-scale-200 dark:bg-scale-300 sticky top-[62px] z-10 border-b">
                   <tr>
                     <th
-                      className="relative px-6 py-4 text-sm font-normal text-left text-scale-1200"
+                      className="text-scale-1200 relative px-6 py-4 text-left text-sm font-normal"
                       scope="col"
                     >
                       <span className="sr-only">Feature by</span>
                       <span>Plans</span>
                       <div
-                        className="absolute bottom-0 left-0 h-0.25 w-full"
+                        className="h-0.25 absolute bottom-0 left-0 w-full"
                         style={{ height: '1px' }}
                       ></div>
                     </th>
 
                     <th
-                      className="w-1/4 px-6 py-4 text-sm font-normal text-left text-scale-1200"
+                      className="text-scale-1200 w-1/4 px-6 py-4 text-left text-sm font-normal"
                       scope="col"
                     >
                       <span>Free</span>
                       <div
-                        className="absolute bottom-0 left-0 h-0.25 w-full"
+                        className="h-0.25 absolute bottom-0 left-0 w-full"
                         style={{ height: '1px' }}
                       ></div>
                     </th>
 
                     <th
-                      className="w-1/4 px-6 py-4 text-sm font-normal leading-6 text-left text-scale-1200"
+                      className="text-scale-1200 w-1/4 px-6 py-4 text-left text-sm font-normal leading-6"
                       scope="col"
                     >
                       <span>Pro</span>
                       <div
-                        className="absolute bottom-0 left-0 h-0.25 w-full"
+                        className="h-0.25 absolute bottom-0 left-0 w-full"
                         style={{ height: '1px' }}
                       ></div>
                     </th>
 
                     <th
-                      className="w-1/4 px-6 py-4 text-sm font-normal leading-6 text-left text-scale-1200"
+                      className="text-scale-1200 w-1/4 px-6 py-4 text-left text-sm font-normal leading-6"
                       scope="col"
                     >
                       <span>Enterprise</span>
                       <div
-                        className="absolute bottom-0 left-0 h-0.25 w-full"
+                        className="h-0.25 absolute bottom-0 left-0 w-full"
                         style={{ height: '1px' }}
                       ></div>
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y border-scale-700 dark:border-scale-400 divide-scale-700 dark:divide-scale-400">
-                  <tr className="divide-x divide-scale-700 dark:divide-scale-400">
+                <tbody className="border-scale-700 dark:border-scale-400 divide-scale-700 dark:divide-scale-400 divide-y">
+                  <tr className="divide-scale-700 dark:divide-scale-400 divide-x">
                     <th
-                      className="px-6 py-8 text-sm font-medium text-left align-top text-scale-900 dark:text-white"
+                      className="text-scale-900 px-6 py-8 text-left align-top text-sm font-medium dark:text-white"
                       scope="row"
                     >
                       Pricing
@@ -504,7 +504,7 @@ export default function IndexPage() {
                         <span className="h1 text-scale-1200">$0</span>
                         <p className="p">/project/month</p>
 
-                        <p className="text-sm p">Perfect for hobby projects and experiments</p>
+                        <p className="p text-sm">Perfect for hobby projects and experiments</p>
 
                         <Link href="https://app.supabase.io" as="https://app.supabase.io">
                           <a>
@@ -521,7 +521,7 @@ export default function IndexPage() {
                         <span className="h1 text-scale-1200">$25</span>
                         <p className="p">/project/month + usage costs</p>
 
-                        <p className="text-sm p">
+                        <p className="p text-sm">
                           Everything you need to scale your project into production
                         </p>
 
@@ -540,7 +540,7 @@ export default function IndexPage() {
                         <span className="h1 text-scale-1200">Contact Us</span>
                         <p className="p">for a quote</p>
 
-                        <p className="text-sm p">
+                        <p className="p text-sm">
                           Designated support team, account manager and technical specialist
                         </p>
 
@@ -578,7 +578,7 @@ export default function IndexPage() {
                   <PricingTableRowDesktop category={pricing.support} icon={pricing.support.icon} />
                 </tbody>
                 <tfoot>
-                  <tr className="border-t border-scale-200 dark:border-scale-600">
+                  <tr className="border-scale-200 dark:border-scale-600 border-t">
                     <th className="sr-only" scope="row">
                       Choose your plan
                     </th>
@@ -619,8 +619,8 @@ export default function IndexPage() {
           </div>
         </div>
         <div className="border-t">
-          <div className="lg:grid-cols-2 gap-y-10 gap-x-10 max-w-5xl mx-auto">
-            <div className="px-6 py-16 mx-auto lg:px-16 xl:px-20 sm:py-18 md:py-24 lg:py-24">
+          <div className="mx-auto max-w-5xl gap-y-10 gap-x-10 lg:grid-cols-2">
+            <div className="sm:py-18 mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20">
               <h2 className="h3 text-center">Frequently asked questions</h2>
               <p className="p text-center">
                 Can&apos;t find the answer to your question, ask someone in the community either on

apps/www/pages/storage/Storage.tsx

@@ -57,7 +57,7 @@ function StoragePage() {
             'With custom policies and permissions that are familiar and easy to implement.',
           ]}
           image={[
-            <div className="w-full header--light block" key="light">
+            <div className="header--light block w-full" key="light">
               <Image
                 src={`${basePath}/images/product/storage/header--light.png`}
                 alt="storage header"
@@ -66,7 +66,7 @@ function StoragePage() {
                 height="1067"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block" key="dark">
+            <div className="header--dark mr-0 w-full dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/storage/header--dark.png`}
                 alt="storage header"
@@ -81,8 +81,8 @@ function StoragePage() {
 
         <SectionContainer>
           <div className="grid grid-cols-12">
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3">
-              <div className="mb-4 flex items-center space-x-2 p">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:mb-0">
+              <div className="p mb-4 flex items-center space-x-2">
                 <ProductIcon icon={Solutions['storage'].icon} />
                 <IconX />
                 <ProductIcon icon={Solutions['authentication'].icon} />
@@ -96,7 +96,7 @@ function StoragePage() {
                 Integrates well with the rest of Supabase ecosystem, including Auth and Postgres.
               </p>
             </div>
-            <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3 lg:col-start-5">
+            <div className="col-span-12 mb-10 lg:col-span-3 lg:col-start-5 lg:mb-0">
               <div className="mb-4 flex items-center space-x-2">
                 <ProductIcon
                   icon={
@@ -139,7 +139,7 @@ function StoragePage() {
             content={DashboardViewData}
             footer={
               <>
-                <span key="check-out" className="p block mb-4">
+                <span key="check-out" className="p mb-4 block">
                   Check out our example app
                 </span>
                 <ExampleCard
@@ -180,8 +180,8 @@ function StoragePage() {
               </p>,
             ]}
             footer={[
-              <div className="grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16 my-8" key={0}>
-                <div className="col-span-6 lg:col-span-12 lg:mb-8 xl:mb-0 xl:col-span-4">
+              <div className="my-8 grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16" key={0}>
+                <div className="col-span-6 lg:col-span-12 lg:mb-8 xl:col-span-4 xl:mb-0">
                   <FeatureColumn
                     icon={<IconWifi />}
                     title="CDN"
@@ -215,7 +215,7 @@ function StoragePage() {
 
                 <SectionContainer>
                   <div className="grid grid-cols-12 lg:gap-16">
-                    <div className="col-span-12 lg:col-span-5 mb-8">
+                    <div className="col-span-12 mb-8 lg:col-span-5">
                       <h2 className="h3">
                         Integrates natively <br />
                         with Supabase Auth

apps/www/pages/support.tsx

@@ -38,22 +38,22 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="text-center">
-              <h1 className="text-4xl text-scale-1200">Get Support</h1>
+              <h1 className="text-scale-1200 text-4xl">Get Support</h1>
               <p>
-                <p className="lg:text-lg text-scale-1100">
+                <p className="text-scale-1100 lg:text-lg">
                   Need a bit of help? We're here for you. Check out our current issues, GitHub
                   discussions, or get email support.
                 </p>
               </p>
             </div>
-            <div className="grid sm:grid-cols-3 md:grid-cols-12 gap-5 mt-16 text-scale-1200">
+            <div className="text-scale-1200 mt-16 grid gap-5 sm:grid-cols-3 md:grid-cols-12">
               <div className="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div
-                  className="h-40 bg-white dark:bg-scale-400 
-                    border-t border-r border-l border-gray-100 dark:border-gray-600
-                    p-5
-                    flex flex-col justify-between
-                    rounded rounded-b-none
+                  className="dark:bg-scale-400 flex h-40 
+                    flex-col justify-between rounded rounded-b-none border-t
+                    border-r
+                    border-l border-gray-100 bg-white
+                    p-5 dark:border-gray-600
                     "
                 >
                   <div className="mb-4">
@@ -73,11 +73,11 @@ const Index = ({}: Props) => {
                 <div>
                   <div
                     className="
-                    bg-white dark:bg-scale-400 
-                    border-b border-r border-l border-gray-100 dark:border-gray-600
-                    p-5 pt-10
-                    flex flex-col justify-between
-                    rounded rounded-t-none"
+                    dark:bg-scale-400 flex 
+                    flex-col justify-between rounded rounded-t-none border-b
+                    border-r border-l
+                    border-gray-100 bg-white p-5
+                    pt-10 dark:border-gray-600"
                   >
                     <Link
                       href="https://github.com/supabase/supabase/issues"
@@ -94,11 +94,11 @@ const Index = ({}: Props) => {
               </div>
               <div className="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div
-                  className="h-40 bg-white dark:bg-scale-400 
-                    border-t border-r border-l border-gray-100 dark:border-gray-600
-                    p-5
-                    flex flex-col justify-between
-                    rounded rounded-b-none
+                  className="dark:bg-scale-400 flex h-40 
+                    flex-col justify-between rounded rounded-b-none border-t
+                    border-r
+                    border-l border-gray-100 bg-white
+                    p-5 dark:border-gray-600
                     "
                 >
                   <div className="mb-4">
@@ -118,11 +118,11 @@ const Index = ({}: Props) => {
                 <div>
                   <div
                     className="
-                    bg-white dark:bg-scale-400 
-                    border-b border-r border-l border-gray-100 dark:border-gray-600
-                    p-5 pt-10
-                    flex flex-col justify-between
-                    rounded rounded-t-none"
+                    dark:bg-scale-400 flex 
+                    flex-col justify-between rounded rounded-t-none border-b
+                    border-r border-l
+                    border-gray-100 bg-white p-5
+                    pt-10 dark:border-gray-600"
                   >
                     <Link
                       href="https://github.com/supabase/supabase/discussions"
@@ -140,11 +140,11 @@ const Index = ({}: Props) => {
 
               <div className="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div
-                  className="h-40 bg-white dark:bg-scale-400 
-                    border-t border-r border-l border-gray-100 dark:border-gray-600
-                    p-5
-                    flex flex-col justify-between
-                    rounded rounded-b-none
+                  className="dark:bg-scale-400 flex h-40 
+                    flex-col justify-between rounded rounded-b-none border-t
+                    border-r
+                    border-l border-gray-100 bg-white
+                    p-5 dark:border-gray-600
                     "
                 >
                   <div className="mb-4">
@@ -166,10 +166,10 @@ const Index = ({}: Props) => {
                   <div
                     className="
                     bbg-white dark:bg-scale-400 
-                    border-b border-r border-l border-gray-100 dark:border-gray-600
-                    p-5 pt-10
-                    flex flex-col justify-between
-                    rounded rounded-t-none"
+                    flex flex-col justify-between rounded rounded-t-none
+                    border-b border-r
+                    border-l border-gray-100 p-5
+                    pt-10 dark:border-gray-600"
                   >
                     <a href="mailto:support@supabase.io">
                       <Button size="medium" type="default" iconRight={<IconMail />}>

apps/www/styles/index.css

@@ -106,7 +106,7 @@ h6 { */
 }
 
 .small:not(.prose *):not(.overwrite) {
-  @apply text-xs text-scale-900;
+  @apply text-scale-900 text-xs;
 }
 
 .sbui-border-fix select {
@@ -165,7 +165,7 @@ h6 { */
 } */
 
 .sbui-tabs--alt div[role='tablist'] .sbui-btn-primary {
-  @apply text-white bg-gray-800 dark:bg-scale-300 dark:text-white;
+  @apply dark:bg-scale-300 bg-gray-800 text-white dark:text-white;
   text-shadow: none;
   font-weight: 400;
 }

package-lock.json

@@ -29,7 +29,7 @@
         "faker": "^5.5.3",
         "jest": "^27.3.1",
         "postcss": "^8.4.12",
-        "prettier": "^2.5.1",
+        "prettier": "^2.6.2",
         "prettier-plugin-tailwindcss": "^0.1.8",
         "tailwindcss": "^3.0.24",
         "ts-jest": "^27.0.7",
@@ -44,6 +44,7 @@
     },
     "apps/docs": {
       "version": "0.0.0",
+      "extraneous": true,
       "dependencies": {
         "next": "12.1.0",
         "react": "17.0.2",
@@ -60,21 +61,15 @@
         "typescript": "^4.5.3"
       }
     },
-    "apps/docs/node_modules/@types/node": {
-      "version": "17.0.27",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.27.tgz",
-      "integrity": "sha512-4/Ke7bbWOasuT3kceBZFGakP1dYN2XFd8v2l9bqF2LNWrmeU07JLpp56aEeG6+Q3olqO5TvXpW0yaiYnZJ5CXg==",
-      "dev": true
-    },
     "apps/temp-community-forum": {
       "name": "forum",
       "version": "0.0.0",
       "dependencies": {
         "@octokit/graphql": "^4.8.0",
+        "common": "*",
         "next": "12.0.8",
         "react": "17.0.2",
-        "react-dom": "17.0.2",
-        "ui": "*"
+        "react-dom": "17.0.2"
       },
       "devDependencies": {
         "@types/node": "^17.0.12",
@@ -336,10 +331,10 @@
       "name": "tutorials",
       "version": "0.0.0",
       "dependencies": {
+        "common": "*",
         "next": "12.0.8",
         "react": "17.0.2",
-        "react-dom": "17.0.2",
-        "ui": "*"
+        "react-dom": "17.0.2"
       },
       "devDependencies": {
         "@types/node": "^17.0.12",
@@ -597,6 +592,31 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "apps/temp-docs": {
+      "name": "docs",
+      "version": "0.0.0",
+      "dependencies": {
+        "common": "*",
+        "next": "12.1.0",
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+      },
+      "devDependencies": {
+        "@types/node": "^17.0.12",
+        "@types/react": "17.0.39",
+        "config": "*",
+        "eslint": "8.9.0",
+        "next-transpile-modules": "9.0.0",
+        "tsconfig": "*",
+        "typescript": "^4.5.3"
+      }
+    },
+    "apps/temp-docs/node_modules/@types/node": {
+      "version": "17.0.27",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.27.tgz",
+      "integrity": "sha512-4/Ke7bbWOasuT3kceBZFGakP1dYN2XFd8v2l9bqF2LNWrmeU07JLpp56aEeG6+Q3olqO5TvXpW0yaiYnZJ5CXg==",
+      "dev": true
+    },
     "apps/www": {
       "version": "0.0.2",
       "license": "MIT",
@@ -5601,6 +5621,10 @@
       "devOptional": true,
       "peer": true
     },
+    "node_modules/common": {
+      "resolved": "packages/common",
+      "link": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6117,7 +6141,7 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/docs": {
-      "resolved": "apps/docs",
+      "resolved": "apps/temp-docs",
       "link": true
     },
     "node_modules/doctrine": {
@@ -15057,10 +15081,6 @@
         "node": ">=4.2.0"
       }
     },
-    "node_modules/ui": {
-      "resolved": "packages/ui",
-      "link": true
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -15828,6 +15848,30 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "packages/common": {
+      "version": "0.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@headlessui/react": "^1.5.0",
+        "@supabase/ui": "^0.37.0-alpha.50"
+      },
+      "devDependencies": {
+        "@types/react": "^17.0.37",
+        "@types/react-dom": "^17.0.11",
+        "config": "*",
+        "tsconfig": "*",
+        "typescript": "^4.5.3"
+      }
+    },
+    "packages/common/node_modules/@types/react-dom": {
+      "version": "17.0.16",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.16.tgz",
+      "integrity": "sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "^17"
+      }
+    },
     "packages/config": {
       "version": "0.0.0",
       "license": "MIT",
@@ -15864,6 +15908,7 @@
     },
     "packages/ui": {
       "version": "0.0.0",
+      "extraneous": true,
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.5.0",
@@ -15876,15 +15921,6 @@
         "tsconfig": "*",
         "typescript": "^4.5.3"
       }
-    },
-    "packages/ui/node_modules/@types/react-dom": {
-      "version": "17.0.16",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.16.tgz",
-      "integrity": "sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^17"
-      }
     }
   },
   "dependencies": {
@@ -19526,6 +19562,29 @@
       "devOptional": true,
       "peer": true
     },
+    "common": {
+      "version": "file:packages/common",
+      "requires": {
+        "@headlessui/react": "^1.5.0",
+        "@supabase/ui": "^0.37.0-alpha.50",
+        "@types/react": "^17.0.37",
+        "@types/react-dom": "^17.0.11",
+        "config": "*",
+        "tsconfig": "*",
+        "typescript": "^4.5.3"
+      },
+      "dependencies": {
+        "@types/react-dom": {
+          "version": "17.0.16",
+          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.16.tgz",
+          "integrity": "sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==",
+          "dev": true,
+          "requires": {
+            "@types/react": "^17"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -19951,10 +20010,11 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "docs": {
-      "version": "file:apps/docs",
+      "version": "file:apps/temp-docs",
       "requires": {
         "@types/node": "^17.0.12",
         "@types/react": "17.0.39",
+        "common": "*",
         "config": "*",
         "eslint": "8.9.0",
         "next": "12.1.0",
@@ -19962,8 +20022,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "tsconfig": "*",
-        "typescript": "^4.5.3",
-        "ui": "*"
+        "typescript": "^4.5.3"
       },
       "dependencies": {
         "@types/node": {
@@ -21088,6 +21147,7 @@
         "@octokit/graphql": "^4.8.0",
         "@types/node": "^17.0.12",
         "@types/react": "17.0.37",
+        "common": "*",
         "config": "*",
         "eslint": "7.32.0",
         "next": "12.0.8",
@@ -21095,8 +21155,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "tsconfig": "*",
-        "typescript": "^4.5.3",
-        "ui": "*"
+        "typescript": "^4.5.3"
       },
       "dependencies": {
         "@babel/plugin-syntax-jsx": {
@@ -26650,6 +26709,7 @@
       "requires": {
         "@types/node": "^17.0.12",
         "@types/react": "17.0.37",
+        "common": "*",
         "config": "*",
         "eslint": "7.32.0",
         "next": "12.0.8",
@@ -26657,8 +26717,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "tsconfig": "*",
-        "typescript": "^4.5.3",
-        "ui": "*"
+        "typescript": "^4.5.3"
       },
       "dependencies": {
         "@babel/plugin-syntax-jsx": {
@@ -26879,29 +26938,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
       "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw=="
     },
-    "ui": {
-      "version": "file:packages/ui",
-      "requires": {
-        "@headlessui/react": "^1.5.0",
-        "@supabase/ui": "^0.37.0-alpha.50",
-        "@types/react": "^17.0.37",
-        "@types/react-dom": "^17.0.11",
-        "config": "*",
-        "tsconfig": "*",
-        "typescript": "^4.5.3"
-      },
-      "dependencies": {
-        "@types/react-dom": {
-          "version": "17.0.16",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.16.tgz",
-          "integrity": "sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==",
-          "dev": true,
-          "requires": {
-            "@types/react": "^17"
-          }
-        }
-      }
-    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -13,7 +13,7 @@
     "build": "turbo run build",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "format": "prettier --write \"apps/**/*.{js,jsx,ts,tsx,css,md,json}\"",
     "docker:dev": "cd docker && docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up --renew-anon-volumes",
     "docker:up": "cd docker && docker-compose up",
     "docker:down": "cd docker && docker-compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down --remove-orphans",
@@ -36,7 +36,7 @@
     "faker": "^5.5.3",
     "jest": "^27.3.1",
     "postcss": "^8.4.12",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.24",
     "ts-jest": "^27.0.7",