NeXTSTEP Programming Mastermind

    tailwindcss-miniprogram-preset
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    tailwindcss-miniprogram-preset

    tailwindcss-preset for miniprogram tailwindcss 小程序版本预设

    tailwindcss 来改善你的小程序开发体验吧

    功能

    大部分有用的 tailwindcss utilities 兼容小程序 + rem 转 rpx (默认 1rem = 32rpx)

    migration(From v1 -> v2)

    // # 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

    npm i -D tailwindcss-miniprogram-preset
    # or
    yarn add -D tailwindcss-miniprogram-preset

    Then

    Installing Tailwind CSS as a PostCSS plugin

    and npx tailwindcss init

    then add tailwindcss-miniprogram-preset into your presets:

    // tailwind.config.js
    const {
      defaultPreset,
      createPreset
    } = require('tailwindcss-miniprogram-preset')
    module.exports = {
      presets: [defaultPreset]
      // ...
    }

    createPreset 这个方法,可以根据配置创建自定义的预设,以及是否启用 rem2rpx,可配合其他 postcss 插件使用,如postcss-rem-to-responsive-pixel

    Then import tailwindcss

    /* @tailwind base;
    @tailwind components; */
    @tailwind utilities;

    or Using with Preprocessors

    // uni-app App.vue 公共部分
    // 小程序不需要 'base' 'components'
    // @import 'tailwindcss/base';
    // @import 'tailwindcss/components';
    // 只需引入工具类
    @import 'tailwindcss/utilities';

    最佳实践

    建议配合 vscode 插件 Tailwind CSS IntelliSense 使用

    可以根据配置自动生成智能提示,可有效提升开发体验

    使用 uni-app 的朋友可以直接使用提供的模板

    默认配置

    默认配置都可通过 tailwind 自带的 merge 策略开启, 其中

    • darkMode 默认 false
    • theme.screens 默认 false , 英文它不需要 pc 那种自适应边界
    • important 默认 true , 需要用它去覆盖原生的样式
    • purge.enabled 默认 process.env.NODE_ENV === 'production' ,可通过 NODE_ENV 环境变量,避免打包出来的 wxss 过大的问题, 开发环境默认关闭.
    • 一些 classrename 见下表

    如何关闭 rem2rpx 转化?

    createPresetrem2rpx 设置为 false 即可

    // tailwind.config.js
    presets: [
      createPreset({
        rem2rpx: false
      })
    ]

    此时需要转化为 rpx ,可以使用 postcss-rem-to-responsive-pixel

    可以达到同样效果的 postcss 配置 demo:

    // 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 只支持少量选择器

    官方文档链接

    解决方案:

    • 去除基于 :not 选择器的 corePlugins
    • 去除不支持 * 选择器的 corePlugins , 例如默认添加 '*, ::before, ::after' 的插件
    • 清空 variants (hover: focus: 这些)
    • 不启用 mode: 'jit' 即时编译模式,因为 wxml 里写 w-[762px] ,[],会被默认转义为空格,导致即时编译无效。(小程序特殊符号只支持 '-' 和 '_')

    去除自适应和无用插件

    解决方案:

    • 只使用 utilities , 不导入 basecomponents

    如何覆盖此预设配置?

    核心插件:

    corePlugins 选项根据您是将其配置为对象还是数组而表现不同。

    如果您把 corePlugins 配置为一个对象,那么它就会被跨配置合并。

    如果您把 corePlugins 配置为一个数组,它就会取代您配置的预设所提供的任何 corePlugins 配置。

    官方参考文档

    注意事项

    如果开发时,HMR 热更新不起作用,可以更改 purge 选项

    也可以直接用自定义的 purge 选项, 覆盖当前 preset

    // 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 启用状况

    Install

    npm i tailwindcss-miniprogram-preset

    DownloadsWeekly Downloads

    65

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    236 kB

    Total Files

    16

    Last publish

    Collaborators

    • icebreaker