集成 Tailwind CSS

Tailwind CSS

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

3. 引用 Tailwind CSS

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

4. 测试

<h1 className="text-3xl font-bold underline">Hello world!</h1>

Tailwind CSS 组件库

daisyui

提示

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

1. 安装 daisyUI：

   pnpm add -D daisyui@5

2. 引入 daisyui：

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

shadcn-ui

提示

shadcn-ui 是一个基于 Tailwind CSS 的组件库。

1. 初始化 shadcn-ui

   pnpx shadcn init

   cli 参考

   • √ Which style would you like to use? » New York (Recommended)
   • √ Which color would you like to use as the base color? » Neutral

2. 新增组件（例如：Button）

   pnpx shadcn add button