评论

tailwindcss and postcss for 小程序第二个大版本发布啦！

2021-11-27
3990浏览
2评论

tailwindcss and postcss for 小程序第二个大版本发布啦！

tailwindcss and postcss for 小程序第二个大版本发布啦！

安装与配置

小程序使用 tailwindcss 只需三步:

第一步 - 安装

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest
# or
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest

一些框架，如vue/cli,uni-app,nuxt2(有postcss8插件)用的Postcss7旧版本，则使用postcss7-compatibility-build

第二步 - 创建配置

创建 postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

初始化 tailwindcss 配置文件

npx tailwindcss init

使用 preset:

// tailwind.config.js
const { defaultPreset } = require('tailwindcss-miniprogram-preset')

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  //...
  presets: [defaultPreset]
  //...
}

第三步 - 引用 [wx|c|sc|le]ss

// app.scss
@tailwind utilities;

然后在应用入口，如 App.vue 导入它即可。

接下来就能够看到，tailwindcss 愉快的运转了，安装 vscode 插件Tailwind CSS IntelliSense 后，所有的自定义的智能提示也出现了。

点击查看更详细的文档和Demo

一些细节

此 preset 自动带了一套 rem2rpx 的机制,开发者可以通过:

const { createPreset } = require('tailwindcss-miniprogram-preset')

进行配置，如果您不想要此功能，可以把 rem2rpx 设置为 false

presets: [createPreset({
  rem2rpx: false
})]

如果此时需要更加强大，且自定义的 rem2rpx 效果，可以使用 postcss-rem-to-responsive-pixel

它是一个用 ts 写的 postcss plugin,兼容 postcss8 ，它能够让我们更加轻松的定制我们的转化策略。

如何使用呢?

在我们关闭 preset 的 rem2rpx 转化后，我们可以在 postcss.config.js 设置:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('tailwindcss'),
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32, // 1rem = 32rpx
      propList: ['*'], // 所有的属性
      transformUnit: 'rpx' // 转换单位为 rpx , 默认为 px
    })
  ]
}

这样也可以轻松愉快的达到效果，更多的配置请看文档

一些开发的碎碎念

最近在使用 Typescript 重构之前的开源项目和编写新的项目。

正好 tailwindcss-miniprogram-preset 当初是使用 js 撰写的，于是正好趁这个机会重构一下。

步骤

正如把大象塞进冰箱，只需要三步。js 项目转为 ts 项目也分几步走。

首先，我先撰写了一个 for npm cjs lib 的模板 npm-lib-template。

它是一个使用 ts + rollup 进行打包的工具链，主要的工作为 将 src 中代码引用到的文件，通过 tsc node-resolve,alias 等等加工，最后输出为 cjs,esm 和 types，同时声明在 package.json 内( main,module,types)，这样开发者在使用时候，不论 package.json->type ，不论 require，还是 import ... from ，都能够找到准确的包。

在参照 npm-lib-template 生成项目后，我们即可编写代码。

其中代码目录大致如下:

# region dirs
dist # 打包输出目录
src # 源代码目录
bin # bin 的入口，使用 dist中的方法，一般就一行
examples # 案例目录
scripts # 辅助脚本目录
test # 测试目录，这里使用的是 jest
# 除此之外还有类似 .github , coverage 的临时目录
# endregion dirs

开始迁移

js -> ts 很简单，类型补全 + cjs->esm 就行。
但是却在tsconfig.json配置项这里遇到了坑。

发布beta版本

我们尚在测试中的 2.x 版本是不可能直接发布到 npm 的 latest 的，假如这时候的包存在一些Fatal级别的错误，用户在获取最新或者升级的时候，会获取到错误的版本，导致崩溃。

这时候我们就需要:

yarn pulish --tag beta

同时可以把要发布的版本号设置为: 2.0.0-beta.[x]

这样，我们获取的时候，只需要 yarn add -D [pkgName]@beta 就可以了。

发布v2

v2 相比 v1 版本，代码整体优化了许多，同时配置项更加的灵活，以适配不同的场景。

其中，用户可以自己传参去生成 preset 了，我们在 tailwind.config.js 中导入时,除了 defaultPreset 还有一个 createPreset，其中 defaultPreset 即 v1 版本的默认导出，
而 createPreset 就可以根据传的配置项，来决定:

  1. 是否需要 rem -> rpx

假如不需要这个预设来进行转化，且又有转化的需求，可以使用 postcss-rem-to-responsive-pixel 这个 postcss 插件。
在关闭预设的 rem2rpx 配置项后，只需要把这个插件运行在 tailwindcss 插件后就行(postcss插件的优先级)。

  1. 配置 rem -> rpx 的 rootValue 是多少，默认为 32
  2. 配置其他的一些选项

未来开发计划

下一步，把 jit 模式安排上。

点赞 3
收藏
评论

2 个评论

  • 理想
    理想
    2021-12-16

    我现在，安装执行：`npm run install` ，开发过程执行：`npm run dev`，发布过程执行 `npm run build`。

    现在就我下面的代码，感觉在 `tailwind.config.js` 注释了 `purge,presets` 两行就没有用到 `tailwindcss-miniprogram-preset`，但是我感觉写代码，似乎也正常，我就有点懵了。我基础比较弱，楼主能否帮忙解答一下疑惑

    目录结果：
--根目录
  --miniprogram
    --app.wxss
    --output.wxss
    --build.wxss
  --package.json
  --tailwind.config.js
  --postcss.config.js
  --tailwind.css

    package.json 脚本如下：

    {
  "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'
    2021-12-16
    赞同
    回复 1
    • 理想
      理想
      2021-12-16
      build.wxss 暂时还没有用到，是打算发布小程序时用它
      2021-12-16
      赞
      回复
  • 理想
    理想
    2021-12-16

    问个问题，我照楼主的，安装了 各个框架，最后 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],// 自定义基本配置
  important: true, // 需要用它去覆盖原生的样式
}


    现在，编码过程，我是在终端执行命令：

    npx tailwindcss --no-autoprefixer -i ./tailwind.css -o ./miniprogram/output.wxss --watch


    这个时候，上面配置模式，编写代码，保存后，watch 没有反应，这个时候，先终止watch，注释掉purge 和 presets，这两行，然后再开启watch，这时 output.wxss 会有很多代码，这时再把两行注释去掉，再编辑保存，就只会出现刚才class后面输入的。内容，后面每次保存都能 watch，还有一个就是在启用 purge瞬间，会删除之前已经写到 output.wxss 的内容


    请问，我如何解决 watch 与注释的调整的问题呢？

    2021-12-16
    赞同
    回复 1
    • 理想
      理想
      2021-12-16
      watch 状态，启用 purge output.wxss 就清空了，怎么 才能把使用到的tailwind css 重新写到 output.wxss，懵，还没学会hello word。搞了两天了
      2021-12-16
      赞
      回复
请 登录 后发表内容
作者介绍

文章标签