当前位置： 首页 > article >正文

Tailwind css实战，基于Kooboo构建AI对话框页面（一）

article 2025/9/10 15:13:53

在当今数字化时代，AI 助手已成为网站和应用不可或缺的一部分。本文将带你一步步使用 Tailwind CSS 和 Kooboo 构建一个现代化的 AI 对话界面框。

一、选择 Kooboo平台 的核心优势

  1. 智能提示：在输入 class 属性时，会自动触发 Tailwind CSS 规则的智能联想提示，显著提升开发效率。
  2. 动态编译优化：通过启用样式设置中的 UnoCSS 功能，可实现：
    • 按需编译：仅打包实际使用的 CSS 类，剔除未引用规则，生成轻量且高效的样式文件。
    • 自动集成：编译后的最小化 CSS 文件会自动注入页面，无需手动配置引用。
      进入站点后 -> 页面 -> 样式 -> 设置 -> 选择原子化css -> 保存

二、HTML 结构

（一）最外层容器：<body>
<body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
  • 角色：整个页面的根容器，控制整体布局和基础样式。
  • 关键属性：
    • bg-gray-200：背景色为浅灰色，营造柔和视觉基调。
    • min-h-screen：最小高度为视口高度（100vh），确保内容撑满屏幕。
    • flex items-center justify-center：使用弹性布局，子元素在垂直和水平方向居中，实现界面居中效果。
    • p-4：内边距为 4 单位（Tailwind 中默认 1 单位 = 0.25rem，即总内边距为 1rem），避免内容紧贴浏览器边缘。
（二）主窗口容器：.max-w-3xl
<div class="max-w-3xl w-full bg-white rounded-lg shadow-xl overflow-hidden border border-gray-200">
  • 角色：模拟桌面应用的窗口外壳，包裹标题栏、消息容器和输入区域。
  • 关键属性：
    • max-w-3xl：最大宽度为 3xl（Tailwind 预设值，约 48rem/768px），限制窗口宽度，适配不同屏幕。
    • w-full：在小于 3xl 的屏幕上自动占满可用宽度，保证响应式。
    • bg-white：白色背景，与页面浅灰背景形成对比，突出窗口主体。
    • rounded-lg shadow-xl：大圆角 + 深阴影，营造立体感和浮窗效果。
    • overflow-hidden border border-gray-200：隐藏溢出内容（防止圆角外的边框显示不全），添加浅灰色边框增强边界感。
（三）标题栏容器：.bg-gray-100
<div class="bg-gray-100 px-4 py-2 flex items-center justify-between border-b border-gray-200">

  • 角色：窗口顶部的功能栏，显示标题和控制按钮。
  • 关键属性：
    • bg-gray-100：浅灰色背景，与主窗口白色背景区分，形成层级感。
    • px-4 py-2：水平内边距 4 单位，垂直内边距 2 单位（总内边距：水平 1rem，垂直 0.5rem）。
    • flex items-center justify-between：弹性布局，子元素垂直居中，左右内容两端对齐（标题居左，按钮居右）。
    • border-b border-gray-200：底部添加浅灰色边框，分隔标题栏和消息容器。
标题栏子容器 1：左侧标题组
<div class="flex items-center"><div class="w-8 h-8 flex items-center justify-center"><span class="text-blue-600">🤖</span></div><span class="ml-4 text-sm font-medium text-gray-700">AI小助手</span>
</div>
  • 布局：水平排列的图标和标题。
    • 图标容器：
      • w-8 h-8：固定尺寸 2rem×2rem（约 32px），圆形背景（通过父级 rounded-full 实现）。
      • flex items-center justify-center：图标居中显示。
      • text-blue-600：深蓝色图标，与标题栏浅灰背景形成对比。
    • 标题文本：
      • ml-4：左侧边距 4 单位（1rem），与图标隔开。
      • text-sm font-medium text-gray-700：小字体、中等字重、深灰色文本，清晰易读。
标题栏子容器 2：右侧控制按钮组
<div class="flex items-center space-x-3"><button class="text-gray-500 hover:text-gray-700 transition-colors"><i class="fa fa-window-minimize"></i></button><button class="text-gray-500 hover:text-gray-700 transition-colors"><i class="fa fa-window-maximize"></i></button><button class="text-gray-500 hover:text-red-500 transition-colors"><i class="fa fa-times"></i></button></div>
  • 布局：水平排列的三个按钮（最小化、最大化、关闭）。
    • flex items-center space-x-3：按钮垂直居中，水平间距 3 单位（0.75rem）。
    • 按钮样式：
      • text-gray-500 hover:text-gray-700：默认浅灰色图标，悬停时深灰色，关闭按钮悬停时为红色（hover:text-red-500）。
      • transition-colors：添加颜色过渡动画，使交互更平滑。
    • 图标：使用 Font Awesome 图标（需引入库），分别为 fa-window-minimize、fa-window-maximize、fa-times。
