更新：1.课程详情增加骨架屏；2.图书首页和图书详情增加骨架屏；

style/tailwind.css

@@ -8,6 +8,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-white: #fff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
@@ -212,18 +214,81 @@
       max-width: 96rem;
     }
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-2\! {
+    margin-top: calc(var(--spacing) * 2) !important;
+  }
+  .mt-2\.5\! {
+    margin-top: calc(var(--spacing) * 2.5) !important;
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-3\! {
+    margin-top: calc(var(--spacing) * 3) !important;
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-5\! {
+    margin-top: calc(var(--spacing) * 5) !important;
+  }
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .mt-20\! {
+    margin-top: calc(var(--spacing) * 20) !important;
+  }
+  .mt-\[20rpx\]\! {
+    margin-top: 20rpx !important;
+  }
+  .mr-\[20rpx\] {
+    margin-right: 20rpx;
+  }
+  .mr-\[20rpx\]\! {
+    margin-right: 20rpx !important;
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-1\! {
+    margin-bottom: calc(var(--spacing) * 1) !important;
+  }
+  .mb-1\.5\! {
+    margin-bottom: calc(var(--spacing) * 1.5) !important;
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-2\! {
     margin-bottom: calc(var(--spacing) * 2) !important;
   }
+  .mb-2\.5\! {
+    margin-bottom: calc(var(--spacing) * 2.5) !important;
+  }
   .mb-\[20rpx\]\! {
     margin-bottom: 20rpx !important;
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-1\! {
     margin-left: calc(var(--spacing) * 1) !important;
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-2\.5\! {
     margin-left: calc(var(--spacing) * 2.5) !important;
   }
+  .ml-\[20rpx\] {
+    margin-left: 20rpx;
+  }
+  .ml-\[20rpx\]\! {
+    margin-left: 20rpx !important;
+  }
   .block {
     display: block;
   }
@@ -248,6 +313,9 @@
   .table {
     display: table;
   }
+  .w-\[50\%\] {
+    width: 50%;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -257,6 +325,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -273,18 +344,39 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-\[10rpx\] {
     padding: 10rpx;
   }
   .p-\[20rpx\] {
     padding: 20rpx;
   }
+  .p-\[20rpx\]\! {
+    padding: 20rpx !important;
+  }
   .p-\[30rpx\] {
     padding: 30rpx;
   }
@@ -297,6 +389,9 @@
   .pt-\[10rpx\] {
     padding-top: 10rpx;
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -347,6 +442,9 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-\[0_4rpx_12rpx_rgba\(0\,0\,0\,0\.05\)\] {
     --tw-shadow: 0 4rpx 12rpx var(--tw-shadow-color, rgba(0,0,0,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);