Opatix - Tailwind CSS 3 管理布局和 UI 工具包模板 preview 1

Opatix - Tailwind CSS 3 管理布局和 UI 工具包模板

bookmark

Opatix 是一套基于 Tailwind CSS 3 的后台管理模板与 UI 组件库，包含仪表盘、表单、图表、表格、地图等完整页面示例，适合快速搭建企业级管理后台或 SaaS 产品界面。模板使用 Gulp 进行构建自动化，支持 SCSS 和 PostCSS。

HTML

项目简介

Opatix 是一套基于 Tailwind CSS 3 的后台管理模板与 UI 组件库，包含仪表盘、表单、图表、表格、地图等完整页面示例，适合快速搭建企业级管理后台或 SaaS 产品界面。模板使用 Gulp 进行构建自动化，支持 SCSS 和 PostCSS。

技术栈

  • Tailwind CSS 3.4.x
  • Gulp 4.x（构建工具）
  • SCSS / PostCSS
  • Chart.js、ApexCharts、Morris.js（图表）
  • DataTables（表格）
  • FullCalendar（日历）
  • Google Maps / JSVectorMap（地图）
  • Quill（富文本编辑器）
  • Dropzone（文件上传）
  • SweetAlert2、Preline UI（交互组件）

项目结构

text
Admin/
  gulpfile.js          # Gulp 构建配置
  package.json         # 依赖声明
  tailwind.config.js  # Tailwind CSS 配置
  yarn.lock
  src/                 # 页面源文件
    index.html         # 仪表盘首页
    starter-page.html  # 空白起始页
    app-calendar.html  # 日历页面
    app-contacts.html  # 联系人管理
    app-gallery.html   # 图库页面
    app-plans.html     # 套餐管理
    charts-apex.html   # Apex 图表
    tables-basic.html  # 基础表格
    forms-*.html       # 各类表单页面（8 个）
    ui-*.html          # UI 组件示例（18 个）
    icons.html         # 图标展示
    maps-vector.html   # 矢量地图
Documentation/
  index.html           # 在线文档入口

核心文件说明

  • src/index.html — 仪表盘首页，展示统计卡片、收入图表与团队活动
  • src/starter-page.html — 空白起始页，可作为新页面的模板基础
  • gulpfile.js — Gulp 任务定义，包含编译、压缩、热更新等流程
  • tailwind.config.js — Tailwind CSS 主题配置与插件扩展
  • package.json — 完整依赖清单，涵盖 UI 组件、图表库与构建工具
  • Documentation/index.html — 模板使用文档，附有截图与步骤说明

快速开始

bash
# 安装 Node.js（建议 v18+）

# 全局安装 Gulp CLI
npm install gulp -g

# 进入 Admin 目录安装依赖
cd Admin
yarn install

# 启动开发服务器（编译 + 热更新）
gulp

# 仅构建生产版本
gulp build

使用建议

建议在 src 目录下基于 starter-page.html 复制新建页面，通过修改 partials 中的模块文件（侧边栏、顶栏、页脚）来实现全局布局统一。生产部署时使用 gulp build 生成压缩资源。

help_outline

常见问题