（四）消息容器：#messageContainer
<div id="messageContainer" class="h-[60vh] overflow-y-auto p-4 space-y-4 bg-gray-50">
  • 角色：显示历史聊天记录，支持垂直滚动。
  • 关键属性：
    • h-[60vh]：高度为视口高度的 60%，固定区域大小。
    • overflow-y-auto：内容超出高度时显示垂直滚动条。
    • p-4 space-y-4：内边距 4 单位，子消息之间垂直间距 4 单位（1rem），避免消息紧贴。
    • bg-gray-50：浅灰色背景，与主窗口白色背景区分，突出消息气泡。
消息容器子元素：单条消息（初始 AI 消息）
<!-- 初始消息 --><div class="flex items-start space-x-2"><div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">🤖</div><div class="max-w-[70%]"><div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm"><p class="text-gray-800">您好！我是人工智能助手。有什么可以帮助您的吗？</p><span class="text-xs text-gray-500 mt-1 block">10:30 AM</span></div></div></div>
  • 布局逻辑：
    • flex items-start space-x-2：左侧图标与右侧消息气泡水平排列，间距 2 单位（0.5rem），气泡顶部对齐图标。
    • 图标容器：
      • rounded-full bg-gray-200：灰色圆形背景，机器人图标居中。
    • 消息气泡：
      • max-w-[70%]：最大宽度占容器的 70%，避免长消息撑满屏幕。
      • bg-white p-4 rounded-lg rounded-tl-none：白色背景，大圆角，左上角无圆角（模拟对话气泡的指向性）。
      • shadow-sm：轻微阴影，增强立体感。
      • 文本样式：
        • 消息内容：text-gray-800 深灰色，易读性高。
        • 时间戳：text-xs text-gray-500 小字体、浅灰色，位于消息底部。
（五）输入区域容器：.bg-white
<div class="bg-white p-4 border-t border-gray-200">
  • 角色：用户输入消息的区域，位于窗口底部。
  • 关键属性：
    • bg-white：白色背景，与消息容器的浅灰背景区分。
    • p-4 border-t border-gray-200：内边距 4 单位，顶部添加浅灰色边框，分隔输入区域和消息容器。
输入区域子容器：输入框与按钮组
        <div class="flex space-x-2"><input id="messageInput"type="text" placeholder="输入消息..." class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"><button id="sendButton" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">发送</button></div></div>
  • 布局：水平排列的输入框和发送按钮。
    • flex space-x-2：弹性布局，输入框和按钮之间水平间距 2 单位（0.5rem）。
    • 输入框：
      • flex-1：占据剩余水平空间，自适应宽度。
      • p-2 border rounded-lg focus:ring-blue-500：内边距、边框、圆角，聚焦时蓝色高亮环。
    • 发送按钮：
      • bg-blue-600 text-white hover:bg-blue-700：蓝色主色调，悬停时颜色加深，符合操作按钮视觉规范。
      • px-4 py-2 rounded-lg：内边距、圆角，按钮尺寸适中易点击。

三、设计核心思路

  1. 层级分明的容器结构：

    • 通过不同背景色（白、浅灰、深灰）和边框分隔容器，增强视觉层次感。
    • 弹性布局（flex）和间距类（space-x、space-y）实现灵活响应式布局。

  2. 模拟真实交互体验：

    • 标题栏控制按钮模仿桌面应用视觉习惯，提升用户熟悉度。
    • 消息气泡通过对齐方式（左对齐 AI，右对齐用户）和颜色（白 / 蓝）清晰区分角色。

  3. 渐进增强的交互逻辑：

    • JavaScript 仅负责动态交互（发送消息、加载状态、回复逻辑），静态布局完全由 HTML/CSS 实现，保证基础功能可用。

相关文章：

Tailwind css实战，基于Kooboo构建AI对话框页面（一）

