style: format with prettier and prettier-tailwind plugin

Author: liborjelinek

.prettierrc

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

app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-screen">
+  <div class="flex h-screen flex-col">
     <!-- header, topbar -->
     <Header />
     <Topbar />

app/assets/styles/sphinx-preview.css

@@ -92,8 +92,8 @@
 
   /* // external links */
   /* a[href^="http"]::after { */
-    /* content: url("/icons/icons8-external-link-16.png"); */
-    /* display: inline-block; */
+  /* content: url("/icons/icons8-external-link-16.png"); */
+  /* display: inline-block; */
   /* } */
 
   /* ================================================================================ */
@@ -114,7 +114,7 @@
     padding: 5px;
 
     /* &::after { */
-      /* content: url(/icons/icons8-error-16.png); */
+    /* content: url(/icons/icons8-error-16.png); */
     /* } */
   }
 

app/assets/templates/sample.md

@@ -37,6 +37,6 @@ Or, literal block with syntax highlighting:
 ```javascript
 for (let i = 0; i < 3; i++) {
   // shows 0, then 1, then 2
-  alert(i)
+  alert(i);
 }
 ```

app/components/Editor.vue

@@ -14,7 +14,7 @@
   <textarea
     ref="textarea"
     v-model="previewStore.files[props.filename]"
-    class="textarea w-full min-h-full font-mono focus:outline-0 text-slate-700 dark:text-slate-300"
+    class="textarea min-h-full w-full font-mono text-slate-700 focus:outline-0 dark:text-slate-300"
     placeholder="Every journey begins with a first step"
   />
 </template>

app/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="border-t border-slate-300 py-2 px-6 flex gap-4 text-sm justify-between text-slate-500"
+    class="flex justify-between gap-4 border-t border-slate-300 px-6 py-2 text-sm text-slate-500"
   >
     <span
       >🚀 Do you want to try Sphinx as service?
@@ -15,7 +15,7 @@
       Made with <Icon name="prime:heart" /> by
       <a href="https://documatt.com" target="_blank" class="link">Documatt</a>
 
-      <div class="inline-flex gap-1.5 ml-4">
+      <div class="ml-4 inline-flex gap-1.5">
         <a href="https://www.youtube.com/@Documatt" target="_blank"
           ><Icon name="fa-brands:youtube"
         /></a>

app/components/Header.vue

@@ -1,30 +1,30 @@
 <template>
   <header
-    class="bg-[#f8fafc] dark:bg-slate-800 py-1 px-6 flex gap-20 justify-between items-center border-b border-t border-slate-300 text-slate-500 dark:text-slate-400"
+    class="flex items-center justify-between gap-20 border-t border-b border-slate-300 bg-[#f8fafc] px-6 py-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400"
   >
     <!-- Left-side logo and motto -->
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <a href="https://documatt.com">
         <NuxtImg
           src="/images/documatt-logo.svg"
           alt="Documatt logo"
           class="h-[0.7lh]"
         />
       </a>
-      <h1 class="font-bold text-sm">
+      <h1 class="text-sm font-bold">
         reStructuredText and Markdown live preview
       </h1>
     </div>
 
     <!-- Righ-side buttons -->
 
-    <div class="text-sm flex gap-2 items-center">
+    <div class="flex items-center gap-2 text-sm">
       <!-- More functions? Try Documatt -->
 
       More functions?
       <a href="https://documatt.com" target="_blank">
         <button
-          class="btn btn-outline border-accent text-gray-100 hover:bg-primary hover:text-slate-200 bg-accent"
+          class="btn btn-outline border-accent hover:bg-primary bg-accent text-gray-100 hover:text-slate-200"
         >
           Try Documatt
           <Icon name="prime:arrow-right" />

app/components/Preview/RenderTab.vue

@@ -3,7 +3,7 @@
   <PreviewState />
 
   <!-- Preview -->
-  <div class="overflow-auto h-full" title="HTML preview of markup">
+  <div class="h-full overflow-auto" title="HTML preview of markup">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="sphinx-preview pointer-events-none" v-html="sanitizedHtml" />
   </div>

app/components/Preview/SourceTab.vue

@@ -3,7 +3,7 @@ const props = defineProps<{ source: string | undefined }>();
 </script>
 
 <template>
-  <div class="font-mono overflow-auto h-full whitespace-pre-wrap">
+  <div class="h-full overflow-auto font-mono whitespace-pre-wrap">
     {{ props.source }}
   </div>
 </template>

app/components/Preview/State.vue

@@ -2,7 +2,7 @@
   <div
     v-if="previewStore.state == PreviewStates.Booting"
     role="alert"
-    class="alert alert-outline alert-info mb-4 text-secondary"
+    class="alert alert-outline alert-info text-secondary mb-4"
   >
     <span class="loading loading-spinner loading-xs"></span>
     <span>Sphinx in your browser is starting. Please wait.</span>