update ItemColor.js, src/components/ThemeColor/index.js and tailwind.config.js

src/components/ThemeColor/index.js

@@ -26,19 +26,20 @@ const ThemeColor = ({ inputFields }) => {
         Version:
         <span className="ml-1">1</span>
       </p>
+      {/* rightLeft */}
       <div className="w-full flex flex-row-reverse items-start justify-between mt-7 divide-x-2 divide-[#b8dff3] divide-x-reverse">
         {/* right */}
         <div className="flex-grow flex flex-col p-4">
           <div className="w-full flex flex-row items-center justify-between">
             <p className="text-2xl">Screens</p>
-            <p className=" px-2 py-0.5 bg-surface text-surfaceText text-xs rtl border border-dashed">
-              بعد از نوشتن عدد مورد نظر حتما از
-              <span className="mx-1 font-bold">px</span>
-              استفاده کنید.
-            </p>
           </div>
           <hr className="my-2 border border-[#b8dff3]" />
-          <p className="w-fit self-center px-2 py-0.5 bg-secondary text-secondaryText text-xs rtl border border-dashed">
+          <p className="w-fit self-end px-2 py-0.5 bg-surface text-surfaceText text-xs rtl border border-dashed">
+            بعد از نوشتن عدد مورد نظر حتما از
+            <span className="mx-1 font-bold">px</span>
+            استفاده کنید.
+          </p>
+          <p className="w-fit px-2 mt-2 py-0.5 bg-secondary text-secondaryText text-xs rtl border border-dashed">
             برای مثال:
             <span className="mx-1 font-bold">444px</span>
           </p>

tailwind.config.js

@@ -34,22 +34,13 @@ module.exports = {
       error: "var(--theme-error)",
       errorText: "var(--theme-errorText)",
     },
-    screens: {
-      sm: "640px",
-      // => @media (min-width: 640px) { ... }
-
-      md: "768px",
-      // => @media (min-width: 768px) { ... }
-
-      lg: "1024px",
-      // => @media (min-width: 1024px) { ... }
-
-      xl: "1280px",
-      // => @media (min-width: 1280px) { ... }
-
-      "2xl": "1536px",
-      // => @media (min-width: 1536px) { ... }
-    },
+    // screens: {
+    //   sm: "var(--theme-sm)",
+    //   md: "var(--theme-md)",
+    //   lg: "var(--theme-lg)",
+    //   xl: "var(--theme-xl)",
+    //   "2xl": "var(--theme-2xl)",
+    // },
   },
   plugins: [
     require("@themesberg/flowbite/plugin"),