在当今数字化时代&#xff0c;AI 助手已成为网站和应用不可或缺的一部分。本文将带你一步步使用 Tailwind CSS 和 Kooboo 构建一个现代化的 AI 对话界面框。 一、选择 Kooboo平台 的核心优势 智能提示&#xff1a;在输入 class 属性时&#xff0c;会自动触发 Tailwind CSS 规则…...

编程日记 2025/9/3 11:22:03

重塑数学边界：人工智能如何引领数学研究的新纪元

目录 一、人工智能如何重新定义数学研究的边界 &#xff08;一&#xff09;数学与AI的关系&#xff1a;从基础理论到创新思维的回馈 &#xff08;二&#xff09;AI的创造力&#xff1a;突破传统推理的局限 &#xff08;三&#xff09;AI对数学研究的潜在贡献&#xff1a;创…...

编程日记 2025/9/10 12:44:53

docker部署并测试翻译模型-CSANMT连续语义增强机器翻译

1.模型选择CSANMT-Translation模型&#xff1a; 2.修改docker-compose.yml文件&#xff0c;重新定义模型缓存路径和存储路径 其中MODELSCOPE_CACHE指定了模型的下载路径。 3.运行docker compose up -d --build&#xff0c;提示出现报错&#xff1a;Error response from daemon…...

编程日记 2025/9/4 21:21:26

蓝桥杯2025.5.23每日一题-儿童数

儿童数 若一个正整数 n n n 满足 n 61 n^{61} n61 整除 2024 ! 2024! 2024!&#xff0c;即 2024 ! 2024! 2024! 除以 n 61 n^{61} n61 的余数为 0 0 0&#xff0c;则称 n n n 为儿童数。 现在&#xff0c;请你计算在区间 [ 1 , ∞ ) [1, \infty) [1,∞) 内一共有多少…...

编程日记 2025/8/1 11:08:19

Spring Boot项目配置核心 - pom.xml的依赖管理与构建优化

基础架构 <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVe…...

编程日记 2025/8/29 14:20:09

告别手抖困扰：全方位健康护理指南

手抖&#xff0c;医学上称为震颤&#xff0c;是常见的身体症状&#xff0c;可能由多种原因引发&#xff0c;了解其成因并采取科学护理措施&#xff0c;对改善症状、维护健康至关重要。 生理性手抖往往因情绪激动、过度劳累、大量饮用咖啡或酒精等引起&#xff0c;这种手抖通常较…...

编程日记 2025/8/23 12:06:15

图解深度学习 - 特征工程（DL和ML的核心差异）

前言 深度学习通过自动化特征提取&#xff0c;简化了机器学习工作流程&#xff0c;它让解决问题变得更加简单。因为深度学习将特征工程完全自动化&#xff0c;而特征工程曾经是机器学习工作流程中最关键的一步。 一、机器学习特征工程 机器学习为什么需要特征工程&#xff08…...

编程日记 2025/9/5 6:32:35

《短线操盘跟庄关键技术》速读笔记

文章目录 书籍信息概览基础技术及实战运用基本趋势及操盘策略陷阱的识别和规避短线实战选股实战买点分析实战卖点分析 书籍信息 书名&#xff1a;《短线操盘跟庄关键技术》 作者&#xff1a;明发 概览 基础技术及实战运用 技术分析的原理及特点&#xff1a;以市场行为&#…...

编程日记 2025/9/4 8:22:44

Datacom-hcia~Datacom-hcie学习笔记索引

hcia VLAN工作原理实验案例(超详细)https://blog.csdn.net/Fanmeang/article/details/145855768?spm1001.2014.3001.5502 交换机工作原理实验案例https://blog.csdn.net/Fanmeang/article/details/145802382?spm1001.2014.3001.5502 ARP理论实验案例&#xff08;超详细&am…...

编程日记 2025/8/23 12:06:23

Oracle 中 SHRINK 与 MOVE 操作的比较

Oracle 中 SHRINK 与 MOVE 操作的比较 在 Oracle 数据库中&#xff0c;SHRINK 和 MOVE 都是用于重组表和索引以减少空间碎片的重要操作&#xff0c;但它们在实现方式和适用场景上有显著区别。 SHRINK 操作 基本语法 ALTER TABLE table_name SHRINK SPACE [COMPACT] [CASCAD…...

编程日记 2025/7/1 10:00:40

受不了github的网络限制了，我开源了一个图床工具 gitee-spring-boot-starter

