# wechat_mp_tailwindcss_course

**Repository Path**: zhaoquan/wechat_mp_tailwindcss_course

## Basic Information

- **Project Name**: wechat_mp_tailwindcss_course
- **Description**: 微信小程序使用大热的 Tailwind CSS 框架的入门教程。自己从0开始的教程，因为看官方文档有些难懂，自己一步一步做，然后写成教程，希望能帮到大家，也欢迎大家能接着pull 高级或者不足的地方
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2021-12-15
- **Last Updated**: 2023-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序引入 Tailwind CSS 的文稿

> 我想使用 Tailwind CSS 是觉得原生开发给类命名太累了，英语基础差，笑...
>
> 这是我自己从 0 开始入门的文稿，因为看官方文档有些难懂，自己一步一步做，然后写成文稿，希望能帮到大家，也欢迎大家能 pull 不足的地方或pull高级用法
>
> 使用这个框架，首先需要在 `IDE` 安装扩展 `Tailwind CSS IntelliSense`，其次是有一定 css 基础，比如需要设置外边距，得知道 `CSS` 属性叫 `margin`，输入时在 `class=""`上输入属性首字母 `m`，如：`class='m'`，等一下扩展就提提示`m-0，m-1，...`，输入 `m-1` 鼠标悬停到 `m-1`上面，扩展就会提示：`margin:8px`，我们就知道，`m-1` 其实就是 `margin:8px`。当然早期会有很高频率会输入首字母得不到要的东西，这个时候，就需要到官网，左上角有个快速搜索功能，输入如：background color，margin，flex，grid等，查询出 Tailwind CSS 支持的写法，照抄即可。


## Tailwind CSS 介绍
> Tailwind CSS 作者说，不实际使用，无法体会它的好处。嗯，真香，需要实际使用几天。

开始写代码时

首先，安装 IDE 扩展，VSCode 上搜 `Tailwind CSS IntelliSense`，开发时，在 `wxml` 某个 `view` 需要写红色背景，写代码如：`class='bg-red-500'` 即可，输入 `bg` 扩展就会弹出各种颜色选项可选，如果要输入红色，就继续输入 `-red`，如 `class='bg-red'`，这时扩展会继续提示各种红色可选，如果我们选500这个值，最后就是：`class='bg-red-500'`。

> 注意安装扩展后，默认不支持 wxml，需要打开扩展上的齿轮，设置里找到第四项 Include Languages，点添加项，左侧填wxml，右侧填html

微信开发者工具直接搜是没有这个扩展的，但是它提供可以导入 VSCode 已安装的扩展，点微信开发者工具扩展搜索框右上角的...就看到导入入口了（如果没有这个入口，就升级到最新稳定版开发者工具），同样也要设置 Include Languages


