tailwindcss

20.vue3/project4/src/App.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
-    <h1 class="text-4xl">TailWindCss</h1>
+    <h1
+      class="text-4xl text-red-500 text-center w-full h-40 border leading-[160px] rounded-full shadow-lg cursor-pointer"
+    >
+      TailWindCss
+    </h1>
+    <!-- 布局 -->
+    <!-- flex -->
+    <div class="w-60 h-60 border flex justify-evenly items-center">
+      <span>左侧</span>
+      <span>右侧</span>
+    </div>
+    <!-- Grid -->
+    <div class="w-120 h-120 border grid gap-6 m-6">
+      <div class="p-6 border">1</div>
+      <div class="p-6 border">2</div>
+      <div class="p-6 border">3</div>
+    </div>
   </div>
 </template>