嗨嗨嗨~ 我老马又又来了&#xff01;&#xff01;&#xff01;上次写了一篇我开源了一款阿里云OSS的spring-boot-starter&#xff0c;然后买的资源包到期了&#xff0c;后面又想白&#xff08;开&#xff09;嫖&#xff08;源&#xff09;的路子&#xff0c;首先想到了使用gith…...

编程日记 2025/8/29 20:01:40

【Python 基础与实战】从基础语法到项目应用的全流程解析

&#xff08;1&#xff09;列表和元组的区别是什么?如何从列表创建元组?如何从元组创建列表? 列表和元组的区别&#xff1a; 可变性&#xff1a;列表是可变的&#xff0c;即可以对列表进行元素的增、删、改操作。例如&#xff0c;可以使用append()方法添加元素&#xff0c;r…...

编程日记 2025/7/8 22:00:08

2025年医美行业报告60+份汇总解读 | 附 PDF 下载

原文链接&#xff1a;https://tecdat.cn/?p42122 医美行业在消费升级与技术迭代的双重驱动下&#xff0c;已从边缘市场逐步走向主流。数据显示&#xff0c;2024 年中国医美市场规模突破 3000 亿元&#xff0c;年复合增长率达 15%&#xff0c;但行业仍面临正品率不足、区域发展…...

编程日记 2025/9/6 21:39:26

API自动化与持续集成核心实战知识点！

想象一下&#xff0c;你开发的API像一辆跑车&#xff0c;性能强劲&#xff0c;但你如何确保它每次启动都完美无缺&#xff1f;或者你的代码像一道复杂的菜肴&#xff0c;如何保证每次更新都不破坏原有味道&#xff1f;答案就是API自动化测试与持续集成&#xff01;SuperTest让你…...

编程日记 2025/8/23 12:06:35

基于SpringBoot+Vue的社区医院信息平台设计与实现

项目背景与概述 随着医疗健康信息化的发展&#xff0c;社区医院的管理逐渐由传统的手工模式转向信息化管理。为了提高医院的管理效率、减少人工操作、提升服务质量&#xff0c;开发一个高效且实用的社区医院信息平台显得尤为重要。本系统基于Spring Boot框架与MySQL数据库设计…...

编程日记 2025/9/2 21:06:59

C++ 中的暴力破解算法

一、暴力破解算法原理​ 暴力破解算法&#xff0c;顾名思义&#xff0c;就是通过穷举所有可能的解&#xff0c;逐一验证&#xff0c;直到找到满足条件的解。它不依赖复杂的逻辑推导或数学优化&#xff0c;而是依靠计算机强大的计算能力&#xff0c;将所有可能的情况都尝试一遍…...

编程日记 2025/9/1 1:00:28

前端[插件化]设计思想_Vue、React、Webpack、Vite、Element Plus、Ant Design

前端插件化设计思想旨在提升应用的可扩展性、可维护性和模块化程度。这种思想不仅体现在框架&#xff08;如 Vue、React&#xff09;中&#xff0c;也广泛应用于构建工具&#xff08;如 Webpack、Vite&#xff09;以及 UI 库&#xff08;如 Element Plus、Ant Design&#xff0…...

编程日记 2025/7/22 14:49:26

率先实现混合搜索：使用 Elasticsearch 和 Semantic Kernel

作者&#xff1a;来自 Elastic Enrico Zimuel 及 Florian Bernd 混合搜索功能现在已在 .NET Elasticsearch Semantic Kernel 连接器中提供。阅读这篇博客文章了解如何开始使用。 Elasticsearch 已原生集成业内领先的生成式 AI 工具和服务提供商。欢迎观看我们的网络研讨会&…...

编程日记 2025/8/23 12:06:52

uni-app（4）：js语法、css语法

1 js语法 uni-app的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。标准ECMAScript的js仅是最基础的js。浏览器基于它扩展了window、document、navigator等对象。小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。node也扩展了fs等模块。uni-app基于E…...

编程日记 2025/8/15 5:48:19

基于SpringBoot的网上租赁系统设计与实现

项目简介 本项目是基于 Spring Boot Vue 技术栈开发的 网上租赁系统。该系统通过前后端分离的架构&#xff0c;提供用户和管理员两种角色的操作权限&#xff0c;方便用户进行商品租赁、订单管理、信息查询等操作&#xff0c;同时也为管理员提供了商品管理、用户管理、订单管理…...

编程日记 2025/8/30 1:22:45

kafka吞吐量提升总结

