Add prettier-plugin-tailwindcss (#2245)

Sorts in [this
order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted),
which seems reasonable

## Checklist

- [-] I have added
[tests](https://www.cursorless.org/docs/contributing/test-case-recorder/)
- [-] I have updated the
[docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and
[cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet)
- [-] I have not broken the cheatsheet

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: pokey

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-unicorn": "49.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "prettier": "3.0.3",
+    "prettier-plugin-tailwindcss": "0.5.11",
     "syncpack": "9.8.4",
     "typescript": "^5.2.2"
   },

packages/cheatsheet/src/lib/cheatsheet.tsx

@@ -17,14 +17,14 @@ export const CheatsheetPage: React.FC<CheatsheetPageProps> = ({
 }) => {
   return (
     <main className="dark:text-stone-100">
-      <h1 className="text-2xl md:text-3xl text-center mt-2 mb-1 xl:mt-4">
+      <h1 className="mb-1 mt-2 text-center text-2xl md:text-3xl xl:mt-4">
         Cursorless Cheatsheet{" "}
-        <span className="text-sm inline-block align-middle">
+        <span className="inline-block align-middle text-sm">
           <SmartLink to="#legend">
             <FontAwesomeIcon icon={faCircleQuestion} />
           </SmartLink>
         </span>
-        <small className="text-sm block">
+        <small className="block text-sm">
           See the{" "}
           <SmartLink to={"https://www.cursorless.org/docs/"}>
             full documentation
@@ -42,7 +42,7 @@ type CheatsheetProps = {
 };
 
 const Cheatsheet: React.FC<CheatsheetProps> = ({ cheatsheetInfo }) => (
-  <div className="p-2 gap-2 md:p-3 md:gap-3 xl:p-4 xl:gap-4 columns-1 md:columns-2 xl:columns-3 xl:max-w-[1600px] xl:mx-auto">
+  <div className="columns-1 gap-2 p-2 md:columns-2 md:gap-3 md:p-3 xl:mx-auto xl:max-w-[1600px] xl:columns-3 xl:gap-4 xl:p-4">
     {cheatsheetInfo.sections
       .filter((section) => section.items.length > 0)
       .map((section) => (
@@ -64,7 +64,7 @@ type CheatsheetSectionProps = {
 };
 
 const CheatsheetSection: React.FC<CheatsheetSectionProps> = ({ children }) => (
-  <section className=" break-inside-avoid mb-5 md:mb-3 xl:mb-4 last:mb-0">
+  <section className=" mb-5 break-inside-avoid last:mb-0 md:mb-3 xl:mb-4">
     {children}
   </section>
 );

packages/cheatsheet/src/lib/components/CheatsheetLegendComponent.tsx

@@ -20,16 +20,16 @@ export default function CheatsheetLegendComponent({
   return (
     <div
       id="legend"
-      className={`border ${borderClassName} rounded-lg bg-violet-100 dark:bg-violet-900 overflow-hidden`}
+      className={`border ${borderClassName} overflow-hidden rounded-lg bg-violet-100 dark:bg-violet-900`}
     >
-      <h2 className="text-xl text-center my-1 text-violet-900 dark:text-violet-100">
+      <h2 className="my-1 text-center text-xl text-violet-900 dark:text-violet-100">
         Legend
       </h2>
       <table className="w-full">
         <thead>
           <tr className="text bg-violet-300 dark:bg-violet-500">
-            <th className="px-1 font-normal w-1/2">Term</th>
-            <th className="px-1 border-l border-violet-400 font-normal">
+            <th className="w-1/2 px-1 font-normal">Term</th>
+            <th className="border-l border-violet-400 px-1 font-normal">
               Definition
             </th>
           </tr>
@@ -38,7 +38,7 @@ export default function CheatsheetLegendComponent({
           {data.map(({ term, definition, link, id }) => (
             <tr
               key={id}
-              className="odd:bg-violet-200 odd:dark:bg-violet-600 dark:bg-violet-800"
+              className="odd:bg-violet-200 dark:bg-violet-800 odd:dark:bg-violet-600"
             >
               <td className="px-1">{formatCaptures(`<${term}>`)}</td>
               <td className="border-l border-violet-400 px-1">

packages/cheatsheet/src/lib/components/CheatsheetListComponent.tsx

@@ -24,14 +24,14 @@ export default function CheatsheetListComponent({
   return (
     <div
       id={section.id}
-      className={`border ${borderClassName} rounded-lg bg-stone-100 dark:bg-stone-700 overflow-hidden`}
+      className={`border ${borderClassName} overflow-hidden rounded-lg bg-stone-100 dark:bg-stone-700`}
     >
-      <h2 className="text-xl text-center my-1">{section.name}</h2>
+      <h2 className="my-1 text-center text-xl">{section.name}</h2>
       <table className="w-full">
         <thead>
           <tr className="text bg-stone-300 dark:bg-stone-500">
-            <th className="px-1 font-normal w-1/2">Spoken form</th>
-            <th className="px-1 border-l border-stone-400 font-normal">
+            <th className="w-1/2 px-1 font-normal">Spoken form</th>
+            <th className="border-l border-stone-400 px-1 font-normal">
               Meaning
             </th>
           </tr>

packages/cheatsheet/src/lib/components/CheatsheetNotesComponent.tsx

@@ -5,9 +5,9 @@ export default function CheatsheetNotesComponent(): JSX.Element {
   return (
     <div
       id="notes"
-      className="p-2 border border-violet-300 dark:border-violet-500 rounded-lg bg-violet-100 dark:bg-violet-900 overflow-hidden"
+      className="overflow-hidden rounded-lg border border-violet-300 bg-violet-100 p-2 dark:border-violet-500 dark:bg-violet-900"
     >
-      <h2 className="text-xl text-center mb-1 text-violet-900 dark:text-violet-100">
+      <h2 className="mb-1 text-center text-xl text-violet-900 dark:text-violet-100">
         Notes
       </h2>
       <ul>

packages/cheatsheet/src/lib/components/formatCaptures.tsx

@@ -15,7 +15,7 @@ export function formatCaptures(input: string) {
     return (
       <span
         key={i}
-        className="inline-block p-[2px] rounded-md text-[#000000E3] dark:text-[#FFFFFFE3] bg-[#8686864C] dark:bg-[#FFFFFF33]"
+        className="inline-block rounded-md bg-[#8686864C] p-[2px] text-[#000000E3] dark:bg-[#FFFFFF33] dark:text-[#FFFFFFE3]"
       >
         <SmartLink to="#legend" noFormatting={true}>
           {"["}

packages/cursorless-org/src/components/Layout.tsx

@@ -8,34 +8,34 @@ import Link from "next/link";
 
 const components: MDXComponents = {
   h1: ({ children }) => (
-    <h1 className="text-center uppercase text-[1.88em] leading-tight mt-7 tracking-[0.14em] font-semibold">
+    <h1 className="mt-7 text-center text-[1.88em] font-semibold uppercase leading-tight tracking-[0.14em]">
       {children}
     </h1>
   ),
   h2: ({ children }) => (
-    <h2 className="uppercase text-[1.5em] mt-8 mb-4 sm:mb-8 leading-[1.2] font-semibold tracking-[0.08em]">
+    <h2 className="mb-4 mt-8 text-[1.5em] font-semibold uppercase leading-[1.2] tracking-[0.08em] sm:mb-8">
       {children}
     </h2>
   ),
   h3: ({ children }) => (
-    <h3 className="uppercase text-[1.25rem] mt-6 mb-3 sm:mb-6 leading-tight font-medium tracking-[0.08em]">
+    <h3 className="mb-3 mt-6 text-[1.25rem] font-medium uppercase leading-tight tracking-[0.08em] sm:mb-6">
       {children}
     </h3>
   ),
   h4: ({ children }) => (
-    <h4 className="uppercase text-[1.125rem] mt-11 mb-3 sm:mb-6 font-medium tracking-[0.08em]">
+    <h4 className="mb-3 mt-11 text-[1.125rem] font-medium uppercase tracking-[0.08em] sm:mb-6">
       {children}
     </h4>
   ),
   hr: () => <hr className="my-8 border-black dark:border-white" />,
-  ul: ({ children }) => <ul className="list-disc ml-8">{children}</ul>,
-  ol: ({ children }) => <ol className="list-decimal ml-8">{children}</ol>,
+  ul: ({ children }) => <ul className="ml-8 list-disc">{children}</ul>,
+  ol: ({ children }) => <ol className="ml-8 list-decimal">{children}</ol>,
   li: ({ children }) => <li className="my-2">{children}</li>,
   img: ({ src, alt }) => (
     // FIXME: Figure out how to use next/image with MDX
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      className="mx-auto my-12 rounded-[4px] border-teal-400 border-[1.5px]"
+      className="mx-auto my-12 rounded-[4px] border-[1.5px] border-teal-400"
       src={src}
       alt={alt}
       style={{ maxWidth: "100%" }}
@@ -45,34 +45,34 @@ const components: MDXComponents = {
     // FIXME: Figure out how to use next/image with MDX
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      className="mx-auto my-12 border-teal-400 border p-3 sm:p-6 rounded-sm"
+      className="mx-auto my-12 rounded-sm border border-teal-400 p-3 sm:p-6"
       src={src}
       alt={alt}
       style={{ maxWidth: "100%" }}
     />
   ),
   CalloutBox: ({ children }) => (
-    <div className="border-teal-400 border rounded-sm px-7 my-12 pb-6">
+    <div className="my-12 rounded-sm border border-teal-400 px-7 pb-6">
       {children}
     </div>
   ),
   Testimonials: ({ children }) => (
-    <div className="flex flex-col gap-5 mt-8">{children}</div>
+    <div className="mt-8 flex flex-col gap-5">{children}</div>
   ),
   Testimonial: ({ children, src, name, title, company }) => (
-    <div className="flex flex-col items-center bg-teal-100 dark:bg-teal-900 border border-teal-400 text-teal-700 dark:text-teal-300 p-3 sm:p-6 rounded-sm">
-      <blockquote className="mb-5 sm:mb-6 flex flex-col gap-4">
+    <div className="flex flex-col items-center rounded-sm border border-teal-400 bg-teal-100 p-3 text-teal-700 dark:bg-teal-900 dark:text-teal-300 sm:p-6">
+      <blockquote className="mb-5 flex flex-col gap-4 sm:mb-6">
         {children}
       </blockquote>
       <div className="flex items-center gap-4">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          className="rounded-full w-[4.5em] h-[4.5em] border-teal-400 border dark:border-[0.5px]"
+          className="h-[4.5em] w-[4.5em] rounded-full border border-teal-400 dark:border-[0.5px]"
           src={src}
           alt={name}
         />
         <div className="flex flex-col gap-[0.375rem]">
-          <div className="text-teal-800 dark:text-teal-200 font-semibold text-[1.2em] leading-none">
+          <div className="text-[1.2em] font-semibold leading-none text-teal-800 dark:text-teal-200">
             {name}
           </div>
           <div className="text-[0.9em] leading-none">{title}</div>
@@ -82,7 +82,7 @@ const components: MDXComponents = {
     </div>
   ),
   Tiers: ({ children }) => (
-    <div className="my-8 font-medium tracking-[0.1em] text-[1.2em]">
+    <div className="my-8 text-[1.2em] font-medium tracking-[0.1em]">
       {children}
     </div>
   ),
@@ -118,12 +118,12 @@ export function Layout({ title, description, relativeUrl, children }: Props) {
         />
       </Head>
       <MDXProvider components={components}>
-        <main className="text-salmon-900 dark:text-salmon-100 font-mono font-normal sm:dark:font-light px-4 pt-8 sm:pt-16 lg:pt-20 pb-8 tracking-[0.08em] leading-6">
-          <div className="max-w-prose mx-auto">
+        <main className="text-salmon-900 dark:text-salmon-100 px-4 pb-8 pt-8 font-mono font-normal leading-6 tracking-[0.08em] sm:pt-16 sm:dark:font-light lg:pt-20">
+          <div className="mx-auto max-w-prose">
             <Link href="/">
               <Logo
                 title="Logo"
-                className="mx-auto align-middle w-[6.284em] h-[6.284em]"
+                className="mx-auto h-[6.284em] w-[6.284em] align-middle"
               />
             </Link>
             {children}

packages/cursorless-org/src/components/SpamProofEmailLink.tsx

@@ -58,7 +58,7 @@ export function SpamProofEmailLink({
   return (
     <a
       href={href}
-      className="text-teal-600 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300 underline underline-offset-4"
+      className="text-teal-600 underline underline-offset-4 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300"
     >
       {children ?? (
         <span className="text-[18px]">

packages/cursorless-org/src/components/embedded-video.tsx

@@ -17,7 +17,7 @@ export function EmbeddedVideo({ youtubeSlug }: Props) {
     <div style={{ position: "relative", paddingTop: "56.25%" }}>
       {isError ? (
         <div
-          className={`text-red-600 text-center w-full h-full flex border border-black`}
+          className={`flex h-full w-full border border-black text-center text-red-600`}
           style={{ position: "absolute", top: 0, left: 0 }}
         >
           <div className="m-auto">Error loading YouTube video</div>