tailwindcss 简单场景和官方案例

原文链接: tailwindcss 简单场景和官方案例

上一篇: vite tailwindcss 简单安装配置和使用

下一篇: 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆

tailwind 官方案例, 居中的卡片

<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
>
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="../assets/logo.png" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

抽取样式的按钮, 对于一些可复用的, 可以使用apply抽取

<button class="btn btn-green">Button</button>

.btn {
  @apply py-2 px-4 font-semibold rounded-lg shadow-md;
}
.btn-green {
  @apply text-white bg-green-500