Add "prettier-plugin-tailwindcss"

This replaces "eslint-plugin-tailwindcss"
templatus · Jan 25, 2022 · 10b0900 · 10b0900
1 parent 2ebe874
commit 10b0900
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 110 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
     jest: true,
     node: true,
   },
-  plugins: ['tailwindcss'],
+  plugins: [],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -16,7 +16,6 @@ module.exports = {
     'plugin:vue/vue3-strongly-recommended',
     'prettier',
     'plugin:prettier/recommended',
-    'plugin:tailwindcss/recommended',
   ],
   globals: {
     defineProps: 'readonly',
@@ -36,7 +35,6 @@ module.exports = {
     'vue/script-setup-uses-vars': 'error',
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'tailwindcss/no-custom-classname': 'off',
   },
   parserOptions: {
     parser: '@typescript-eslint/parser', // the typescript-parser for eslint, instead of tslint

diff --git a/app/javascript/src/App.vue b/app/javascript/src/App.vue
@@ -6,20 +6,20 @@ import AppFooter from '@/components/AppFooter.vue';
 
 <template>
   <div
-    class="flex flex-col min-h-screen bg-gradient-to-br from-rails-dark to-rails-light lg:bg-rose lg:from-inherit lg:to-inherit"
+    class="flex min-h-screen flex-col bg-gradient-to-br from-rails-dark to-rails-light lg:bg-rose lg:from-inherit lg:to-inherit"
   >
     <app-background />
 
     <app-header class="lg:fixed lg:top-10 lg:left-10" />
 
     <main
-      class="relative flex-1 py-5 px-4 bg-white shadow-md sm:px-6 lg:px-8 lg:mt-10 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:rounded-xl"
+      class="relative flex-1 bg-white py-5 px-4 shadow-md sm:px-6 lg:mt-10 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:rounded-xl lg:px-8"
     >
       <router-view />
     </main>
 
     <app-footer
-      class="relative mt-2 mb-6 lg:px-0 lg:mr-16 lg:ml-96 lg:max-w-5xl"
+      class="relative mt-2 mb-6 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:px-0"
     />
   </div>
 </template>
diff --git a/app/javascript/src/components/AppBackground.vue b/app/javascript/src/components/AppBackground.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="hidden fixed inset-0 w-full h-96 drop-shadow-xl lg:block"
+    class="fixed inset-0 hidden h-96 w-full drop-shadow-xl lg:block"
     fill="none"
     preserveAspectRatio="none"
     viewBox="0 0 100 100"
@@ -17,7 +17,7 @@
   </svg>
 
   <svg
-    class="hidden fixed bottom-0 w-full h-96 drop-shadow-xl lg:block"
+    class="fixed bottom-0 hidden h-96 w-full drop-shadow-xl lg:block"
     fill="none"
     preserveAspectRatio="none"
     viewBox="0 0 100 100"

diff --git a/app/javascript/src/components/AppFooter.vue b/app/javascript/src/components/AppFooter.vue
@@ -16,16 +16,16 @@ const { online } = useOnlineOffline();
 
 <template>
   <footer
-    class="flex flex-wrap justify-between items-end px-4 space-y-2 text-sm text-white sm:px-6 lg:px-0"
+    class="flex flex-wrap items-end justify-between space-y-2 px-4 text-sm text-white sm:px-6 lg:px-0"
   >
-    <div class="flex items-end space-x-2 w-full sm:w-auto">
+    <div class="flex w-full items-end space-x-2 sm:w-auto">
       <a
         class="hover:underline"
         target="_blank"
         rel="noopener noreferrer"
         href="https://github.com/ledermann/templatus"
       >
-        <svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor">
+        <svg viewBox="0 0 24 24" class="h-6 w-6" fill="currentColor">
           <title>GitHub</title>
           <path
             d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
@@ -43,19 +43,19 @@ const { online } = useOnlineOffline();
     <div class="w-full sm:w-auto">
       <span
         v-if="!online"
-        class="py-px px-1 font-bold tracking-wide text-red-700 uppercase bg-white rounded"
+        class="rounded bg-white py-px px-1 font-bold uppercase tracking-wide text-red-700"
         >You are offline</span
       >
     </div>
 
-    <div class="flex items-end w-full sm:w-auto">
+    <div class="flex w-full items-end sm:w-auto">
       <a
         class="hover:underline"
         target="_blank"
         rel="noopener noreferrer"
         href="https://ledermann.dev"
       >
-        <svg class="inline w-6 h-6" viewBox="0 0 276 276" fill="currentColor">
+        <svg class="inline h-6 w-6" viewBox="0 0 276 276" fill="currentColor">
           <title>ledermann.dev</title>
           <path
             d="M0 137l138 138 138-138-84-82-84 82 31 30 53-52 25 22-79 77-78-77L166 29 138 1"

diff --git a/app/javascript/src/components/AppHeader.vue b/app/javascript/src/components/AppHeader.vue
@@ -12,29 +12,29 @@ const tabs: {
 
 <template>
   <header
-    class="flex justify-between items-end p-5 space-x-5 lg:flex-col lg:items-stretch lg:p-0 lg:space-y-36 lg:space-x-0"
+    class="flex items-end justify-between space-x-5 p-5 lg:flex-col lg:items-stretch lg:space-y-36 lg:space-x-0 lg:p-0"
   >
     <img
       src="/images/logo.svg"
       alt="Logo"
-      class="p-3 w-20 h-20 bg-gradient-to-br from-slate-200 to-white rounded lg:w-56 lg:h-56"
+      class="h-20 w-20 rounded bg-gradient-to-br from-slate-200 to-white p-3 lg:h-56 lg:w-56"
       width="150"
       height="150"
     />
 
     <TabGroup>
       <TabList
-        class="flex space-x-5 text-lg font-medium text-center uppercase lg:flex-col lg:space-y-5 lg:space-x-0"
+        class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"
         as="nav"
       >
         <Tab v-for="tab in tabs" :key="tab.name" as="template">
           <router-link
             :to="tab.href"
             :class="[
               tab.href == $route.path
-                ? 'text-rails-dark bg-white lg:bg-rails-dark lg:text-white'
-                : 'hover:bg-slate-300 hover:text-rails-dark bg-transparent text-white lg:text-rails-dark lg:bg-white',
-              'px-2 py-1 rounded-md lg:shadow',
+                ? 'bg-white text-rails-dark lg:bg-rails-dark lg:text-white'
+                : 'bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark',
+              'rounded-md px-2 py-1 lg:shadow',
             ]"
           >
             {{ tab.name }}

diff --git a/app/javascript/src/components/ClickButton.vue b/app/javascript/src/components/ClickButton.vue
@@ -35,18 +35,18 @@ defineProps({
         </transition>
         <div class="py-1 uppercase">Clicks</div>
       </template>
-      <LoadingAnimation v-else class="w-full h-20"></LoadingAnimation>
+      <LoadingAnimation v-else class="h-20 w-full"></LoadingAnimation>
     </div>
 
     <button
       type="button"
-      class="py-2 mt-3 w-full font-medium text-black hover:text-white bg-rose hover:bg-rails-light rounded active:outline-none active:ring-2 active:ring-rails-light active:ring-offset-1"
+      class="mt-3 w-full rounded bg-rose py-2 font-medium text-black hover:bg-rails-light hover:text-white active:outline-none active:ring-2 active:ring-rails-light active:ring-offset-1"
       @click="store.sendClick()"
     >
       Click me!
     </button>
 
-    <p class="hidden mt-3 text-xs text-center text-gray-600 sm:block">
+    <p class="mt-3 hidden text-center text-xs text-gray-600 sm:block">
       Tip: Open two browser windows in parallel and see what happens.
     </p>
   </div>

diff --git a/app/javascript/src/components/ClickList.vue b/app/javascript/src/components/ClickList.vue
@@ -24,16 +24,16 @@ defineProps({
   >
     <li v-for="click in clicks" :key="click.id" class="py-4">
       <p>
-        <span class="py-1 px-2 font-mono text-rose bg-gray-900 rounded">
+        <span class="rounded bg-gray-900 py-1 px-2 font-mono text-rose">
           {{ click.ip }}
         </span>
 
-        <span class="px-1 ml-2 font-medium text-gray-900">
+        <span class="ml-2 px-1 font-medium text-gray-900">
           {{ new Date(Date.parse(click.created_at)).toUTCString() }}
         </span>
       </p>
 
-      <code class="block mt-4 font-extralight text-gray-500">
+      <code class="mt-4 block font-extralight text-gray-500">
         {{ click.user_agent }}
       </code>
     </li>

diff --git a/app/javascript/src/components/PageTitle.vue b/app/javascript/src/components/PageTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <h1
-    class="text-4xl font-extrabold tracking-tight text-rails-dark break-words sm:text-5xl lg:text-6xl"
+    class="break-words text-4xl font-extrabold tracking-tight text-rails-dark sm:text-5xl lg:text-6xl"
   >
     <slot></slot>
   </h1>

diff --git a/app/javascript/src/pages/About.vue b/app/javascript/src/pages/About.vue
@@ -190,7 +190,7 @@ const features: {
       <div class="lg:grid lg:grid-cols-3 lg:gap-x-8">
         <div>
           <h2
-            class="text-base font-semibold tracking-wide text-rails-dark uppercase"
+            class="text-base font-semibold uppercase tracking-wide text-rails-dark"
           >
             {{ group.slogan }}
           </h2>
@@ -209,11 +209,11 @@ const features: {
             >
               <dt>
                 <CheckIcon
-                  class="absolute w-6 h-6 text-vue"
+                  class="absolute h-6 w-6 text-vue"
                   aria-hidden="true"
                 />
                 <p
-                  class="flex items-center ml-9 text-lg font-medium leading-6 text-rails-dark"
+                  class="ml-9 flex items-center text-lg font-medium leading-6 text-rails-dark"
                 >
                   <a
                     :href="feature.href"
@@ -226,7 +226,7 @@ const features: {
 
                   <span
                     v-if="feature.version"
-                    class="inline-flex items-center py-0.5 px-2.5 ml-2 text-xs font-medium text-black bg-rose rounded-full"
+                    class="ml-2 inline-flex items-center rounded-full bg-rose py-0.5 px-2.5 text-xs font-medium text-black"
                   >
                     {{ feature.version }}
                   </span>

diff --git a/app/javascript/src/pages/Home.vue b/app/javascript/src/pages/Home.vue
@@ -34,14 +34,14 @@ onBeforeUnmount(() => {
   </div>
 
   <click-button
-    class="mt-5 w-full lg:absolute lg:-top-5 lg:-right-10 lg:p-3 lg:mt-0 lg:w-56 lg:bg-gradient-to-br lg:from-slate-100 lg:to-white lg:rounded lg:shadow"
+    class="mt-5 w-full lg:absolute lg:-top-5 lg:-right-10 lg:mt-0 lg:w-56 lg:rounded lg:bg-gradient-to-br lg:from-slate-100 lg:to-white lg:p-3 lg:shadow"
     :count="store.total"
     :enabled="store.loaded"
   ></click-button>
 
   <template v-if="store.items.length">
     <h2
-      class="mt-20 text-xl font-medium tracking-wide text-center text-rails-dark uppercase sm:text-left"
+      class="mt-20 text-center text-xl font-medium uppercase tracking-wide text-rails-dark sm:text-left"
     >
       Latest clicks
     </h2>

diff --git a/app/javascript/src/pages/NotFound.vue b/app/javascript/src/pages/NotFound.vue
@@ -5,7 +5,7 @@ import PageTitle from '@/components/PageTitle.vue';
 <template>
   <page-title>Error 404</page-title>
 
-  <div class="inline-block p-5 mt-6 mb-20 text-3xl bg-yellow-200 rounded">
+  <div class="mt-6 mb-20 inline-block rounded bg-yellow-200 p-5 text-3xl">
     <p>Page not found</p>
   </div>
 </template>
diff --git a/package.json b/package.json
@@ -49,12 +49,12 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-tailwindcss": "^3.3.2",
     "eslint-plugin-vue": "^8.3.0",
     "jest": "^27.4.7",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.3",
     "ts-jest": "^27.1.3",
     "vue-tsc": "^0.31.1"
   },

diff --git a/spec/javascript/src/__snapshots__/App.test.ts.snap b/spec/javascript/src/__snapshots__/App.test.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App matches snapshot 1`] = `
-<div class="flex flex-col min-h-screen bg-gradient-to-br from-rails-dark to-rails-light lg:bg-rose lg:from-inherit lg:to-inherit"><svg class="hidden fixed inset-0 w-full h-96 drop-shadow-xl lg:block" fill="none" preserveAspectRatio="none" viewBox="0 0 100 100">
+<div class="flex min-h-screen flex-col bg-gradient-to-br from-rails-dark to-rails-light lg:bg-rose lg:from-inherit lg:to-inherit"><svg class="fixed inset-0 hidden h-96 w-full drop-shadow-xl lg:block" fill="none" preserveAspectRatio="none" viewBox="0 0 100 100">
     <defs>
       <linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="0">
         <stop offset="0%" class="gradient__rails-dark"></stop>
@@ -10,7 +10,7 @@ exports[`App matches snapshot 1`] = `
       </linearGradient>
     </defs>
     <polygon fill="url(#grad1)" points="0,0 0,100 100,40 100,0"></polygon>
-  </svg><svg class="hidden fixed bottom-0 w-full h-96 drop-shadow-xl lg:block" fill="none" preserveAspectRatio="none" viewBox="0 0 100 100">
+  </svg><svg class="fixed bottom-0 hidden h-96 w-full drop-shadow-xl lg:block" fill="none" preserveAspectRatio="none" viewBox="0 0 100 100">
     <defs>
       <linearGradient id="grad2" x1="0" y1="0" x2="100%" y2="0">
         <stop offset="0%" class="gradient__rails-dark"></stop>
@@ -20,12 +20,12 @@ exports[`App matches snapshot 1`] = `
     </defs>
     <polygon fill="url(#grad2)" points="0,80 0,100 100,100 100,50"></polygon>
   </svg>
-  <header class="flex justify-between items-end p-5 space-x-5 lg:flex-col lg:items-stretch lg:p-0 lg:space-y-36 lg:space-x-0 lg:fixed lg:top-10 lg:left-10"><img src="/images/logo.svg" alt="Logo" class="p-3 w-20 h-20 bg-gradient-to-br from-slate-200 to-white rounded lg:w-56 lg:h-56" width="150" height="150">
-    <nav role="tablist" aria-orientation="horizontal" class="flex space-x-5 text-lg font-medium text-center uppercase lg:flex-col lg:space-y-5 lg:space-x-0"><a href="/" class="router-link-active router-link-exact-active text-rails-dark bg-white lg:bg-rails-dark lg:text-white px-2 py-1 rounded-md lg:shadow" id="headlessui-tabs-tab-1" role="tab" aria-selected="true" tabindex="0" aria-current="page">Home</a><a href="/about" class="hover:bg-slate-300 hover:text-rails-dark bg-transparent text-white lg:text-rails-dark lg:bg-white px-2 py-1 rounded-md lg:shadow" id="headlessui-tabs-tab-2" role="tab" aria-selected="false" tabindex="-1">About</a></nav>
+  <header class="flex items-end justify-between space-x-5 p-5 lg:flex-col lg:items-stretch lg:space-y-36 lg:space-x-0 lg:p-0 lg:fixed lg:top-10 lg:left-10"><img src="/images/logo.svg" alt="Logo" class="h-20 w-20 rounded bg-gradient-to-br from-slate-200 to-white p-3 lg:h-56 lg:w-56" width="150" height="150">
+    <nav role="tablist" aria-orientation="horizontal" class="flex space-x-5 text-center text-lg font-medium uppercase lg:flex-col lg:space-y-5 lg:space-x-0"><a href="/" class="router-link-active router-link-exact-active bg-white text-rails-dark lg:bg-rails-dark lg:text-white rounded-md px-2 py-1 lg:shadow" id="headlessui-tabs-tab-1" role="tab" aria-selected="true" tabindex="0" aria-current="page">Home</a><a href="/about" class="bg-transparent text-white hover:bg-slate-300 hover:text-rails-dark lg:bg-white lg:text-rails-dark rounded-md px-2 py-1 lg:shadow" id="headlessui-tabs-tab-2" role="tab" aria-selected="false" tabindex="-1">About</a></nav>
   </header>
-  <main class="relative flex-1 py-5 px-4 bg-white shadow-md sm:px-6 lg:px-8 lg:mt-10 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:rounded-xl">Home page</main>
-  <footer class="flex flex-wrap justify-between items-end px-4 space-y-2 text-sm text-white sm:px-6 lg:px-0 relative mt-2 mb-6 lg:px-0 lg:mr-16 lg:ml-96 lg:max-w-5xl">
-    <div class="flex items-end space-x-2 w-full sm:w-auto"><a class="hover:underline" target="_blank" rel="noopener noreferrer" href="https://github.com/ledermann/templatus"><svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor">
+  <main class="relative flex-1 bg-white py-5 px-4 shadow-md sm:px-6 lg:mt-10 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:rounded-xl lg:px-8">Home page</main>
+  <footer class="flex flex-wrap items-end justify-between space-y-2 px-4 text-sm text-white sm:px-6 lg:px-0 relative mt-2 mb-6 lg:mr-16 lg:ml-96 lg:max-w-5xl lg:px-0">
+    <div class="flex w-full items-end space-x-2 sm:w-auto"><a class="hover:underline" target="_blank" rel="noopener noreferrer" href="https://github.com/ledermann/templatus"><svg viewBox="0 0 24 24" class="h-6 w-6" fill="currentColor">
           <title>GitHub</title>
           <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
         </svg></a>
@@ -34,7 +34,7 @@ exports[`App matches snapshot 1`] = `
     <div class="w-full sm:w-auto">
       <!--v-if-->
     </div>
-    <div class="flex items-end w-full sm:w-auto"><a class="hover:underline" target="_blank" rel="noopener noreferrer" href="https://ledermann.dev"><svg class="inline w-6 h-6" viewBox="0 0 276 276" fill="currentColor">
+    <div class="flex w-full items-end sm:w-auto"><a class="hover:underline" target="_blank" rel="noopener noreferrer" href="https://ledermann.dev"><svg class="inline h-6 w-6" viewBox="0 0 276 276" fill="currentColor">
           <title>ledermann.dev</title>
           <path d="M0 137l138 138 138-138-84-82-84 82 31 30 53-52 25 22-79 77-78-77L166 29 138 1"></path>
         </svg><span class="ml-1 font-mono">ledermann.dev</span></a></div>