第二章：环境搭建与安装

配置Tailwind CSS

1. 为什么需要Tailwind CSS

Shadcn组件库基于Tailwind CSS构建，其设计理念与Tailwind的实用工具优先（Utility-First）原则高度契合。Tailwind CSS提供了：

原子化的CSS类名系统
响应式设计的内置支持
强大的自定义配置能力
与Shadcn组件的深度样式集成

2. 安装Tailwind CSS

在项目根目录执行以下命令：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

3. 基础配置

修改生成的tailwind.config.js文件：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@shadcn/ui/**/*.{js,ts,jsx,tsx}" // 包含Shadcn组件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 引入基础样式

在项目的全局CSS文件（如src/index.css）中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 与Shadcn的集成配置

在tailwind.config.js中扩展主题以匹配Shadcn的设计系统：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(222.2 47.4% 11.2%)',
          foreground: 'hsl(210 40% 98%)'
        },
        // 其他Shadcn配色变量...
      }
    }
  }
}

6. 验证配置

创建测试组件：

function TestComponent() {
  return <div className="bg-primary text-primary-foreground p-4">Tailwind测试</div>
}

检查是否正常显示Shadcn主题样式

7. 常见问题解决

样式冲突：确保Tailwind的content配置包含Shadcn组件路径
JIT模式：开发环境下Tailwind默认启用即时编译，修改配置后可能需要重启服务
生产构建：运行npm run build时确保Tailwind能正确提取所有使用的类名

8. 进阶配置建议

添加自定义动画：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'shadcn-fade-in': 'fadeIn 0.3s ease-in-out'
      }
    }
  }
}

配置暗黑模式：

module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
}