项目简介link

Nutrey 是一款基于 Tailwind CSS 构建的有机食品/杂货商城 HTML 模板，适合快速搭建电商落地页、产品展示页或购物车等常见电商场景。模板采用响应式设计，集成 Bootstrap 框架的部分样式文件。

技术栈link

• Tailwind CSS v3.4（主要样式框架）
• Bootstrap CSS（辅助样式）
• tw-elements（UI 组件库）
• Font Awesome / Flaticon（图标）
• jQuery + Owl Carousel / Slick（轮播与交互）

项目结构link

mlnutreyhtml-10/
├── downloadable/
│   ├── documentation/        # 模板使用文档
│   │   ├── index.html
│   │   └── css/style.css     # 文档页样式
│   └── nutrey/               # 主题主目录
│       ├── assets/
│       │   ├── css/          # Tailwind 输出样式
│       │   ├── js/           # 交互脚本
│       │   └── images/       # 静态资源
│       ├── index.html        # 首页入口
│       └── package.json      # Tailwind 依赖配置

核心文件说明link

• nutrey/package.json — Tailwind CSS 构建配置，定义 input/output 路径
• nutrey/assets/css/style.css — Tailwind 编译后的主样式表
• nutrey/assets/js/ — 轮播、灯箱等交互脚本目录
• nutrey/index.html — 模板首页，展示了页头、产品区等完整结构
• documentation/index.html — 官方使用文档，描述了模板部署方式

快速开始link

cd downloadable/nutrey
npm install
npm run test   # 启动 Tailwind watch 模式，监听样式变更

纯静态使用：直接用浏览器打开 index.html，或将其部署至任意 Web 服务器。

使用建议link

修改样式建议在 assets/css/ 下的源文件中调整 Tailwind 类名，而非直接改动编译后的 style.css，以保持可维护性。部署前注意替换图标字体路径和联系方式等示例内容。