尧图网站建设 
UI组件前端【免费下载链接】flowbiteOpen-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 与 FlowbiteTailwind v4 的 CLI 编译器依赖 Node 运行时Python用于运行 Django 与 pip 安装命令。若 Python 环境中有可用的 pip可直接在终端安装 Djangopython -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, nameindex) ]这里给首页路由命名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 langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDjango Tailwind CSS Flowbite/title {% compress css %} link relstylesheet href{% static src/output.css %} {% endcompress %} /head body classbg-green-50 div classcontainer 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 classtext-3xl text-green-800Django 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 CSS2.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 监听源文件变化并实时输出编译后的 CSSnpx 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 安装 flowbitenpm 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?familyInter:wght300;400;500;600;700;800displayswap); import flowbite/src/themes/default; /* MINIMAL THEME import url(https://fonts.googleapis.com/css2?familyOpenSans:ital,wght0,300..800;1,300..800displayswap); import flowbite/src/themes/minimal; */ /* ENTERPRISE THEME import url(https://fonts.googleapis.com/css2?familySTIXTwoText:ital,wght0,400..700;1,400..700displayswap); import flowbite/src/themes/enterprise; */ /* PLAYFUL THEME import url(https://fonts.googleapis.com/css2?familyShantellSans:ital,wght0,300..800;1,300..800displayswap); import flowbite/src/themes/playful; */ /* MONO THEME import url(https://fonts.googleapis.com/css2?familyGoogleSansCode:ital,wght0,300..800;1,300..800displayswap); 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 srchttps://cdn.jsdelivr.net/npm/flowbite4.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 langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDjango Tailwind CSS Flowbite/title {% compress css %} link relstylesheet href{% static src/output.css %} {% endcompress %} /head body classbg-green-50 !-- Add this -- nav classbg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded-sm dark:bg-gray-800 div classcontainer flex flex-wrap items-center justify-between mx-auto a href{{ .Site.Params.homepage }}/ classflex items-center img src/docs/images/logo.svg classh-6 mr-3 sm:h-9 altFlowbite Logo / span classself-center text-xl font-semibold whitespace-nowrap dark:text-whiteFlowbite Django/span /a button>!-- templates/index.html -- {% extends _base.html %} {% block content %} h1 classmb-6 text-3xl text-green-800Django Tailwind CSS Flowbite/h1 div classmax-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 a href# img classrounded-t-lg src/docs/images/blog/image-1.jpg alt / /a div classp-5 a href# h5 classmb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-whiteNoteworthy technology acquisitions 2021/h5 /a p classmb-3 font-normal text-gray-600 dark:text-gray-700Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order./p a href# classinline-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 classw-4 h-4 ml-2 -mr-1 fillcurrentColor viewBox0 0 20 20 xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd dM10.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-ruleevenodd/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组件前端【免费下载链接】flowbiteOpen-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 掌控时间加速超时与轮询测试 在测试涉及 setTimeoutUI组件前端上一篇系统日志轮转bash-guide中的logrotate命令下一篇跑通 Playwright CLI从 3 条安装命令到截图、录屏与 trace 的完整路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Flowbite 与 Django 集成实战：在 Python 项目中安装 Tailwind CSS 并启用交互组件库
UI组件前端【免费下载链接】flowbiteOpen-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 与 FlowbiteTailwind v4 的 CLI 编译器依赖 Node 运行时Python用于运行 Django 与 pip 安装命令。若 Python 环境中有可用的 pip可直接在终端安装 Djangopython -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, nameindex) ]这里给首页路由命名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 langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDjango Tailwind CSS Flowbite/title {% compress css %} link relstylesheet href{% static src/output.css %} {% endcompress %} /head body classbg-green-50 div classcontainer 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 classtext-3xl text-green-800Django 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 CSS2.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 监听源文件变化并实时输出编译后的 CSSnpx 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 安装 flowbitenpm 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?familyInter:wght300;400;500;600;700;800displayswap); import flowbite/src/themes/default; /* MINIMAL THEME import url(https://fonts.googleapis.com/css2?familyOpenSans:ital,wght0,300..800;1,300..800displayswap); import flowbite/src/themes/minimal; */ /* ENTERPRISE THEME import url(https://fonts.googleapis.com/css2?familySTIXTwoText:ital,wght0,400..700;1,400..700displayswap); import flowbite/src/themes/enterprise; */ /* PLAYFUL THEME import url(https://fonts.googleapis.com/css2?familyShantellSans:ital,wght0,300..800;1,300..800displayswap); import flowbite/src/themes/playful; */ /* MONO THEME import url(https://fonts.googleapis.com/css2?familyGoogleSansCode:ital,wght0,300..800;1,300..800displayswap); 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 srchttps://cdn.jsdelivr.net/npm/flowbite4.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 langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDjango Tailwind CSS Flowbite/title {% compress css %} link relstylesheet href{% static src/output.css %} {% endcompress %} /head body classbg-green-50 !-- Add this -- nav classbg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded-sm dark:bg-gray-800 div classcontainer flex flex-wrap items-center justify-between mx-auto a href{{ .Site.Params.homepage }}/ classflex items-center img src/docs/images/logo.svg classh-6 mr-3 sm:h-9 altFlowbite Logo / span classself-center text-xl font-semibold whitespace-nowrap dark:text-whiteFlowbite Django/span /a button>!-- templates/index.html -- {% extends _base.html %} {% block content %} h1 classmb-6 text-3xl text-green-800Django Tailwind CSS Flowbite/h1 div classmax-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 a href# img classrounded-t-lg src/docs/images/blog/image-1.jpg alt / /a div classp-5 a href# h5 classmb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-whiteNoteworthy technology acquisitions 2021/h5 /a p classmb-3 font-normal text-gray-600 dark:text-gray-700Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order./p a href# classinline-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 classw-4 h-4 ml-2 -mr-1 fillcurrentColor viewBox0 0 20 20 xmlnshttp://www.w3.org/2000/svg path fill-ruleevenodd dM10.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-ruleevenodd/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组件前端【免费下载链接】flowbiteOpen-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 掌控时间加速超时与轮询测试 在测试涉及 setTimeoutUI组件前端上一篇系统日志轮转bash-guide中的logrotate命令下一篇跑通 Playwright CLI从 3 条安装命令到截图、录屏与 trace 的完整路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考