安装与配置
小程序使用?tailwindcss?只需三步:
第一步 - 安装
yarn?add?-D?tailwindcss@latest?postcss@latest?autoprefixer@latest?tailwindcss-miniprogram-preset@latest#?ornpm?install?-D?tailwindcss@latest?postcss@latest?autoprefixer@latest?tailwindcss-miniprogram-preset@latest
一些框架，如vue/cli,uni-app,**nuxt2(有postcss8插件)**用的Postcss7旧版本，则使用postcss7-compatibility-build
第二步 - 创建配置
创建
//?postcss.config.jsmodule.exports?=?{
??plugins:?{
????tailwindcss:?{},
????autoprefixer:?{},
??}}
初始化
npx?tailwindcss?init
使用
//?tailwind.config.jsconst?{?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?dirsdist?#?打包输出目录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?模式安排上。