@leedomjs/tailwindcss-miniprogram-preset

This package is designed for miniprogram, and transforms px to rpx. 0.25rem = 4px = 8rpx

Usage

Install

1pnpm add -D tailwindcss @leedomjs/tailwindcss-miniprogram-preset

Config tailwind.config.js

1/** @type {import('tailwindcss').Config} */
2
3const mp = require('@leedomjs/tailwindcss-miniprogram-preset')
4
5module.exports = {
6  presets: [
7    /**
8     * You can also set an object param that contains a field called `enable`.
9     * `enable` defaults to `true`, setting `enable` be `false` will enable default config of tailwindcss and disable the preset meanwhile.
10     * 
11     * mp({
12     *  enable: false
13     * })
14     */
15    mp(),
16  ],
17  content: [...],
18  theme: {
19    extend: {},
20  },
21  plugins: [],
22  ...
23}

Tips

1. Use -dv- instead of / to generate percentage
2. Use - instead of .

For example:

1<!-- w-1/2 = w-1-dv-2 -->
2<div class="w-1/2 w-1-dv-2">hello, world.</div>
3
4<!-- w-1.5 = w-1-5 -->
5<div class="w-1.5 w-1-5">hello, world.</div>

License

MIT License © 2024-present Leedom