fix: tailwindcss class order

pages/arrow-flow-generator/index.tsx

@@ -355,14 +355,14 @@ const ArrowFlowGenerator: NextPage = () => {
         <div>
           <div className="my-3">
             <button
-              className="mx-1 items-center rounded-sm border border-gray-400 bg-white py-2 px-4 text-gray-800 hover:bg-gray-100"
+              className="mx-1 items-center rounded-sm border border-gray-400 bg-white px-4 py-2 text-gray-800 hover:bg-gray-100"
               onClick={handleAddButtonClick}
             >
               +Add Item
             </button>
 
             <button
-              className="mx-1 items-center rounded-sm border border-gray-400 bg-white py-2 px-4 text-gray-800 hover:bg-gray-100"
+              className="mx-1 items-center rounded-sm border border-gray-400 bg-white px-4 py-2 text-gray-800 hover:bg-gray-100"
               onClick={handleDownload}
             >
               Download

pages/kusa/index.tsx

@@ -38,7 +38,7 @@ const KusaIndex: NextPage = () => {
               placeholder="GitHub UserID"
             />
             <button
-              className="mx-1 items-center rounded-sm border border-gray-400 bg-white py-2 px-4 text-gray-800 hover:bg-gray-100"
+              className="mx-1 items-center rounded-sm border border-gray-400 bg-white px-4 py-2 text-gray-800 hover:bg-gray-100"
               onClick={handleClick}
             >
               View

pages/timeline/index.tsx

@@ -187,7 +187,7 @@ const Schedule: NextPage = () => {
             </tbody>
           </table>
           <button
-            className="sticky left-0 mx-1 flex items-center rounded border border-gray-400 bg-white py-2 px-4 font-semibold text-gray-800 shadow hover:bg-gray-100"
+            className="sticky left-0 mx-1 flex items-center rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
             onClick={addItem}
           >
             +

pages/timer/index.tsx

@@ -263,14 +263,14 @@ const Timer: NextPage = () => {
               </div>
               <div className="flex flex-row p-1">
                 <button
-                  className="mx-1 flex items-center rounded border border-gray-400 bg-white py-2 px-4 font-semibold text-gray-800 shadow hover:bg-gray-100"
+                  className="mx-1 flex items-center rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                   onClick={startTimer}
                 >
                   <PlayIcon />
                   Start
                 </button>
                 <button
-                  className="mx-1 flex items-center rounded border border-gray-400 bg-white py-2 px-4 font-semibold text-gray-800 shadow hover:bg-gray-100"
+                  className="mx-1 flex items-center rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                   onClick={pauseTimer}
                 >
                   {paused ? (
@@ -286,7 +286,7 @@ const Timer: NextPage = () => {
                   )}
                 </button>
                 <button
-                  className="mx-1 flex items-center rounded border border-gray-400 bg-white py-2 px-4 font-semibold text-gray-800 shadow hover:bg-gray-100"
+                  className="mx-1 flex items-center rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                   onClick={resetTimer}
                 >
                   <StopIcon />
@@ -295,7 +295,7 @@ const Timer: NextPage = () => {
               </div>
               <div className="p-1">
                 <button
-                  className="mx-1 flex items-center rounded border border-gray-400 bg-white py-2 px-4 font-semibold text-gray-800 shadow hover:bg-gray-100"
+                  className="mx-1 flex items-center rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                   onClick={createVideo}
                 >
                   <DuplicateIcon />

src/components/kusa/contributions/contributions-simple.tsx

@@ -172,7 +172,7 @@ const ContributionsSimple = (props: Props) => {
       <div className="flex justify-start sm:justify-end">
         <button
           onClick={handleSummaryOpen}
-          className="basis-full rounded border border-gray-400 bg-white py-1 px-2 font-semibold text-gray-800 shadow hover:bg-gray-100 sm:basis-1/2"
+          className="basis-full rounded border border-gray-400 bg-white px-2 py-1 font-semibold text-gray-800 shadow hover:bg-gray-100 sm:basis-1/2"
         >
           {open ? 'Fold up' : 'Open'} All Details
         </button>

src/components/kusa/contributions/contributions.tsx

@@ -66,13 +66,13 @@ const Contributions = (props: Props) => {
           return (
             <div key={tab.name}>
               {selectedTab == tab.name ? (
-                <button className="border-b-2 border-blue-500 py-4 px-6 font-medium text-blue-500 hover:text-blue-500 focus:outline-none">
+                <button className="border-b-2 border-blue-500 px-6 py-4 font-medium text-blue-500 hover:text-blue-500 focus:outline-none">
                   {tab.displayName}
                 </button>
               ) : (
                 <button
                   onClick={() => setSelectedTab(tab.name)}
-                  className="py-4 px-6 text-gray-600 hover:text-blue-500 focus:outline-none"
+                  className="px-6 py-4 text-gray-600 hover:text-blue-500 focus:outline-none"
                 >
                   {tab.displayName}
                 </button>