Mailwind 项目使用教程

1. 项目的目录结构及介绍

Mailwind 是一个使用 Tailwind CSS 设计 HTML 邮件的开源项目。以下是项目的目录结构及其介绍：

mailwind/
├── src/
│   ├── gitignore
│   ├── LICENSE
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
├── email.html
├── style.css
├── tailwind.config.js

• src/：包含项目的源代码文件。
  • gitignore：Git 忽略文件。
  • LICENSE：项目许可证文件。
  • README.md：项目说明文档。
  • package-lock.json：锁定依赖版本的文件。
  • package.json：项目的依赖和脚本配置文件。
• email.html：示例 HTML 邮件文件。
• style.css：生成的 CSS 文件。
• tailwind.config.js：Tailwind CSS 配置文件。

2. 项目的启动文件介绍

Mailwind 项目的启动文件主要是 package.json 文件中的脚本配置。以下是 package.json 文件中的相关内容：

{
  "scripts": {
    "start": "mailwind --input-html email.html --output-css style.css --output-html email-inlined.html"
  }
}

通过运行 npm start 命令，可以启动项目并生成相应的 CSS 和内联 HTML 文件。

3. 项目的配置文件介绍

Mailwind 项目的主要配置文件是 tailwind.config.js。以下是该文件的内容示例：

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'lg': '18px',
      },
      fontWeight: {
        'bold': '700',
      }
    }
  }
}

该配置文件用于自定义 Tailwind CSS 的样式，例如字体大小和字体粗细。在默认配置文件中，所有单位都已更改为像素，这适用于 HTML 邮件的设计需求。

通过以上配置，可以生成符合需求的 CSS 和内联 HTML 文件，从而设计出美观的 HTML 邮件。