Juora - 最小 Tailwind CSS 3 模板

# 项目简介 Juora 是一款基于 Tailwind CSS 3 的极简风格响应式模板，专为设计、品牌类 agency 网站打造。内置作品集画廊、导航锚点滚动、滚动监听等交互功能，适合快速搭建创意机构、个人作品集或企业官网。 ## 技术栈 - Tailwind CSS ^3.4.1 - Gulp 4（构建工具） - jQuery + scrollspy 插件 - Yarn（包管理） - animate.css、preline、shufflejs（UI/交互库） - @tailwindcss/forms ## 项目结构 ``` Juora_v1.0/ ├── HTML/ # 生产环境源码 │ ├── src/ # HTML 页面源文件 │ │ ├── index.html │ │ ├── about.html │ │ ├── blog.html │ │ ├── contact.html │ │ ├── services.html │ │ ├── work.html │ │ └── work-detail.html │ ├── gulpfile.js # Gulp 构建配置 │ ├── package.json │ └── tailwind.config.js # Tailwind 配置文件 ├── Documentation/ # 官方文档（含示例） │ ├── index.html │ ├── css/styles.css │ └── js/app.js ``` ## 核心文件说明 - `HTML/src/index.html` — 首页入口，含 Hero 区、作品集筛选画廊模块 - `HTML/gulpfile.js` — Gulp 自动化构建流程（编译 Tailwind、压缩 CSS/JS、热更新） - `HTML/package.json` — 项目依赖与脚本定义 - `HTML/tailwind.config.js` — Tailwind CSS 配置，可自定义主题色与插件 - `HTML/src/work.html` — 作品展示页面（带分类筛选） - `Documentation/js/app.js` — 滚动锚点与 scrollspy 逻辑 ## 快速开始 ```bash cd Juora_v1.0/HTML # 安装依赖（推荐使用 Yarn） yarn install # 启动开发服务器（热更新 + BrowserSync） yarn dev # 构建生产版本 yarn build ``` ## 使用建议 - 模板内置 `shufflejs` 实现作品集筛选，可按 Natural、Creative、Personal、Photography 四类分类展示。 - 如需修改主题色或断点，直接编辑 `tailwind.config.js` 中的 `theme.extend` 即可。 - 生产构建产物默认输出至 `HTML/dist` 目录，部署时只需上传该目录内容。