Skip to main content

@weapp-tailwindcss/reset

@weapp-tailwindcss/reset is an independent reset resource package, suitable for direct import in the entry style of the uni-app / Taro project, and can also be used directly as a Tailwind plug-in.

It now provides both capabilities:

  • Static style file collection, directly import '@weapp-tailwindcss/reset/xxx.css'
  • Tailwind plug-in entry, inject base rules through reset({...}) or @plugin

In order to be compatible with old projects, weapp-tailwindcss/reset still retains the export; but the new plug-in implementation has been moved to @weapp-tailwindcss/reset.

Install​

npm install -D @weapp-tailwindcss/reset

Currently provided reset​

PathDescriptionApplicable scenarios
normalize.cssCross-end static version of normalize.cssConservative, close to browser default behavior
modern-normalize.cssCross-end static version of modern-normalizeWant a more modern, lightweight baseline
eric-meyer.cssClassic Eric Meyer resetNeed a strong reset and completely take over the basic style yourself
sanitize/sanitize.css
sanitize/assets.cssSupplementary resource size constraints for sanitize.cssUsed in conjunction with the above
tailwind.cssStatic version of Tailwind preflightWant to directly use Tailwind style reset

Used as a Tailwind plug-in​

import reset from '@weapp-tailwindcss/reset'

export default {
  plugins: [
    reset({
      preset: 'all',
      listReset: false,
    }),
  ],
}

By default, the plugin remains compatible with the old behavior and only injects button and image. If you want to open more built-in resets in batches, you can use:

  • preset: 'form'
  • preset: 'content'
  • preset: 'media'
  • preset: 'all'

Built-in resets for additional control include:

  • inputReset
  • textareaReset
  • listReset
  • navigatorReset
  • videoReset

If you are already using weapp-tailwindcss/reset in your project, there is no need to migrate; the behavior of the two remains the same, but the actual implementation now belongs to this package.

uni-app usage​

Typically imported in src/main.ts, App.vue or global entry styles:

import '@weapp-tailwindcss/reset/uni-app/button-after.css'
import '@weapp-tailwindcss/reset/uni-app/tailwind-compat.css'

If you use sanitize.css, you usually need to import both files together:

import '@weapp-tailwindcss/reset/uni-app/sanitize/sanitize.css'
import '@weapp-tailwindcss/reset/uni-app/sanitize/assets.css'

Taro usage​

Usually imported in src/app.tsx or entry style:

import '@weapp-tailwindcss/reset/taro/button-after.css'
import '@weapp-tailwindcss/reset/taro/tailwind-compat.css'

Select suggestions​

  • The component library has been used in the project, priority is given to button-after.css + tailwind-compat.css
  • If you want to be close to Tailwind's default preflight, select tailwind.css
  • If you want to be more conservative, choose modern-normalize.css or normalize.css
  • If you want to forcefully clear the default style, select eric-meyer.css
  • For more complete default security values and resource constraints, select sanitize/sanitize.css + sanitize/assets.css

Typical combination​

import '@weapp-tailwindcss/reset/uni-app/button-after.css'
import '@weapp-tailwindcss/reset/uni-app/tailwind-compat.css'

The above group is usually suitable for projects with component libraries.

import '@weapp-tailwindcss/reset/taro/modern-normalize.css'

The above group is usually suitable for projects that just want to add a lightweight global baseline.

Relationship with the main package style​

@weapp-tailwindcss/reset will not replace the main package products weapp-tailwindcss/index.css and preflight.css. It is more like an "optional reset warehouse" that allows you to decide which set of baseline styles to import at the entrance.

If you are already using weapp-tailwindcss/index.css, whether you want to introduce additional resets here needs to be decided based on your project baseline and component library compatibility. It is not recommended to stack multiple sets of resets without thinking.