fix(web): linter

apps/web/components/article-with-image-as-background/tailwind.tsx

@@ -30,13 +30,13 @@ export const component = (
           <Heading as="h1" className="m-0 mt-[4px] font-bold text-white">
             Artful Accents
           </Heading>
-          <Text className="m-0 mt-[8px] text-[16px] leading-[24px] text-white">
+          <Text className="m-0 mt-[8px] text-[16px] text-white leading-[24px]">
             Uncover the power of accent furniture in transforming your space
             with subtle touches of style, personality, and functionality, as we
             explore the art of curating captivating accents.
           </Text>
           <Button
-            className="mt-[24px] rounded-[8px] border border-solid border-gray-200 bg-white px-[40px] py-[12px] font-semibold text-gray-900"
+            className="mt-[24px] rounded-[8px] border border-gray-200 border-solid bg-white px-[40px] py-[12px] font-semibold text-gray-900"
             href="https://react.email"
           >
             Read more

apps/web/components/article-with-image-on-right/tailwind.tsx

@@ -5,13 +5,13 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Section className="my-[16px] text-center">
     <Section className="inline-block w-full max-w-[250px] text-left align-top">
-      <Text className="m-0 text-[16px] font-semibold leading-[24px] text-indigo-600">
+      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
         What's new
       </Text>
-      <Text className="m-0 mt-[8px] text-[20px] font-semibold leading-[28px] text-gray-900">
+      <Text className="m-0 mt-[8px] font-semibold text-[20px] text-gray-900 leading-[28px]">
         Versatile Comfort
       </Text>
-      <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
         Experience ultimate comfort and versatility with our furniture
         collection, designed to adapt to your ever-changing needs.
       </Text>

apps/web/components/article-with-image/tailwind.tsx

@@ -10,16 +10,16 @@ export const component = (
       src="/static/herman-miller-chair.jpg"
     />
     <Section className="mt-[32px] text-center">
-      <Text className="my-[16px] text-[18px] font-semibold leading-[28px] text-indigo-600">
+      <Text className="my-[16px] font-semibold text-[18px] text-indigo-600 leading-[28px]">
         Our new article
       </Text>
       <Heading
         as="h1"
-        className="m-0 mt-[8px] text-[36px] font-semibold leading-[36px] text-gray-900"
+        className="m-0 mt-[8px] font-semibold text-[36px] text-gray-900 leading-[36px]"
       >
         Designing with Furniture
       </Heading>
-      <Text className="text-[16px] leading-[24px] text-gray-500">
+      <Text className="text-[16px] text-gray-500 leading-[24px]">
         Unleash your inner designer as we explore how furniture plays a vital
         role in creating stunning interiors, offering insights into choosing the
         right pieces, arranging them harmoniously, and infusing your space with

apps/web/components/article-with-multiple-authors/tailwind.tsx

@@ -11,7 +11,7 @@ import { Layout } from '../_components/layout';
 
 export const component = (
   <Row>
-    <Hr className="mb-[0px] mt-[16px] !border-gray-300" />
+    <Hr className="!border-gray-300 mt-[16px] mb-[0px]" />
     <Section>
       {[
         {
@@ -41,11 +41,11 @@ export const component = (
             <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
               <Heading
                 as="h3"
-                className="m-0 text-[14px] font-medium leading-[20px] text-gray-900"
+                className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
               >
                 {author.name}
               </Heading>
-              <Text className="m-0 text-[12px] font-medium leading-[14px] text-gray-500">
+              <Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
                 {author.title}
               </Text>
               <Section className="mt-[4px]">

apps/web/components/article-with-single-author/tailwind.tsx

@@ -11,7 +11,7 @@ import { Layout } from '../_components/layout';
 
 export const component = (
   <Row>
-    <Hr className="my-[16px] !border-gray-300" />
+    <Hr className="!border-gray-300 my-[16px]" />
     <Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
       <Img
         alt="Steve Jobs"
@@ -24,11 +24,11 @@ export const component = (
     <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
       <Heading
         as="h3"
-        className="m-[0px] text-[14px] font-medium leading-[20px] text-gray-800"
+        className="m-[0px] font-medium text-[14px] text-gray-800 leading-[20px]"
       >
         Steve Jobs
       </Heading>
-      <Text className="m-[0px] text-[12px] font-medium leading-[14px] text-gray-500">
+      <Text className="m-[0px] font-medium text-[12px] text-gray-500 leading-[14px]">
         Co-Founder & CEO
       </Text>
       <Section className="mt-[4px]">

apps/web/components/article-with-two-cards/tailwind.tsx

@@ -5,10 +5,10 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Section className="my-[16px]">
     <Row>
-      <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+      <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
         Elevate Outdoor Living
       </Text>
-      <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
         Take your outdoor space to new heights with our premium outdoor
         furniture, designed to elevate your alfresco experience.
       </Text>
@@ -24,13 +24,13 @@ export const component = (
           height="180"
           src="/static/outdoor-living.jpg"
         />
-        <Text className="text-[16px] font-semibold leading-[24px] text-indigo-600">
+        <Text className="font-semibold text-[16px] text-indigo-600 leading-[24px]">
           What's new
         </Text>
-        <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+        <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
           Multifunctional Marvels
         </Text>
-        <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
           Discover the innovative world of multifunctional furniture, where
           style meets practicality, offering creative solutions for maximizing
           space and enhancing functionality in your home
@@ -46,13 +46,13 @@ export const component = (
           height="180"
           src="/static/outdoor-living.jpg"
         />
-        <Text className="text-[16px] font-semibold leading-[24px] text-indigo-600">
+        <Text className="font-semibold text-[16px] text-indigo-600 leading-[24px]">
           What's new
         </Text>
-        <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+        <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
           Timeless Classics
         </Text>
-        <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
           Step into the world of timeless classics as we explore iconic
           furniture pieces that have stood the test of time, adding enduring
           elegance and sophistication to any interior

apps/web/components/checkout/tailwind.tsx

@@ -11,37 +11,37 @@ import { Layout } from '../_components/layout';
 
 export const component = (
   <Section className="py-[16px] text-center">
-    <Heading as="h1" className="mb-0 text-[30px] font-semibold leading-[36px]">
+    <Heading as="h1" className="mb-0 font-semibold text-[30px] leading-[36px]">
       You left something in your cart
     </Heading>
-    <Section className="my-[16px] rounded-[8px] border border-solid border-gray-200 p-[16px] pt-0">
+    <Section className="my-[16px] rounded-[8px] border border-gray-200 border-solid p-[16px] pt-0">
       <table className="mb-[16px]" width="100%">
         <tr>
-          <th className="border-0 border-b border-solid border-gray-200 py-[8px]">
+          <th className="border-0 border-gray-200 border-b border-solid py-[8px]">
             &nbsp;
           </th>
           <th
             align="left"
-            className="border-0 border-b border-solid border-gray-200 py-[8px] text-gray-500"
+            className="border-0 border-gray-200 border-b border-solid py-[8px] text-gray-500"
             colSpan={6}
           >
             <Text className="font-semibold">Product</Text>
           </th>
           <th
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px] text-gray-500"
+            className="border-0 border-gray-200 border-b border-solid py-[8px] text-gray-500"
           >
             <Text className="font-semibold">Quantity</Text>
           </th>
           <th
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px] text-gray-500"
+            className="border-0 border-gray-200 border-b border-solid py-[8px] text-gray-500"
           >
             <Text className="font-semibold">Price</Text>
           </th>
         </tr>
         <tr>
-          <td className="border-0 border-b border-solid border-gray-200 py-[8px]">
+          <td className="border-0 border-gray-200 border-b border-solid py-[8px]">
             <Img
               alt="Braun Classic Watch"
               className="rounded-[8px] object-cover"
@@ -51,26 +51,26 @@ export const component = (
           </td>
           <td
             align="left"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
             colSpan={6}
           >
             <Text>Classic Watch</Text>
           </td>
           <td
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
           >
             <Text>1</Text>
           </td>
           <td
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
           >
             <Text>$210.00</Text>
           </td>
         </tr>
         <tr>
-          <td className="border-0 border-b border-solid border-gray-200 py-[8px]">
+          <td className="border-0 border-gray-200 border-b border-solid py-[8px]">
             <Img
               alt="Braun Analogue Clock"
               className="rounded-[8px] object-cover"
@@ -80,20 +80,20 @@ export const component = (
           </td>
           <td
             align="left"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
             colSpan={6}
           >
             <Text>Analogue Clock</Text>
           </td>
           <td
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
           >
             <Text>1</Text>
           </td>
           <td
             align="center"
-            className="border-0 border-b border-solid border-gray-200 py-[8px]"
+            className="border-0 border-gray-200 border-b border-solid py-[8px]"
           >
             <Text>$40.00</Text>
           </td>

apps/web/components/download-buttons/tailwind.tsx

@@ -5,7 +5,7 @@ export const component = (
   <Row>
     <Column align="center">
       <Row>
-        <Text className="text-[18px] font-bold leading-[28px] text-indigo-500">
+        <Text className="font-bold text-[18px] text-indigo-500 leading-[28px]">
           Try now
         </Text>
         <Text className="text-gray-900">

apps/web/components/footer-with-one-column/tailwind.tsx

@@ -15,10 +15,10 @@ export const component = (
       </tr>
       <tr className="w-full">
         <td align="center">
-          <Text className="my-[8px] text-[16px] font-semibold leading-[24px] text-gray-900">
+          <Text className="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]">
             Acme corporation
           </Text>
-          <Text className="mb-0 mt-[4px] text-[16px] leading-[24px] text-gray-500">
+          <Text className="mt-[4px] mb-0 text-[16px] text-gray-500 leading-[24px]">
             Think different
           </Text>
         </td>
@@ -56,10 +56,10 @@ export const component = (
       </tr>
       <tr>
         <td align="center">
-          <Text className="my-[8px] text-[16px] font-semibold leading-[24px] text-gray-500">
+          <Text className="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]">
             123 Main Street Anytown, CA 12345
           </Text>
-          <Text className="mb-0 mt-[4px] text-[16px] font-semibold leading-[24px] text-gray-500">
+          <Text className="mt-[4px] mb-0 font-semibold text-[16px] text-gray-500 leading-[24px]">
             [email protected] +123456789
           </Text>
         </td>

apps/web/components/footer-with-two-columns/tailwind.tsx

@@ -10,10 +10,10 @@ export const component = (
           height="42"
           src="/static/logo-without-background.png"
         />
-        <Text className="my-[8px] text-[16px] font-semibold leading-[24px] text-gray-900">
+        <Text className="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]">
           Acme corporation
         </Text>
-        <Text className="mb-[0px] mt-[4px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[4px] mb-[0px] text-[16px] text-gray-500 leading-[24px]">
           Think different
         </Text>
       </Column>
@@ -46,10 +46,10 @@ export const component = (
           </Column>
         </Row>
         <Row>
-          <Text className="my-[8px] text-[16px] font-semibold leading-[24px] text-gray-500">
+          <Text className="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]">
             123 Main Street Anytown, CA 12345
           </Text>
-          <Text className="mb-[0px] mt-[4px] text-[16px] font-semibold leading-[24px] text-gray-500">
+          <Text className="mt-[4px] mb-[0px] font-semibold text-[16px] text-gray-500 leading-[24px]">
             [email protected] +123456789
           </Text>
         </Row>

apps/web/components/four-images-in-a-grid/tailwind.tsx

@@ -5,13 +5,13 @@ export const component = (
   <Section className="my-[16px]">
     <Section className="mt-[42px]">
       <Row>
-        <Text className="m-0 text-[16px] font-semibold leading-[24px] text-indigo-600">
+        <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
           Our products
         </Text>
-        <Text className="m-0 mt-[8px] text-[24px] font-semibold leading-[32px] text-gray-900">
+        <Text className="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]">
           Elegant Style
         </Text>
-        <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
           We spent two years in development to bring you the next generation of
           our award-winning home brew grinder. From the finest pour-overs to the
           coarsest cold brews, your coffee will never be the same again.

apps/web/components/header-and-four-paragraphs-and-two-columns/tailwind.tsx

@@ -4,10 +4,10 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Section className="my-[16px]">
     <Row>
-      <Text className="m-0 text-[24px] font-semibold leading-[32px] text-gray-900">
+      <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
         Modern Comfort
       </Text>
-      <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
         Experience contemporary bliss with our sleek and cozy furniture
         collection, designed for optimal comfort and style
       </Text>
@@ -21,10 +21,10 @@ export const component = (
             src="/static/heart-icon.png"
             width="48"
           />
-          <Text className="m-0 mt-[16px] text-[20px] font-semibold leading-[28px] text-gray-900">
+          <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
             Timeless Beauty
           </Text>
-          <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+          <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
             Indulge in the enduring beauty of our furniture pieces, crafted with
             exquisite attention to detail and timeless design
           </Text>
@@ -36,10 +36,10 @@ export const component = (
             src="/static/rocket-icon.png"
             width="48"
           />
-          <Text className="m-0 mt-[16px] text-[20px] font-semibold leading-[28px] text-gray-900">
+          <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
             Effortless Function
           </Text>
-          <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+          <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
             Discover furniture that seamlessly combines form and function,
             making everyday living a breeze with its practicality
           </Text>
@@ -53,10 +53,10 @@ export const component = (
             src="/static/megaphone-icon.png"
             width="48"
           />
-          <Text className="m-0 mt-[16px] text-[20px] font-semibold leading-[28px] text-gray-900">
+          <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
             Customize Your Space
           </Text>
-          <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+          <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
             Personalize your living environment with our customizable furniture
             options, allowing you to tailor your space to perfection
           </Text>
@@ -68,10 +68,10 @@ export const component = (
             src="/static/cube-icon.png"
             width="48"
           />
-          <Text className="m-0 mt-[16px] text-[20px] font-semibold leading-[28px] text-gray-900">
+          <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
             Outdoor Serenity
           </Text>
-          <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+          <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
             Create a tranquil outdoor retreat with our premium outdoor
             furniture, offering both durability and serene relaxation
           </Text>