Tailwind CSS

提示

当前版本 v4

介绍

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

快速开始

Vite 集成

1. 安装 Tailwind

   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(),
       // ...
     ],
   })

3. 引入 Tailwind CSS 样式

   /* main.css */
   @import 'tailwindcss';

Next.js 集成

1. 安装依赖

   pnpm add -D tailwindcss@4 postcss@8 @tailwindcss/postcss@4

2. 配置 Tailwind CSS

   // tailwind.config.ts
   import type { Config } from 'tailwindcss'
   
   const config: Config = {
     content: [
       './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
       './src/components/**/*.{js,ts,jsx,tsx,mdx}',
       './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {
         colors: {
           background: 'var(--background)',
           foreground: 'var(--foreground)',
         },
       },
     },
     plugins: [],
   }
   
   export default config

3. 配置 PostCSS

   // postcss.config.mjs
   /** @type {import('postcss-load-config').Config} */
   const config = {
     plugins: {
       '@tailwindcss/postcss': {},
     },
   }
   
   export default config

4. 引用 Tailwind CSS 样式

   /* app/globals.css */
   @import 'tailwindcss';

5. 测试

   export default function Page() {
     return <h1 className="text-3xl font-bold underline">Hello world!</h1>
   }

基础用法

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

组件库

daisyUI

daisyUI 是一个基于 Tailwind CSS 的组件库。

1. 安装

   pnpm add -D daisyui@5

2. 引入插件

   /* app/globals.css */
   @import 'tailwindcss';
   @plugin 'daisyui';

shadcn/ui

shadcn/ui 是一套基于 Tailwind CSS 的组件代码生成方案。

1. 初始化

   pnpx shadcn init

2. 新增组件

   pnpx shadcn add button