perf: add img preflight styles into base layer.

- refactor(docs): remove some useless comments in base style docs.
riazer-lab · Jun 23, 2023 · 57e2b87 · 57e2b87
1 parent 9fd917f
commit 57e2b87
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 18 deletions.
diff --git a/apps/experiments/src/index.html b/apps/experiments/src/index.html
@@ -3197,5 +3197,34 @@ <h2 class="text-xl">Pulse</h2>
         </div>
       </div>
     </div>
+    <div class="grid grid-cols-1 gap-4 p-4 has-border rounded-xl">
+      <h1 class="text-3xl col-span-full">Image</h1>
+      <div class="">
+        <h2 class="text-xl">Layout</h2>
+        <div class="flex flex-wrap gap-4">
+          <img
+            class="h-48 w-96"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
+          ></img>
+          <img
+            class="h-48 w-96 object-cover"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
+          ></img>
+          <img
+            class="h-48 w-96 object-fill"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
+          ></img>
+          <img
+            class="h-48 w-96 object-scale-down"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
+          ></img>
+          <img
+            class="h-48 w-96 object-none"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
+          ></img>
+        </div>
+      </div>
+
+    </div>
   </body>
 </html>
diff --git a/apps/website/pages/docs/base/styles.en.mdx b/apps/website/pages/docs/base/styles.en.mdx
@@ -86,12 +86,12 @@ kbd {
   border-width: 1px;
   height: fit-content;
 
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  font-size: 0.75rem /* 12px */;
-  line-height: 1rem /* 16px */;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
 
   --tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
@@ -102,4 +102,9 @@ kbd {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
 }
+
+img {
+  border-radius: 0.5rem;
+  object-fit: cover;
+}
 ```
diff --git a/apps/website/pages/docs/base/styles.zh.mdx b/apps/website/pages/docs/base/styles.zh.mdx
@@ -85,12 +85,12 @@ kbd {
   border-width: 1px;
   height: fit-content;
 
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  font-size: 0.75rem /* 12px */;
-  line-height: 1rem /* 16px */;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
 
   --tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
@@ -101,4 +101,8 @@ kbd {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
 }
+img {
+  border-radius: 0.5rem;
+  object-fit: cover;
+}
 ```
diff --git a/packages/tailwind/src/style/base/base.css b/packages/tailwind/src/style/base/base.css
@@ -82,12 +82,12 @@ kbd {
   border-width: 1px;
   height: fit-content;
 
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  padding-left: 0.5rem /* 8px */;
-  padding-right: 0.5rem /* 8px */;
-  font-size: 0.75rem /* 12px */;
-  line-height: 1rem /* 16px */;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
 
   --tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
@@ -98,3 +98,7 @@ kbd {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
 }
+
+img {
+  @apply rounded-lg object-cover;
+}