fix tailwind prettier for astro

t3-oss · Nov 24, 2022 · fb98359 · fb98359
1 parent 7fa1337
commit fb98359
Show file tree

Hide file tree

Showing 27 changed files with 138 additions and 128 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/.prettierrc.cjs b/www/.prettierrc.cjs
@@ -3,8 +3,9 @@ module.exports = {
   ...require("../.prettierrc.cjs"),
   plugins: [
     require.resolve("prettier-plugin-astro"),
-    require.resolve("prettier-plugin-tailwindcss"),
+    require.resolve("prettier-plugin-tailwindcss"), // MUST come last
   ],
+  pluginSearchDirs: false,
   overrides: [
     {
       files: "*.astro",

diff --git a/www/package.json b/www/package.json
@@ -45,7 +45,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "prettier": "^2.7.1",
     "prettier-plugin-astro": "^0.7.0",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier-plugin-tailwindcss": "0.2.0-beta.3",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-typist": "^2.0.5",

diff --git a/www/src/components/docs/avatarList.astro b/www/src/components/docs/avatarList.astro
@@ -46,7 +46,7 @@ const recentContributors = unique.slice(0, 3); // only show avatars for the 3 mo
 const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
 ---
 
-<div class="flex flex-col gap-2 items-center justify-center py-3">
+<div class="flex flex-col items-center justify-center gap-2 py-3">
   <span class="py-2">Recent Contributors To This Page</span>
   <ul class="flex gap-4">
     {

diff --git a/www/src/components/docs/pageContent.astro b/www/src/components/docs/pageContent.astro
@@ -14,12 +14,12 @@ const title = frontmatter.title;
 const [_1, _2, lang] = path.split("/");
 ---
 
-<article id="article" class="flex flex-col w-full max-w-screen-lg">
+<article id="article" class="flex w-full max-w-screen-lg flex-col">
   {lang && lang !== "en" && <OutdatedDocsBanner path={path} />}
   <section class="w-full">
     <h1
       id="overview"
-      class="mb-4 text-3xl font-extrabold dark:text-t3-purple-100 px-3"
+      class="mb-4 px-3 text-3xl font-extrabold dark:text-t3-purple-100"
     >
       <a
         href="#overview"

diff --git a/www/src/components/docs/pagination.astro b/www/src/components/docs/pagination.astro
@@ -13,9 +13,9 @@ const { next, prev } = paginate(langCode, currentPageMatch);
 ---
 
 <div
-  class="lg:px-8 px-4 pt-4 mt-16 mb-8 flex flex-row items-center justify-between text-t3-purple-800 dark:text-t3-purple-200 font-medium"
+  class="mt-16 mb-8 flex flex-row items-center justify-between px-4 pt-4 font-medium text-t3-purple-800 dark:text-t3-purple-200 lg:px-8"
 >
-  <div class="flex-1 min-w-0">
+  <div class="min-w-0 flex-1">
     {
       prev ? (
         <a
@@ -42,7 +42,7 @@ const { next, prev } = paginate(langCode, currentPageMatch);
       ) : null
     }
   </div>
-  <div class="flex-1 min-w-0 text-right">
+  <div class="min-w-0 flex-1 text-right">
     {
       next ? (
         <a

diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro
@@ -7,10 +7,10 @@ export interface Props {
 const { path, isBlog } = Astro.props;
 ---
 
-<footer class="py-12 transition-colors mt-auto flex flex-col bg-transparent">
+<footer class="mt-auto flex flex-col bg-transparent py-12 transition-colors">
   {isBlog && <AvatarList path={path} />}
-  <div class="container px-6 mx-auto divide-gray-400 divide-opacity-50 pt-6">
-    <div class="flex flex-col items-center justify-between w-full">
+  <div class="container mx-auto divide-gray-400 divide-opacity-50 px-6 pt-6">
+    <div class="flex w-full flex-col items-center justify-between">
       <div class="pb-2">
         <a
           href="https://vercel.com/?utm_source=t3-oss&utm_campaign=oss"
@@ -19,7 +19,7 @@ const { path, isBlog } = Astro.props;
         >
           <img
             src="/images/powered-by-vercel.svg"
-            class="w-full h-10 mt-6"
+            class="mt-6 h-10 w-full"
             alt="Powered by Vercel"
           />
         </a>

diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
@@ -8,26 +8,26 @@ import PageSection from "./pageSection.astro";
   size={"24"}
   id="about"
 >
-  <div class="flex flex-col gap-2 md:gap-4 max-w-[800px] xl:max-w-full mx-auto">
+  <div class="mx-auto flex max-w-[800px] flex-col gap-2 md:gap-4 xl:max-w-full">
     <h2
-      class="text-t3-purple-50 font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2"
+      class="mb-2 w-full text-3xl font-bold text-t3-purple-50 md:text-5xl lg:text-5xl"
     >
       Typesafe From The Start
     </h2>
     <p
-      class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+      class="mx-auto mt-4 max-w-3xl text-base text-t3-purple-200 md:text-xl lg:text-xl xl:text-xl"
     >
       We made create-t3-app to do one thing: Streamline the setup of typesafe
       Next.js apps WITHOUT compromising modularity.
     </p>
     <p
-      class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+      class="mx-auto mt-4 max-w-3xl text-base text-t3-purple-200 md:text-xl lg:text-xl xl:text-xl"
     >
       After countless projects and many years on this tech, we have lots of
       opinions and insights. We've done our best to encode them into this CLI.
     </p>
     <p
-      class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+      class="mx-auto mt-4 max-w-3xl text-base text-t3-purple-200 md:text-xl lg:text-xl xl:text-xl"
     >
       This is NOT an all-inclusive template. <b
         >We expect you to bring your own libraries.</b

diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
@@ -3,27 +3,27 @@ import Button from "./button.astro";
 ---
 
 <div class="py-12 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28">
-  <div class="max-w-[800px] xl:max-w-7xl mx-auto">
+  <div class="mx-auto max-w-[800px] xl:max-w-7xl">
     <div class="lg:px-8">
       <div class="flex flex-col items-center">
         <div
-          class="max-w-md px-4 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl sm:px-6 lg:px-0"
+          class="max-w-md px-4 sm:max-w-2xl sm:px-6 md:max-w-3xl lg:max-w-4xl lg:px-0 xl:max-w-5xl 2xl:max-w-6xl"
         >
-          <div class="flex flex-col gap-4 w-full items-center">
+          <div class="flex w-full flex-col items-center gap-4">
             <div class="flex flex-col items-start justify-between">
               <h1
-                class="text-4xl text-center tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] 2xl:text-[6.5rem] xl:tracking-tight"
+                class="text-center text-4xl font-bold tracking-tight text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] xl:tracking-tight 2xl:text-[6.5rem]"
               >
                 The best way to start a
                 <span class="text-[hsl(200,100%,60%)]"> full-stack,</span>
-                <span class="text-[hsl(240,100%,70%)] whitespace-nowrap">
+                <span class="whitespace-nowrap text-[hsl(240,100%,70%)]">
                   typesafe</span
                 >
                 <span class="text-[hsl(280,100%,60%)]">Next.js</span> app
               </h1>
 
               <div
-                class="flex justify-center items-center w-full gap-4 xl:mt-8 mt-4"
+                class="mt-4 flex w-full items-center justify-center gap-4 xl:mt-8"
               >
                 <Button
                   href="/en/introduction"
@@ -35,7 +35,7 @@ import Button from "./button.astro";
                 >
                   Documentation
                   <svg
-                    class="mt-0.5 h-3 ml-2 -mr-1 stroke-current stroke stroke-2"
+                    class="stroke mt-0.5 ml-2 -mr-1 h-3 stroke-current stroke-2"
                     fill="none"
                     viewBox="0 0 10 10"
                     aria-hidden="true"
@@ -58,7 +58,7 @@ import Button from "./button.astro";
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 448 512"
-                    class="h-3 ml-2 fill-white"
+                    class="ml-2 h-3 fill-white"
                   >
                     <path
                       d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"
@@ -67,10 +67,10 @@ import Button from "./button.astro";
                 </Button>
               </div>
 
-              <div class="flex flex-col w-full items-center">
-                <div class="flex mt-4 xl:mt-8 h-full relative">
+              <div class="flex w-full flex-col items-center">
+                <div class="relative mt-4 flex h-full xl:mt-8">
                   <button
-                    class="px-2 py-2 text-sm md:text-lg md:px-3 md:py-3 lg:px-5 lg:py-4 lg:text-xl rounded-md cursor-pointer bg-t3-purple-100/10 hover:bg-t3-purple-100/20 transition-colors duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50"
+                    class="relative flex cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20 md:px-3 md:py-3 md:text-lg lg:px-5 lg:py-4 lg:text-xl"
                     title="Copy the command to get started"
                     id="command"
                   >

diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro
@@ -8,21 +8,21 @@ export interface Props {}
 
 <PageSection size={"24"} bottomPadding={false} id="community">
   <div
-    class="flex flex-col items-center justify-center max-w-7xl text-t3-purple-100 mx-auto px-4 sm:px-6 lg:px-8"
+    class="mx-auto flex max-w-7xl flex-col items-center justify-center px-4 text-t3-purple-100 sm:px-6 lg:px-8"
   >
     <h3
-      class="w-full mt-2 text-3xl lg:text-5xl md:text-5xl text-left md:text-center tracking-tight font-bold text-t3-purple-50"
+      class="mt-2 w-full text-left text-3xl font-bold tracking-tight text-t3-purple-50 md:text-center md:text-5xl lg:text-5xl"
     >
       Community
     </h3>
     <p
-      class="mt-4 text-base text-left w-full md:text-center lg:text-xl md:text-xl text-t3-purple-200 mb-10 max-w-3xl"
+      class="mt-4 mb-10 w-full max-w-3xl text-left text-base text-t3-purple-200 md:text-center md:text-xl lg:text-xl"
     >
       Join our community to get help, share your projects, and even contribute
       to the project!
     </p>
     <div
-      class="flex flex-col sm:flex-row items-start justify-center space-y-4 sm:space-y-0 sm:space-x-6"
+      class="flex flex-col items-start justify-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6"
     >
       <CommunityCard
         title="Discord"

diff --git a/www/src/components/landingPage/community/communityCard.astro b/www/src/components/landingPage/community/communityCard.astro
@@ -12,12 +12,12 @@ const { text, title, href } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="rounded-lg hover:bg-t3-purple-200/20 bg-t3-purple-200/10 transition-colors cursor-pointer w-full sm:h-64 hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50"
+  class="w-full cursor-pointer rounded-lg border border-t3-purple-200/20 bg-t3-purple-200/10 transition-colors hover:border-t3-purple-300/50 hover:bg-t3-purple-200/20 hover:no-underline sm:h-64"
 >
   <div
-    class="p-4 sm:p-2 md:p-4 flex flex-col items-center justify-center space-y-3 h-full"
+    class="flex h-full flex-col items-center justify-center space-y-3 p-4 sm:p-2 md:p-4"
   >
-    <div class="w-14 h-14"><slot name="icon" /></div>
+    <div class="h-14 w-14"><slot name="icon" /></div>
     <h2 class="text-xl font-black">{title}</h2>
     <p class="text-center">
       {text}

diff --git a/www/src/components/landingPage/stack/card.astro b/www/src/components/landingPage/stack/card.astro
@@ -8,24 +8,24 @@ const { title, href } = Astro.props;
 ---
 
 <div
-  class="relative bg-white/5 rounded-md overflow-hidden flex flex-col justify-between border border-t3-purple-200/20 hover:border-t3-purple-300/50 transition-colors"
+  class="relative flex flex-col justify-between overflow-hidden rounded-md border border-t3-purple-200/20 bg-white/5 transition-colors hover:border-t3-purple-300/50"
 >
   <a
     href={href}
     target="_blank"
     rel="noopener noreferrer"
-    class="hover:no-underline active:no-underline focus:no-underline"
+    class="focus:no-underline hover:no-underline active:no-underline"
   >
     <div
-      class="flex space-x-4 items-center bg-white/10 p-2 pl-5 hover:bg-white/20 transition-colors"
+      class="flex items-center space-x-4 bg-white/10 p-2 pl-5 transition-colors hover:bg-white/20"
     >
       <slot name="icon" />
-      <p class="text-lg leading-6 md:text-xl font-medium text-t3-purple-200">
+      <p class="text-lg font-medium leading-6 text-t3-purple-200 md:text-xl">
         {title}
       </p>
     </div>
     <div
-      class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
+      class="m-6 h-full text-sm text-t3-purple-100 subpixel-antialiased md:text-base"
     >
       <slot name="description" />
     </div>

diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro
@@ -4,33 +4,33 @@ import Feature from "./card.astro";
 ---
 
 <PageSection size={"24"} id="stack">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 text-t3-purple-100">
-    <div class="md:text-center mb-10">
+  <div class="mx-auto max-w-7xl px-4 pb-12 text-t3-purple-100 sm:px-6 lg:px-8">
+    <div class="mb-10 md:text-center">
       <h2
-        class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200"
+        class="text-xl font-semibold text-t3-purple-200 md:text-2xl lg:text-2xl"
       >
         The best of the full stack TypeScript ecosystem...
       </h2>
       <h3
-        class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50"
+        class="mt-2 text-3xl font-bold tracking-tight text-t3-purple-50 md:text-5xl lg:text-5xl"
       >
         ...but ONLY the parts you need
       </h3>
-      <p class="mt-4 text-base md:text-lg text-t3-purple-200">
+      <p class="mt-4 text-base text-t3-purple-200 md:text-lg">
         Take what you want and nothing more!
       </p>
     </div>
     <div>
       <div
-        class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 md:grid-cols-3 sm:grid-rows-3 md:grid-rows-2 sm:grid-flow-col sm:gap-x-6 sm:gap-y-14 lg:gap-x-8"
+        class="space-y-10 sm:grid sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-3 sm:gap-x-6 sm:gap-y-14 sm:space-y-0 md:grid-cols-3 md:grid-rows-2 lg:gap-x-8"
       >
         <Feature title="Next.js" href="https://nextjs.org/">
           <svg
             slot="icon"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
-            class="h-10 aspect-square fill-white py-1"
+            class="aspect-square h-10 fill-white py-1"
           >
             <title>Next.js</title>
             <path
@@ -70,7 +70,7 @@ import Feature from "./card.astro";
             slot="icon"
             version="1.1"
             viewBox="0 0 512 512"
-            class="h-10 aspect-square py-1"
+            class="aspect-square h-10 py-1"
             xmlns="http://www.w3.org/2000/svg"
           >
             <title>TypeScript</title>
@@ -95,7 +95,7 @@ import Feature from "./card.astro";
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
-            class="h-10 aspect-square fill-[#06B6D4] py-1"
+            class="aspect-square h-10 fill-[#06B6D4] py-1"
           >
             <title>Tailwind CSS</title>
             <path
@@ -115,7 +115,7 @@ import Feature from "./card.astro";
             slot="icon"
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
-            class="h-10 aspect-square fill-[#398CCB] py-1"
+            class="aspect-square h-10 fill-[#398CCB] py-1"
           >
             <rect width="512" height="512" rx="150" fill="#398CCB"></rect>
             <path