其次，是打开[官方网站](https://www.tailwindcss.cn/)左上角的“快速搜索一切”，如搜 background color，进去看，会有很多颜色对应的 Tailwind CSS 代码，如 `bg-red-500`。


>
> 中文文档翻译，以及样式排版混乱，逻辑乱，建议看英文官网，看不懂，可以用浏览器翻译功能
>
> 另外是看的过程像我一样整理一篇别人能看懂的伪教程，会理解得深入一些：安装 -编写项目代码 -生成部署代码
>
> [Tailwind CSS 英文官网文档](https://tailwindcss.com/docs/installation)
>
> [Tailwind CSS 中文官网文档](https://www.tailwindcss.cn/)，这里仅建议在开发过程使用左上角的搜索，实际阅读建议看英文网站，不方便可以用浏览器的翻译功能。
>


## 第一步：安装

有四种安装方式：

1. Tailwind CLI tool(建议入门时从这个开始); 

2. Tailwind CSS 作为 PostCSS 插件安装（是与 webpack，Rollup，Vite 和 Parcel 等构建工具集成的最无缝方式）；

3. 安装特定框架的 Tailwind CSS，如 Vite，Next.js等（没有找到框架请使用前两种）；

4. Play CDN （在线学习）

这里使用第一种，因为还没采用构建工具，不想耦合，过高学习，造成学习困难。`-D` 为在当前项目安装，安装前，命令行路径应该改在项目根目录，如项目文件夹叫 `student`，命令行可能为：`PS D:\student>`

我项目伪目录的结构是：
```
--项目顶级目录名(如：student)
  --miniprogram
    --app.wxss
    --...
```
下面按第一种安装方式进行：
```
npm install -D tailwindcss@latest
```
>您终端中可能像这样：
>
`PS D:\student>npm install -D tailwindcss@latest`
>
>
> 第二种安装命令，同时安装 tailwindcss postcss autoprefixer：
```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
>
> 第二种卸载命令：
```
npm uninstall tailwindcss postcss autoprefixer
```


## 第二步：创建自定义配置文件

这将会在您的工程根目录创建一个最小的 `tailwind.config.js` 文件。
> 注意这里是 `npx`
```
npx tailwindcss init
```
创建完后伪目录结构：
```
--项目顶级目录名
  --miniprogram
    --app.wxss
  --tailwind.config.js
```
这时 tailwind.config.js 代码如下：
```
// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## 第三步 配置模板路径

在第二步的 tailwind.config.js 里的 content 将路径添加到文件中的所有模板文件.
>（官方示例）：`content: ["./src/**/*.{html,js}"],`
> 小程序改为：`content: ["./miniprogram/**/*.{wxml,js}"],` ，这里的作用是，后续在 `miniprogram` 目录下的 `wxml,js` 里编写 TailWind CSS 代码，都会被后面第五步的命令检测到
>

```
// tailwind.config.js
module.exports = {
  content: ["./miniprogram/**/*.{wxml,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```


## 第四步：包含 Tailwind 到您的 CSS 中

在根目录创建一个 tailwind.css 文件（微信小程序里后缀也写.css），伪目录结构：
```
--项目顶级目录名
  --miniprogram
    --app.wxss
  --tailwind.css
  --tailwind.config.js
```

tailwind.css 内容填为：
```
/* ./your-css-folder/styles.css */
/* 前两项在小程序用不到，暂时注释掉*/
/*
@tailwind base;
@tailwind components;
*/
@tailwind utilities;
```
> 使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式，这个文件作为你后续款式根底文件



## 第五步：执行命令生成 css

生成一个默认的 tailwindcss 款式文件，命令如：
```
npx tailwindcss --no-autoprefixer -i ./tailwind.css -o ./miniprogram/output.wxss --watch
```
命令解释：
- 小程序不涉及到浏览器的兼容性问题，不需要生成各浏览器内核前缀，，为了减少文件大小加： `--no-autoprefixer`
- 注意根据项目改:路径、文件名以及后缀改为：`./miniprogram/output.wxss`
- 加 --watch 是可以每次保存就生成，方便预览，第一次启动命令我这里大概300ms，后续保存编写的文件触发此 watch，耗时大概在20ms
```
--项目顶级目录名
  --miniprogram
    -- output.wxss
    -- app.wxss
  --tailwind.css
  --tailwind.config.js
```

## 第六步：开始在 `HTML` 中使用 `Tailwind CSS 生成的样式文件

如果是网站，将第五步输出的 `output.css`后缀改为`.css`，文件用 `link` 标签放到 `html`

如果是微信小程序，在 app.wxss 中输入 `@import 'output.wxss'`，注意路径写法，我这里目录结果output.wxss与app.wxss在同一目录，如：
```
--项目顶级目录名
  --miniprogram
    -- output.wxss
    -- app.wxss
  --tailwind.css
  --tailwind.config.js
```

> 开始在自己的 wxml 页面编写代码，如需要一个红色背景:`class="bg-red-500"`


## 第七步：处理微信小程序不兼容
第六步做完，不出意外，就要出意外。

编译后，就会提示 第十行 * 编译错误，这里先将就处理，就是去output.wxss 把第十行的*删除，保存,重新，编译，背景色就出来了。

但是这个时候终端的命令还在 watch，只要我们在项目文件里另外写： class='p-0'，也就是 `padding:0px;` 一保存，又报错了，`*` 又出来了。

这里可以临时终止一下命令，按：ctrl + c 组合键，输入Y，即可终止，删除新生成的*，再编译。

到此证明 Tailwind CSS 可以工作，但是微信小程序不行。


刚在微信开发者社区搜到这个，解决小程序开发的兼容问题：

建议关注这个作者[https://developers.weixin.qq.com/community/personal/oCJUsw1GWHOwOLn7MZ4Rbb8T-FVE](https://developers.weixin.qq.com/community/personal/oCJUsw1GWHOwOLn7MZ4Rbb8T-FVE)，阅读相关文章:2021.8.30发布的，2021.9.1发布定，2021.11.27发布的，以及文中用到的到的 npm ，其文档[tailwindcss-miniprogram-preset](https://www.npmjs.com/package/tailwindcss-miniprogram-preset)


## 新梳理解决兼容
这部分仔细阅读我下面的文字，还在懵逼中，只是有些许进展，感觉可以开始编程了，就分享一下。


> 经过两天的折腾，我将重新梳理的东西，安装放 package.json，顺序依次是安装：`npm run install`，开发：`npn run dev`，发布时编译：`npm run build`，编译后记得到app.wxss替换 @import...，目前感觉tailwind.config.js 注释了purge，presets 就没有用到上面这个作者做的 `tailwindcss-miniprogram-preset`，但是编码感觉正常，就写出来，编写过程，生成的output.wxss内容会比较多，比如第一次写颜色 `bg-red-500`，不合适，又改 `bg-red-300` 在output.wxss会都在，但是我们最后编程后，可以使用npm run build，生成build.wxss，就没有重复的，这时发布时，把 app.wxss 里改为 @import 'build.wxss'，就好了

我的伪目录结构：
```
--根目录
  --miniprogram
    --app.wxss
    --output.wxss
    --build.wxss
  --package.json
  --tailwind.config.js
  --postcss.config.js
  --tailwind.css
```

package.json 
> 注意，我 dev 调用的是 postcss，build 调用的是 tailwindcss，官网示例没有说要安装 postcss-cli，导致 dev 提示 postcss 不是有效命令，所以我下面的是一起安装了 postcss-cli的。还有 dev 后面的命令 -i 与 --no... 这个不能交换顺序，我也不知道为什么，反正交换会报错，大家照下面的顺序就好
```
{
  "scripts": {
    "install": "npm install -D tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest postcss-rem-to-responsive-pixel@latest",
    "uninstall": "npm uninstall tailwindcss postcss postcss-cli autoprefixer tailwindcss-miniprogram-preset postcss-rem-to-responsive-pixel",
    "build": "npx tailwindcss build  --no-autoprefixer  -i ./tailwind.css -o ./miniprogram/build.wxss --minify",
    "dev": "npx postcss -i --no-autoprefixer  ./tailwind.css -o ./miniprogram/output.wxss --watch"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "postcss-rem-to-responsive-pixel": "^5.0.2",
    "tailwindcss": "^3.0.2",
    "tailwindcss-miniprogram-preset": "^2.1.1"
  }
}

```

postcss.config.js 代码如下：
```
// postcss.config.js
module.exports = {
  // plugins: {
  //   tailwindcss: {},
  //   autoprefixer: {},
  // }
  plugins: [
    require('autoprefixer'),
    require('tailwindcss'),
    // tailwind.config.js里presets 要关闭默认转换，留意对比
    // rem2rpx需要运行在 tailwindcss 之后，PostCSS 优先级
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32, // 1rem = 32rpx
      propList: ['*'], // 所有的属性
      transformUnit: 'rpx' // 转换单位为 rpx , 默认为 px
    })
  ]
}
```

tailwind.config.js
```
// tailwind.config.js
const {
  defaultPreset,
  createPreset
} = require('tailwindcss-miniprogram-preset')
// createPreset 这个方法，可以根据配置创建自定义的预设，以及是否启用 rem2rpx，可配合其他 postcss 插件使用，如postcss-rem-to-responsive-pixel

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  // purge: defaultPreset.purge.content,
  darkMode: false, // or 'media' or 'class'
  content: ["./miniprogram/**/*.{html,wxml,js}"],
  theme: {
    extend: {},
    screens: false, //小程序它不需要 pc 那种自适应边界
  },
  plugins: [],
  // presets: [defaultPreset,createPreset({
  //   rem2rpx: false
  // })],// 自定义基本配置
  important: true, // 需要用它去覆盖原生的样式
}
```

tailwind.css 代码如下：
```
/* tailwind.css */
/* ./your-css-folder/styles.css */
/* 小程序不需要 'base' 'components' */
/*@tailwind base;
@tailwind components;*/
@tailwind utilities;
```

app.wxss 代码如下
```
/*省略其它代码*/
@import 'output.wxss'
```

## 第八步：生产优化
生产优化：加 --minify 缩小文件

最后要部署时，用如下命令生成最终文件
```
npx tailwindcss build  --no-autoprefixer  ./tailwind.css -o ./miniprogram/build.wxss --minify
```

## 第几步：小程序发布
发布时应该删除不需要打包进去的文件