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
后,所有的自定义的智能提示也出现了。
一些细节
此 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
就可以根据传的配置项,来决定:
- 是否需要
rem -> rpx
假如不需要这个预设来进行转化,且又有转化的需求,可以使用
postcss-rem-to-responsive-pixel
这个postcss
插件。
在关闭预设的rem2rpx
配置项后,只需要把这个插件运行在tailwindcss
插件后就行(postcss插件的优先级)。
- 配置
rem -> rpx
的rootValue
是多少,默认为32
- 配置其他的一些选项
未来开发计划
下一步,把 jit
模式安排上。
我现在,安装执行:`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](/user/latest) postcss[@latest](/user/latest) postcss-cli[@latest](/user/latest) autoprefixer[@latest](/user/latest) tailwindcss-miniprogram-preset[@latest](/user/latest) postcss-rem-to-responsive-pixel[@latest](/user/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](/user/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](/user/tailwind) base;
[@tailwind](/user/tailwind) components;*/
[@tailwind](/user/tailwind) utilities;
app.wxss 代码如下
/*省略其它代码*/
[@import](/user/import) 'output.wxss'
问个问题,我照楼主的,安装了 各个框架,最后 tailwind.config.js 配置如下:
// tailwind.config.js
const {
defaultPreset,
createPreset
} = require('tailwindcss-miniprogram-preset')
// createPreset 这个方法,可以根据配置创建自定义的预设,以及是否启用 rem2rpx,可配合其他 postcss 插件使用,如postcss-rem-to-responsive-pixel
/** [@type](/user/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 与注释的调整的问题呢?