Tailwind CSS

介绍

Tailwind CSS 是一个功能类优先的 CSS 框架，提供了大量的预定义类，可以直接在 HTML 中使用，从而快速构建响应式和现代化的用户界面。

快速开始

vite 集成

1. 安装 Tailwind CSS

   npm i -D tailwindcss @tailwindcss/vite

2. 配置 vite 插件

   // vite.config.ts
   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [
       tailwindcss(),
       // ...other plugins
     ],
   })

3. 引入 Tailwind CSS 样式

   @import 'tailwindcss';

配合 Prettier 进行格式化

1. 安装

   npm i -D prettier prettier-plugin-tailwindcss

2. 添加配置

   {
     "plugins": ["prettier-plugin-tailwindcss"],
     "tailwindConfig": "./tailwind.config.ts"
     // ...
   }

基础用法

<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>