在Next.js 15中无Tailwind使用Assistant-UI的实践指南

Assistant-UI是一个功能强大的React组件库，为开发者提供了丰富的UI元素来构建交互式应用界面。虽然官方文档主要推荐使用Tailwind CSS进行样式定制，但许多开发者更倾向于使用纯CSS或其他CSS-in-JS方案。本文将详细介绍如何在Next.js 15项目中不使用Tailwind CSS的情况下集成Assistant-UI组件。

无Tailwind方案的核心思路

Assistant-UI组件在设计时已经考虑了不使用Tailwind CSS的场景。组件内部使用了特定的CSS类名前缀（如aui-thread-root、aui-composer-input等），这些类名可以通过预编译的CSS文件直接应用样式，而不需要Tailwind的转换过程。

具体实现步骤

1. 安装依赖：首先确保已经正确安装了@assistant-ui/react-ui包

2. 导入预编译样式：在项目的入口文件（如_app.js或_app.tsx）中导入Assistant-UI提供的预编译CSS文件：

import "@assistant-ui/styles/index.css";
import "@assistant-ui/styles/markdown.css";

3. 按需导入组件：根据项目需要导入具体的UI组件

import { Thread, Composer } from "@assistant-ui/react-ui";

样式定制技巧

虽然使用了预编译的CSS文件，开发者仍然可以通过以下方式对组件样式进行定制：

1. 覆盖样式：在项目CSS文件中重写aui-前缀的类名定义

.aui-composer-input {
  background-color: #f5f5f5;
  border-radius: 8px;
}

2. CSS变量控制：部分组件支持通过CSS变量进行主题定制

:root {
  --aui-primary-color: #4285f4;
  --aui-border-radius: 8px;
}

注意事项

1. 模态框组件：如果项目中使用了Modal组件，需要额外导入modal.css文件

import "@assistant-ui/styles/modal.css";

2. 样式优先级：自定义样式应确保有足够的选择器权重来覆盖基础样式

3. 响应式设计：预编译的CSS已经包含了基本的响应式设计，但开发者可能需要根据项目需求进行调整

最佳实践建议

1. 创建样式覆盖文件：建议为Assistant-UI组件创建专门的样式覆盖文件，便于维护

2. 渐进式采用：可以先使用预编译样式，再逐步替换为项目自有样式系统

3. 版本升级检查：在升级Assistant-UI版本时，注意检查预编译样式是否有重大变更

通过以上方法，开发者可以在Next.js 15项目中灵活使用Assistant-UI组件，同时保持对样式系统的完全控制，无需依赖Tailwind CSS。这种方案特别适合已有成熟样式系统的项目，或者偏好使用纯CSS/Sass等传统方案的开发团队。