Juora - 最小 Tailwind CSS 3 模板 preview 1

Juora - 最小 Tailwind CSS 3 模板

bookmark

Juora 是一款基于 Tailwind CSS 3 的极简风格响应式模板，专为设计、品牌类 agency 网站打造。内置作品集画廊、导航锚点滚动、滚动监听等交互功能，适合快速搭建创意机构、个人作品集或企业官网。

HTMLagencyconsultantcorporatecreativegalleryminimalphotography

项目简介

Juora 是一款基于 Tailwind CSS 3 的极简风格响应式模板，专为设计、品牌类 agency 网站打造。内置作品集画廊、导航锚点滚动、滚动监听等交互功能，适合快速搭建创意机构、个人作品集或企业官网。

技术栈

  • Tailwind CSS ^3.4.1
  • Gulp 4（构建工具）
  • jQuery + scrollspy 插件
  • Yarn（包管理）
  • animate.css、preline、shufflejs（UI/交互库）
  • @tailwindcss/forms

项目结构

text
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 目录，部署时只需上传该目录内容。
help_outline

常见问题