前言 原本自以为阅读了很久kafka的源码&#xff0c;对于kafka的了解已经深入到一定程度了&#xff0c;后面在某大厂的面试中&#xff0c;面试官询问我&#xff0c;如果需要提升kafka的性能&#xff0c;应该怎么做&#xff0c;我发现我能答上来的点非常的少&#xff0c;也暴露了…...

编程日记 2025/6/29 19:36:13

AI浪潮下，第五消费时代的商业进化密码

解锁 AI 与第五消费时代 在时代的长河中，消费浪潮的更迭深刻地影响着商业的格局。当下，我们正处于第五消费时代，这个时代有着鲜明的特征，如老龄化、单身化趋势日益显著，社会逐渐步入低欲望、个性化与共享化并行的阶段 。随着人工智能技术的飞速发展，它在商业领域的渗透也…...

编程日记 2025/8/29 20:30:13

Vue组件开发深度指南：构建可复用与可维护的UI

Vue组件开发深度指南&#xff1a;构建可复用与可维护的UI 在现代前端开发中&#xff0c;组件化是构建复杂用户界面的核心思想。Vue.js 以其简洁、高效的组件系统&#xff0c;成为了众多开发者的首选框架之一。理解并熟练运用Vue组件开发&#xff0c;能够显著提升开发效率、代码…...

编程日记 2025/6/24 0:05:02

青少年编程与数学 02-019 Rust 编程基础 20课题、面向对象

青少年编程与数学 02-019 Rust 编程基础 20课题、面向对象 一、面向对象的编程特性&#xff08;一&#xff09;封装&#xff08;Encapsulation&#xff09;&#xff08;二&#xff09;多态&#xff08;Polymorphism&#xff09;&#xff08;三&#xff09;继承&#xff08;Inhe…...

编程日记 2025/8/15 22:15:45

Jouier 普及组十连测 R4

反思 本次比赛到时没有什么细节错误&#xff0c;不过代码思路不好所以分数也不是很高。 T1 代码思路 看题意&#xff0c;发现数据范围不大&#xff0c;直接动用码力暴力即可。 代码 #include<bits/stdc.h> using namespace std;vector<vector<int> > a(110…...

编程日记 2025/8/10 7:23:26

bi平台是什么意思?bi平台具体有什么作用？

目录 一、BI平台是什么意思 1. 具体内涵 2. 主要构成 二、BI 平台具体有什么作用 1. 提供全面的数据洞察 2. 支持快速决策 3. 优化业务流程 4. 提升企业协作 三、BI 平台的应用场景 1. 金融行业 2. 零售行业 3. 制造行业 4. 医疗行业 总结 “每天在海量数据中反复…...

编程日记 2025/8/12 21:07:47

【机械视觉】Halcon—【二、Halcon算子全面介绍（超详细版）】

介绍 Halcon 的算子&#xff08;operators&#xff09;按照功能被系统性地划分为多个类别&#xff0c;官方文档中目前&#xff08;Halcon 22.11 版本&#xff09;共有 19 个主分类&#xff0c;每个主分类下还有若干子分类。 本人在此对这19个分类的常用核心算子进行了一系列的…...

编程日记 2025/8/31 18:38:09

Redis从入门到实战 - 原理篇

一、数据结构 1. 动态字符串SDS 我们都知道Redis中保存的key是字符串&#xff0c;value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串&#xff0c;因为C语言字符串存在很多问题&#xff1a; 获取字符串长…...

编程日记 2025/9/8 12:27:38

26考研|高等代数：线性变换

前言 线性变换这一章节是考频较高的一部分&#xff0c;此部分涉及考点较多&#xff0c;涉及的考题也较多&#xff0c;学习线性变换时&#xff0c;应该注意搭建线性变换与矩阵之间的联系&#xff0c;掌握如何利用矩阵表示一个线性变换结构&#xff0c;同时介绍了最简单的线性变…...

编程日记 2025/9/5 23:10:55

VSCode如何像Pycharm一样“““回车快速生成函数注释文档？如何设置文档的样式？autoDocstring如何设置自定义模板？

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 让VSCode拥有PyCharm级注释生成能力 📒🚀 实现方案🛠️ 备用方案📒 自定义注释文档格式样式 📒🔄 切换主流注释风格✨ 深度自定义模板🛠️ 类型提示与注释联动优化⚓️ 相关链接 ⚓️📖 介绍 📖 用PyCharm写P…...

编程日记 2025/9/10 4:44:19