Tailwind CSS

介绍

Tailwind CSS

基础用法

<div class="w-xs"></div>
<div class="text-lg"></div>
<div class="text-gray-500"></div>
<div class="flex"></div>
<div class="grid"></div>

媒体查询

<div class="md:block hidden">媒体查询：不超过768px</did>
<div class="sm:bg-amber-500 md:bg-amber-700">媒体查询：改变颜色</did>
<div class="max-sm:bg-amber-500 max-md:bg-amber-700">媒体查询：改变颜色</did>

暗黑模式

<div class="bg-white dark:bg-blank text-blank dark:text-white">暗黑模式</div>

或者，像这样：

@import 'tailwindcss';

/* ... */

@custom-variant dark (&:where(.dark .dark *));

自定义

自定义类

<div class="w-[762px]"></div>
<div class="text-[30px]"></div>
<div class="text-[#FFEF89]"></div>

自定义主题

@import ‘tailwindcss';

/* ... */

@theme {
  --color-chestnut: #973F29;
  /* https://tailwindcss.com/docs/theme#theme-variable-namespaces */
  /* --font-* */
  /* --shadow-* */
  /* ... */
}

<div class="text-chestnut">自定义主题测试</div>

自定义指令

@import 'tailwindcss';

/* ... */

@layer base {
  h3 {
    @apply text-base font-medium tracking-tight;
  }
  p {
    @apply px-4 py-2 text-sm;
  }
}

@layer components {
  .card {
    @apply m-10 rounded-lg bg-white;
  }
}

@utility flex-center {
  @apply flex justify-center items-center;
}

<div class="card flex-center">
  <h3>Hello</h3>
  <p>world</p>
</div>

Tailwind CSS 高级库

• shadcn
• daisyUI