fix table layout in 2024-03-18-html-components-and-css-components-in-…

…tailwindcss
yuheiy · Mar 21, 2024 · 9f89422 · 9f89422
1 parent 7794e08
commit 9f89422
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/content/blog/2024-03-18-html-components-and-css-components-in-tailwindcss.mdx b/src/content/blog/2024-03-18-html-components-and-css-components-in-tailwindcss.mdx
@@ -185,17 +185,20 @@ componentsレイヤーがutilitiesレイヤーと異なるのは、後ろのレ
 
 ただし実は、表に示したように、ITCSSとTailwind CSSのレイヤーが明確に一対一の関係にマッピングできるわけではない。ITCSSのcomponentsレイヤーとTailwind CSSのcomponentsレイヤーは、一部役割が被るところがある。たとえば、公式プラグインにある`prose`クラスや`form-*`クラスはITCSSで言えばcomponentsに近いが、HTMLテンプレートではなくTailwindのcomponentsレイヤーで実装されている。前述の表をより正確に表すとすれば次のようになるだろう。
 
-<figure role="none">
-  <div class="grid w-fit grid-cols-2 grid-rows-7 *:border-b *:px-3 *:py-1" role="group">
+<figure role="none" class="overflow-x-auto">
+  <div
+    class="grid w-fit grid-cols-[repeat(2,auto)] grid-rows-7 whitespace-pre *:flex *:items-center *:border-b *:px-3 *:py-1"
+    role="group"
+  >
     <div class="bg-dynamic-subtle font-bold">ITCSS</div>
     <div class="border-l bg-dynamic-subtle font-bold">Tailwind CSS</div>
     <div>generic</div>
     <div class="border-l">base</div>
     <div>elements</div>
     <div class="border-l">base</div>
     <div>objects</div>
-    <div class="row-span-2 flex items-center border-l">**components**</div>
-    <div class="row-span-2 flex items-center">**components**</div>
+    <div class="row-span-2 border-l">**components**</div>
+    <div class="row-span-2">**components**</div>
     <div class="border-l">HTMLテンプレート</div>
     <div>utilities</div>
     <div class="border-l">utilities</div>