weapp-tailwindcss/reset

weapp-tailwindcss/reset 内置了一组常用组件的 reset 规则，默认会：

• 清除所有 button 的原生样式（padding / 颜色 / border 等），让它的表现和 view / text 一致；
• 将 <image> / <img> 统一为 display: block，并限制为 max-width: 100%、height: auto。

你可以通过选项控制是否注入这些规则、改写选择器 / 声明，甚至追加自定义 reset。

ℹ️ 当你传入 .class / #id 作为选择器时，插件会自动转换为 [class~="class"] / [id="id"]，确保它们仍属于 base layer，不会破坏其他层级。

可用选项

• buttonReset?: false | ResetConfig
• imageReset?: false | ResetConfig
• extraResets?: ResetConfig[]

interface ResetConfig {
  selectors?: string[]        // 支持元素 / 类名 / ID
  declarations?: Record<string, string | number | false>
  pseudo?: Record<string, string | number | false> // 注入到 ::after
}

设置为 false 即可关闭对应默认 reset；当提供类名 / ID 时会自动转换为 [class~="foo"] / [id="bar"]。

Tailwind CSS v3 用法

tailwind.config.ts

import reset from 'weapp-tailwindcss/reset'

export default {
  plugins: [
    // 默认注入 button/image reset
    reset(),

    // 完全自定义
    reset({
      buttonReset: {
        selectors: ['.wx-reset-btn', '#primary-btn'],
        declarations: {
          padding: '0',
          backgroundColor: 'transparent',
        },
        pseudo: {
          border: 'none',
        },
      },
      imageReset: {
        selectors: ['.wx-reset-image'],
        declarations: {
          display: 'inline-block',
          borderWidth: '0',
        },
      },
      extraResets: [
        {
          selectors: ['.wx-reset-view'],
          declarations: {
            display: 'block',
            borderWidth: '0',
          },
          pseudo: {
            borderColor: 'transparent',
          },
        },
      ],
    }),
  ],
}

关闭默认 reset：

reset({
  buttonReset: false,
  imageReset: false,
})

Tailwind CSS v4 用法

在入口 CSS 中通过 @plugin 注册即可：

app.css

@plugin 'weapp-tailwindcss/reset';

@plugin 'weapp-tailwindcss/reset' ({
  buttonReset: false,
  imageReset: {
    selectors: ['.wx-reset-image'],
    declarations: {
      display: 'inline-block',
    },
  },
  extraResets: [
    {
      selectors: ['.list-reset'],
      declarations: { listStyle: 'none', margin: '0', padding: '0' },
    },
  ],
});

@import 'tailwindcss/utilities';

同样可以通过 buttonReset: false / imageReset: false 精准控制需要的 reset。extraResets 允许你一次性追加多个自定义规则。***