ubuntu下yolox tensorrt模型部署
2026/9/25 5:06:28
- UI组件
- 前端
【免费下载链接】flowbite
Open-source UI component library and front-end development framework based on Tailwind CSS
项目地址：https://gitcode.com/gh_mirrors/fl/flowbite
本指南完整讲解如何在一个 Django 项目中从零接入 Tailwind CSS 与 Flowbite，涵盖项目初始化、模板目录配置、django-compressor 静态资源压缩、Tailwind 编译管线以及 Flowbite 主题与插件注册，最终让你在 Python 的服务端模板体系里直接复用导航栏、卡片等交互组件。读完本文你将得到一套可复制的 "Django + Tailwind CSS + Flowbite" 工程骨架，并理解每条配置在 Flowbite 源码中的对应实现。
Django 与 Flowbite 的组合背景
Django 是采用模型-模板-视图（Model-Template-View）架构的 Python 开源 Web 框架，由 Django 软件基金会（Django Software Organization）维护，被大量中小型乃至大型企业用于生产环境（如 YouTube、Spotify、Instagram、Disqus、Dropbox 等知名站点背后的基础设施之一），其开发者需求量也持续增长。Flowbite 则是基于 Tailwind CSS 构建的开源交互组件库，当前仓库版本为 4.0.2（见 package.json 与 config.yml 中的current_version字段）。
两者结合的价值在于：Django 负责服务端路由、模板渲染与业务逻辑，Tailwind CSS 负责原子化样式，Flowbite 负责开箱即用的交互组件（导航栏、模态框、下拉菜单、按钮、日期选择器等），前端开发效率会明显提升。仓库目录 content/getting-started/django.md 即官方为此场景撰写的集成指南，以下步骤均以其为核心骨架，并结合仓库源码补充实现细节。
环境要求
开始之前，请确保本机同时具备以下运行环境：
- Node.js：用于通过 NPM 安装 Tailwind CSS 与 Flowbite（Tailwind v4 的 CLI 编译器依赖 Node 运行时）；
- Python：用于运行 Django 与 pip 安装命令。
若 Python 环境中有可用的 pip，可直接在终端安装 Django：
python -m pip install Django安装完成后，即可开始创建项目。
第一步：创建 Django 项目骨架
1.1 初始化项目并进入目录
在终端执行以下命令，创建一个名为flowbiteapp的 Django 项目并进入其目录：
django-admin startproject flowbiteapp cd flowbiteapp/1.2 配置模板目录
在项目根目录下新建templates/文件夹，然后编辑settings.py，在TEMPLATES配置项的DIRS中加入模板目录：
TEMPLATES = [ { ... 'DIRS': [BASE_DIR / 'templates'], # new ... }, ]这样 Django 的模板加载器就会优先从templates/目录查找*.html模板文件，后续创建的_base.html与index.html都放在这里。
1.3 安装并启用 django-compressor
为了在生产环境对 CSS 进行压缩与合并，指南使用django-compressor作为静态资源压缩器。先安装它：
python -m pip install django-compressor然后在settings.py的INSTALLED_APPS中追加compressor以及你自己的应用名（示例中为flowbiteapp）：
# config/settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'compressor', # new 'flowbiteapp', # new ]接着在settings.py底部补充 compressor 的运行配置：
COMPRESS_ROOT = BASE_DIR / 'static' COMPRESS_ENABLED = True STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)这三项配置的作用分别是：
COMPRESS_ROOT：告诉 compressor 静态资源的根目录（即static/目录）；COMPRESS_ENABLED：是否开启压缩（本地调试可临时设为False，生产部署建议开启）；STATICFILES_FINDERS：注册CompressorFinder，让 Django 的静态文件查找机制能够发现由{% compress %}标签处理、最终输出到static/目录下的压缩产物。
1.4 创建静态资源输入文件
在static/目录下创建src/子目录，并新建input.css文件，得到如下目录结构：
static └── src └── input.css这个文件将作为 Tailwind CSS 的源文件，稍后我们会在其中写入 Tailwind 指令与 Flowbite 的主题导入。
1.5 编写视图与路由
在flowbiteapp/目录（与urls.py同级）新建views.py，添加一个渲染首页模板的视图：
from django.shortcuts import render def index(request): return render(request, 'index.html')然后编辑urls.py，导入该视图并挂到根路径：
from .views import index urlpatterns = [ path('admin/', admin.site.urls), path('', index, name='index') ]这里给首页路由命名index，后续在模板中就可以通过{% url 'index' %}反向生成 URL，这也比在 HTML 里写死/更符合 Django 的最佳实践。
1.6 创建基础模板与首页模板
在templates/目录下创建基础模板_base.html，它引入 compressor 与 static 模板标签，并通过{% block content %}为子模板预留插槽：
<!-- templates/_base.html --> {% load compress %} {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Django + Tailwind CSS + Flowbite</title> {% compress css %} <link rel="stylesheet" href="{% static 'src/output.css' %}"> {% endcompress %} </head> <body class="bg-green-50"> <div class="container mx-auto mt-4"> {% block content %} {% endblock content %} </div> </body> </html>注意：这里引用的样式文件是static/src/output.css，它目前还不存在——这正是下一步安装 Tailwind CSS 后由编译命令生成的产物。
接着创建首页模板index.html：
<!-- templates/index.html --> {% extends "_base.html" %} {% block content %} <h1 class="text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1> {% endblock content %}1.7 启动开发服务器
在项目根目录执行：
python manage.py runserver此时浏览器访问 Django 开发服务器（默认地址为http://127.0.0.1:8000/）会看到一个报错：output.css文件不存在。这是预期现象，因为样式产物要等 Tailwind CSS 编译后才能生成。项目骨架至此已经跑通，下一步就是接入 Tailwind CSS。
第二步：安装并编译 Tailwind CSS
2.1 通过 NPM 安装 Tailwind CLI
在项目根目录（与package.json同级的位置）执行：
npm install tailwindcss @tailwindcss/cli --save-dev其中@tailwindcss/cli是 Tailwind CSS v4 的官方命令行编译器。这一点与仓库自身的开发依赖一致——查看 package.json 的devDependencies，可以看到本项目同样依赖@tailwindcss/cli（^4.0.0），并以它驱动文档站的样式编译脚本（如start:css-docs系列）。
2.2 写入 Tailwind 入口指令
编辑static/src/input.css，引入 Tailwind CSS：
/* static/src/input.css */ @import "tailwindcss";在 Tailwind v4 中，这行@import会加载 Tailwind 的核心能力（层叠层、默认主题、工具类），它是编译整个样式表的基础。
2.3 监听变更并编译
运行以下命令，让 Tailwind CLI 监听源文件变化并实时输出编译后的 CSS：
npx @tailwindcss/cli -i ./static/src/input.css -o ./static/src/output.css --watch各参数含义：
-i ./static/src/input.css：指定输入（源）文件；-o ./static/src/output.css：指定输出文件，即模板中{% static 'src/output.css' %}指向的产物；--watch：监听模式，源文件或模板内容变化时自动重新编译。
该命令与仓库自身的样式构建脚本同源——package.json 中的start:css脚本即为npx @tailwindcss/cli -i src/flowbite.css -o static/flowbite.css --watch。编译成功后，刷新页面即可看到带 Tailwind 工具类的 HTML 正常渲染，之前的output.css报错也随之消失。
第三步：集成 Flowbite 组件库
Flowbite 是基于 Tailwind CSS 的交互组件开源库，通过 NPM 安装，并在 Tailwind CSS 中作为插件注册即可使用。仓库中 plugin.js 与 src/themes 目录分别对应插件的样式逻辑与主题变量，下面逐一接入。
3.1 安装 flowbite
npm install flowbite --save仓库 package.json 的dependencies同样声明了flowbite自身依赖tailwindcss（^4.1.12），保证插件与 Tailwind v4 版本配套。
3.2 导入主题变量
在static/src/input.css中导入 Flowbite 的默认主题变量。指南提供了 5 套主题，可按需选择其中一套（取消对应注释即可），每套主题还搭配了推荐的 Google Fonts 字体导入：
/* choose one of the following */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import "flowbite/src/themes/default"; /* MINIMAL THEME @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/minimal"; */ /* ENTERPRISE THEME @import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap'); @import "flowbite/src/themes/enterprise"; */ /* PLAYFUL THEME @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/playful"; */ /* MONO THEME @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/mono"; */这些主题文件在仓库中一一对应：默认主题见 src/themes/default.css，其余还有 src/themes/minimal.css、src/themes/enterprise.css、src/themes/playful.css 与 src/themes/mono.css。以默认主题为例，它通过@theme定义了一整套 CSS 变量，如字体族--font-sans、圆角梯度--radius-base、正文/标题色--color-body/--color-heading、品牌色--color-brand等。这些变量正是 Flowbite 插件输出组件样式的底层依据——插件中的工具类样式（如 tooltip、datatables、forms）全部引用这些变量，因此切换主题即可全局换肤，无需改动组件 HTML。
3.3 注册 Flowbite 插件
继续在input.css中追加插件导入：
@plugin "flowbite/plugin";flowbite/plugin对应仓库根目录的 plugin.js。从源码看，该插件通过plugin.withOptions注册（见 plugin.js L10-L18），默认启用charts、datatables、forms、tooltips、wysiwyg五组功能的样式注入，分别覆盖图表工具提示、数据表格、表单控件（input/checkbox/radio/range/file 等）、tooltip/popover 箭头以及富文本选中态样式。也就是说，仅仅一行@plugin就会把组件库所需的底层样式规则带入最终的output.css。
3.4 配置源码扫描路径
最后在input.css中告诉 Tailwind 扫描 Flowbite 的源码目录，以便提取组件类名：
@source "../../node_modules/flowbite";Tailwind v4 通过@source指令声明内容扫描源。这里的相对路径../../node_modules/flowbite是相对于static/src/input.css解析的：从static/src/上溯两级到项目根目录，再进入node_modules/flowbite，从而让 Tailwind 检测到组件库模板中的类名并生成对应工具类。
3.5 引入 Flowbite 的 JavaScript
交互组件（导航栏折叠、下拉菜单、模态框等）依赖 Flowbite 的 JavaScript 运行时。在_base.html的</body>标签之前引入脚本，既可以通过 CDN，也可以直接从node_modules/引用本地文件。以 CDN 方式为例：
<script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.2/dist/flowbite.min.js"></script>其中版本号4.0.2即当前仓库发布版本（见 package.json 顶部version字段与 config.yml 的current_version）。若出于内网部署或版本锁定考虑，也可改为引用本地文件，例如：
<script src="{% static 'flowbite/dist/flowbite.min.js' %}"></script>（需要先通过python manage.py collectstatic或在STATICFILES_DIRS中配置node_modules路径后，{% static %}才能解析到该文件。）
至此，Django、Tailwind CSS 与 Flowbite 三方已经全部接通，可以开始在模板中组合组件了。
第四步：在模板中使用 Flowbite 组件
Flowbite 的所有组件文档都维护在仓库的 content/components 目录下，每个组件既包含使用说明，也包含可直接复制的 HTML 片段。下面以指南中的两个组件为例演示接入方式。
4.1 在基础模板中挂载响应式导航栏
将导航栏（Navbar）组件放入_base.html，它就会出现在所有继承该模板的页面顶部。指南给出的完整实现如下：
<!-- templates/_base.html --> {% load compress %} {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Django + Tailwind CSS + Flowbite</title> {% compress css %} <link rel="stylesheet" href="{% static 'src/output.css' %}"> {% endcompress %} </head> <body class="bg-green-50"> <!-- Add this --> <nav class="bg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded-sm dark:bg-gray-800"> <div class="container flex flex-wrap items-center justify-between mx-auto"> <a href="{{ .Site.Params.homepage }}/" class="flex items-center"> <img src="/docs/images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Flowbite Logo" /> <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Django</span> </a> <button><!-- templates/index.html --> {% extends "_base.html" %} {% block content %} <h1 class="mb-6 text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1> <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <a href="#"> <img class="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" /> </a> <div class="p-5"> <a href="#"> <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5> </a> <p class="mb-3 font-normal text-gray-600 dark:text-gray-700">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p> <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"> Read more <svg class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </a> </div> </div> {% endblock content %}该卡片在浅色与深色模式下分别通过dark:前缀类切换背景与文字颜色，图片地址/docs/images/blog/image-1.jpg在本仓库对应 static/images/blog/image-1.jpg，部署时同样需替换为项目自己的静态资源路径。
4.3 更多组件的获取方式
除导航栏与卡片外，Flowbite 还提供下拉菜单、模态框、日期选择器、按钮、表格、轮播等大量组件。它们的完整用法与示例代码分别维护在 content/components/navbar.md、content/components/card.md 以及 content/components 目录下的其他组件文档中，可直接复制对应 HTML 片段到 Django 模板使用。注意：依赖交互行为的组件（如data-collapse-toggle、data-modal-target等触发器）务必保证页面加载了 3.5 节引入的flowbite.min.js。
官方 Starter 项目与后续延伸
指南末尾提到，Flowbite 团队还维护了一个开源的 Django + Tailwind CSS 起步项目（themesberg/tailwind-django-starter），可克隆后作为本指南的落地参照，快速获得一套已经配置好 Tailwind CSS 与 Flowbite 的 Django 工程。
此外，本仓库 content/getting-started 目录还收录了针对 Flask、Laravel、Next.js、React、Vue 等其他框架的同类集成指南（如 content/getting-started/flask.md），集成思路与本指南一脉相承；更通用的安装方式可参考 content/getting-started/quickstart.md。掌握本文的 Django 接入流程后，你可以随时从左侧组件事务目录中选取所需组件，持续扩展你的页面。
小结
至此，一条完整的 "Django + Tailwind CSS + Flowbite" 链路已经打通：Django 提供模板渲染与路由（views.py/urls.py/templates/），django-compressor 负责静态资源压缩（settings.py中的COMPRESS_*配置），Tailwind CLI 将static/src/input.css编译为output.css，而 Flowbite 通过@import "flowbite/src/themes/..."、@plugin "flowbite/plugin"与@source "../../node_modules/flowbite"三行配置注入主题变量、插件样式与扫描源，最后由flowbite.min.js驱动组件交互。这套工程骨架既保留了 Django 的服务端渲染优势，又获得了与前端生态一致的组件化开发体验。
赞
- UI组件
- 前端
【免费下载链接】flowbite
Open-source UI component library and front-end development framework based on Tailwind CSS
项目地址：https://gitcode.com/gh_mirrors/fl/flowbite
相关推荐
使用 Qwik 与 Tailwind CSS 集成 Flowbite 组件库完整指南
使用 Qwik 与 Tailwind CSS 集成 Flowbite 组件库完整指南 本指南围绕 Flowbite 官方文档中 Qwik 集成章节，完整讲解如何
UI组件前端Django 项目集成 daisyUI：无需 Node.js 的 Tailwind CSS 组件库安装指南
Django 项目集成 daisyUI：无需 Node.js 的 Tailwind CSS 组件库安装指南 daisyUI 是当前流行的开源 Tailwind
前端UI组件Vitest 模拟定时器（Fake Timers）完全指南：用 `vi.useFakeTimers` 掌控时间，加速超时与轮询测试
Vitest 模拟定时器（Fake Timers）完全指南：用 vi.useFakeTimers 掌控时间，加速超时与轮询测试 在测试涉及 setTimeout
UI组件前端
上一篇：系统日志轮转：bash-guide中的logrotate命令
下一篇：跑通 Playwright CLI：从 3 条安装命令到截图、录屏与 trace 的完整路径
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考