Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonofmagic/tailwindcss-miniprogram-preset
tailwindcss-miniprogram-preset, 用 tailwindcss 来改善你的小程序开发体验吧
https://github.com/sonofmagic/tailwindcss-miniprogram-preset
miniprogram preset tailwindcss uni-app wechat-mini-program
Last synced: 2 months ago
JSON representation
tailwindcss-miniprogram-preset, 用 tailwindcss 来改善你的小程序开发体验吧
- Host: GitHub
- URL: https://github.com/sonofmagic/tailwindcss-miniprogram-preset
- Owner: sonofmagic
- License: mit
- Created: 2021-08-27T14:40:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T14:27:12.000Z (about 1 year ago)
- Last Synced: 2024-10-09T23:09:12.748Z (3 months ago)
- Topics: miniprogram, preset, tailwindcss, uni-app, wechat-mini-program
- Language: TypeScript
- Homepage:
- Size: 400 KB
- Stars: 55
- Watchers: 2
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
👉👉👉 支持 `tailwindcss jit` 引擎的 [`weapp-tailwindcss-webpack-plugin`](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin) 已经发布了，赶紧过来看看吧。
它能带给开发者最原汁原味的 `jit` 模式开发体验，无需抛弃 `[`,`]`,`/`,`#`,`.` 等特殊符号，都在代码编译打包时统一处理。相比 `tailwindcss-miniprogram-preset` 方案来说开发体验更好，也兼容更多的工具类。
# tailwindcss-miniprogram-preset
> tailwindcss-preset for miniprogram
> tailwindcss 小程序版本预设
用 `tailwindcss` 来改善你的小程序开发体验吧
## 功能
大部分有用的 tailwindcss utilities 兼容小程序 + rem 转 rpx (默认 1rem = 32rpx)
## migration(From v1 -> v2)
```js
// # v1
// tailwind.config.js
module.exports = {
presets: [require('tailwindcss-miniprogram-preset')]
// ...
}
// # v2
// tailwind.config.js
const {
defaultPreset,
createPreset
} = require('tailwindcss-miniprogram-preset')
module.exports = {
presets: [defaultPreset]
// ...
}
```
## How to use it
Installation
```sh
npm i -D tailwindcss-miniprogram-preset
# or
yarn add -D tailwindcss-miniprogram-preset
```
Then
[Installing Tailwind CSS as a PostCSS plugin](https://tailwindcss.com/docs/installation)
and `npx tailwindcss init`
then add `tailwindcss-miniprogram-preset` into your `presets`:
```js
// tailwind.config.js
const {
defaultPreset,
createPreset
} = require('tailwindcss-miniprogram-preset')
module.exports = {
presets: [defaultPreset]
// ...
}
```
> createPreset 这个方法，可以根据配置创建自定义的预设，以及是否启用 rem2rpx，可配合其他 `postcss` 插件使用，如[postcss-rem-to-responsive-pixel](https://www.npmjs.com/package/postcss-rem-to-responsive-pixel)
Then import tailwindcss
```css
/* @tailwind base;
@tailwind components; */
@tailwind utilities;
```
or Using with Preprocessors
```scss
// uni-app App.vue 公共部分
// 小程序不需要 'base' 'components'
// @import 'tailwindcss/base';
// @import 'tailwindcss/components';
// 只需引入工具类
@import 'tailwindcss/utilities';
```
## 最佳实践
建议配合 vscode 插件 [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 使用
可以根据配置自动生成智能提示,可有效提升开发体验
使用 `uni-app` 的朋友可以直接使用提供的模板
- [vue2](https://github.com/sonofmagic/uni-app-vue2-tailwind-vscode-template)
- [vue3](https://github.com/sonofmagic/uni-app-vue3-tailwind-vscode-template)
## 默认配置
> 默认配置都可通过 tailwind 自带的 merge 策略开启, 其中
- `darkMode` 默认 `false`
- `theme.screens` 默认 `false` , 英文它不需要 pc 那种自适应边界
- `important` 默认 `true` , 需要用它去覆盖原生的样式
- `purge.enabled` 默认 `process.env.NODE_ENV === 'production'` ,可通过 `NODE_ENV` 环境变量,避免打包出来的 `wxss` 过大的问题, 开发环境默认关闭.
- 一些 `class` 的 `rename` 见下表
## 如何关闭 rem2rpx 转化?
将 `createPreset` 的 `rem2rpx` 设置为 `false` 即可
```js
// tailwind.config.js
presets: [
createPreset({
rem2rpx: false
})
]
```
此时需要转化为 `rpx` ，可以使用 [`postcss-rem-to-responsive-pixel`](https://www.npmjs.com/package/postcss-rem-to-responsive-pixel)
可以达到同样效果的 `postcss` 配置 `demo`:
```js
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('tailwindcss'),
require('postcss-rem-to-responsive-pixel')({
rootValue: 32,
propList: ['*'],
transformUnit: 'rpx'
})
]
}
```
## 定制化兼容小程序的牺牲
### 小程序的 class 不支持除'-'和'\_'外的特殊符号
解决方案: 做 class rename 处理
| form | to | sample |
| ---- | ------- | ---------------------- |
| `\/` | `-div-` | `w-1/4` -> `w-1-div-4` |
| `\.` | `-dot-` | `w-1.5` -> `w-1-dot-5` |
### 小程序 wxss 只支持少量选择器
[官方文档链接](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)
解决方案:
- 去除基于 `:not` 选择器的 `corePlugins`
- 去除不支持 `*` 选择器的 `corePlugins` , 例如默认添加 `'*, ::before, ::after'` 的插件
- 清空 variants (`hover:` `focus:` 这些)
- 不启用 `mode: 'jit'` 即时编译模式，因为 `wxml` 里写 `w-[762px]` ,`[` 和 `]`,会被默认转义为空格，导致即时编译无效。(小程序特殊符号只支持 '-' 和 '\_')
### 去除自适应和无用插件
解决方案:
- 只使用 `utilities` , 不导入 `base` 和 `components`
## 如何覆盖此预设配置？
核心插件:
`corePlugins` 选项根据您是将其配置为对象还是数组而表现不同。
如果您把 `corePlugins` 配置为一个对象，那么它就会被跨配置合并。
如果您把 `corePlugins` 配置为一个数组，它就会取代您配置的预设所提供的任何 `corePlugins` 配置。
[官方参考文档](https://www.tailwindcss.cn/docs/presets)
## 注意事项
如果开发时，HMR 热更新不起作用，可以更改 `purge` 选项
也可以直接用自定义的 `purge` 选项, 覆盖当前 `preset`
```js
// tailwind.config.js
const { defaultPreset } = require('tailwindcss-miniprogram-preset')
/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
purge: defaultPreset.purge.content,
presets: [defaultPreset]
}
```
## [corePlugins 启用状况](./CorePlugins.md)