chore: sort prettier classes with prettier (#169)

Sorted HTML classes using the official [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme) plugin. A CLI command has been added to format all files. --------- Co-authored-by: Robin Malfait <[email protected]>
tailwindlabs · Oct 9, 2024 · 0571354 · 0571354
1 parent e581f0e
commit 0571354
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ Every element has been normalized/reset to a simple visually consistent style th
 
 ```html
 <!-- You can actually customize padding on a select element now: -->
-<select class="px-4 py-3 rounded-full">
+<select class="rounded-full px-4 py-3">
   <!-- ... -->
 </select>
 
@@ -70,9 +70,9 @@ More customization examples and best practices coming soon.
 In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
 
 ```html
-<input type="email" class="form-input px-4 py-3 rounded-full">
+<input type="email" class="form-input rounded-full px-4 py-3" />
 
-<select class="form-select px-4 py-3 rounded-full">
+<select class="form-select rounded-full px-4 py-3">
   <!-- ... -->
 </select>
 

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,8 +7,8 @@
     <link rel="stylesheet" href="/dist/tailwind.css" />
   </head>
   <body>
-    <div class="antialiased text-gray-900 px-6">
-      <div class="max-w-xl mx-auto py-12 divide-y md:max-w-4xl">
+    <div class="px-6 text-gray-900 antialiased">
+      <div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">
         <div class="py-8">
           <h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
           <p class="mt-2 text-lg text-gray-600">
@@ -41,7 +41,7 @@ <h2 class="text-2xl font-bold">Unstyled</h2>
               </label>
               <label class="block">
                 <span class="text-gray-700">What type of event is it?</span>
-                <select class="block w-full mt-1">
+                <select class="mt-1 block w-full">
                   <option>Corporate event</option>
                   <option>Wedding</option>
                   <option>Birthday</option>
@@ -95,7 +95,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
               <label class="block">
                 <span class="text-gray-700">What type of event is it?</span>
                 <select
-                  class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                 >
                   <option>Corporate event</option>
                   <option>Wedding</option>
@@ -116,7 +116,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
                     <label class="inline-flex items-center">
                       <input
                         type="checkbox"
-                        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
+                        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"
                         checked
                       />
                       <span class="ml-2">Email me news and special offers</span>
@@ -135,29 +135,29 @@ <h2 class="text-2xl font-bold">Underline</h2>
                 <span class="text-gray-700">Full name</span>
                 <input
                   type="text"
-                  class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
+                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
                   placeholder=""
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">Email address</span>
                 <input
                   type="email"
-                  class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
+                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
                   placeholder="[email protected]"
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">When is your event?</span>
                 <input
                   type="date"
-                  class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
+                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">What type of event is it?</span>
                 <select
-                  class="block w-full mt-0 pl-0.5 pr-7 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
+                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-7 focus:border-black focus:ring-0"
                 >
                   <option>Corporate event</option>
                   <option>Wedding</option>
@@ -168,7 +168,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
               <label class="block">
                 <span class="text-gray-700">Additional details</span>
                 <textarea
-                  class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
+                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
                   rows="2"
                 ></textarea>
               </label>
@@ -178,7 +178,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
                     <label class="inline-flex items-center">
                       <input
                         type="checkbox"
-                        class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
+                        class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
                       />
                       <span class="ml-2">Email me news and special offers</span>
                     </label>
@@ -196,29 +196,29 @@ <h2 class="text-2xl font-bold">Solid</h2>
                 <span class="text-gray-700">Full name</span>
                 <input
                   type="text"
-                  class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
+                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
                   placeholder=""
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">Email address</span>
                 <input
                   type="email"
-                  class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
+                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
                   placeholder="[email protected]"
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">When is your event?</span>
                 <input
                   type="date"
-                  class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
+                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
                 />
               </label>
               <label class="block">
                 <span class="text-gray-700">What type of event is it?</span>
                 <select
-                  class="block w-full mt-1 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
+                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
                 >
                   <option>Corporate event</option>
                   <option>Wedding</option>
@@ -229,7 +229,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
               <label class="block">
                 <span class="text-gray-700">Additional details</span>
                 <textarea
-                  class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
+                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
                   rows="3"
                 ></textarea>
               </label>
@@ -239,7 +239,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
                     <label class="inline-flex items-center">
                       <input
                         type="checkbox"
-                        class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 text-gray-700 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
+                        class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"
                       />
                       <span class="ml-2">Email me news and special offers</span>
                     </label>

diff --git a/kitchen-sink.html b/kitchen-sink.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,13 +7,13 @@
     <link rel="stylesheet" href="/dist/tailwind.css" />
   </head>
   <body>
-    <div class="antialiased text-gray-900 px-6">
-      <div class="max-w-xl mx-auto py-12 md:max-w-4xl">
+    <div class="px-6 text-gray-900 antialiased">
+      <div class="mx-auto max-w-xl py-12 md:max-w-4xl">
         <h2 class="text-2xl font-bold">Reset styles</h2>
         <p class="mt-2 text-lg text-gray-500">
           These are form elements this plugin styles by default.
         </p>
-        <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+        <div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
           <div class="grid grid-cols-1 gap-6">
             <label class="block">
               <span class="text-gray-700">Input (text)</span>
@@ -98,14 +98,14 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
             </label>
             <label class="block">
               <span class="text-gray-700">Select</span>
-              <select class="form-select block w-full mt-1">
+              <select class="form-select mt-1 block w-full">
                 <option>Option 1</option>
                 <option>Option 2</option>
               </select>
             </label>
             <label class="block">
               <span class="text-gray-700">Select (single, with size)</span>
-              <select class="form-select block w-full mt-1" size="3">
+              <select class="form-select mt-1 block w-full" size="3">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
@@ -115,7 +115,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
             </label>
             <label class="block">
               <span class="text-gray-700">Select (multiple)</span>
-              <select class="form-multiselect block w-full mt-1" multiple>
+              <select class="form-multiselect mt-1 block w-full" multiple>
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
@@ -125,7 +125,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
             </label>
             <label class="block">
               <span class="text-gray-700">Select (multiple, with size)</span>
-              <select class="form-multiselect block w-full mt-1" multiple size="3">
+              <select class="form-multiselect mt-1 block w-full" multiple size="3">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
@@ -136,7 +136,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
             <label class="block">
               <span class="text-gray-700">Textarea</span>
               <textarea
-                class="form-textarea mt-1 block w-full h-24"
+                class="form-textarea mt-1 block h-24 w-full"
                 rows="3"
                 placeholder="Enter some long form content."
               ></textarea>
@@ -190,13 +190,13 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
           </div>
         </div>
       </div>
-      <div class="max-w-4xl mx-auto py-12">
+      <div class="mx-auto max-w-4xl py-12">
         <h2 class="text-2xl font-bold">Untouched</h2>
         <p class="mt-2 text-lg text-gray-500">
           These are form elements we don't handle (yet?), but we use this to make sure we haven't
           accidentally styled them by mistake.
         </p>
-        <div class="mt-8 grid grid-cols-2 gap-6 items-start">
+        <div class="mt-8 grid grid-cols-2 items-start gap-6">
           <div class="grid grid-cols-1 gap-6">
             <label class="block">
               <span class="text-gray-700">Input (range)</span>