v5 Compare with official Tailwind plug-in

The goal of the v5 generator is not to replace the CSS-first semantics of Tailwind CSS v4, but to add small program-specific output capabilities to the same Tailwind input. target: 'web' should maintain the same origin as the official Tailwind browser product; target: 'weapp' should generate the CSS required and compatible with the applet based on the same classSet.

One-to-one correspondence matrix

Capabilities	@tailwindcss/vite	weapp-tailwindcss/vite
CSS-first portal	@import "tailwindcss"	Same portal
@source scan	Scan templates and scripts	Bind the entry and reuse v4 source through
@theme / @config	Generate Tailwind token	Reuse the same token
Candidate class generation	Scanner candidates	runtime classSet accurate hit candidates
Web Products	Browser CSS	target: 'web'
Mini program product	Not supported	target: 'weapp'
Failure handling	Failure when compilation fails	Default build failure
Dependency tracking / HMR	addWatchFile / hotUpdate	cssEntries / dependencies / HMR

Vite comparison

Official writing:

vite.config.ts

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

v5 applet writing method:

vite.config.ts

import path from 'node:path'
import { defineConfig } from 'vite'
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

export default defineConfig({
  plugins: [
    WeappTailwindcss({
      cssOptions: {
        rem2rpx: true,
      },
      cssEntries: [
        path.resolve(__dirname, 'src/app.css'),
      ],
    }),
  ],
})

Do not register @tailwindcss/vite and WeappTailwindcss at the same time in the same applet build. If the project requires H5/Web products, you can continue to use the official Tailwind plug-in in the Web-specific build; if you want to use weapp-tailwindcss for Web control testing, switch generator.target to web. At this time, the generator product retains the browser selector, hover media, and original Tailwind escape; the mini program production build must switch back to the default weapp.

Regression testing

The warehouse uses packages/weapp-tailwindcss/test/v5/official-tailwind-plugin-parity.test.ts to overwrite this matrix:

• The same CSS-first input under target: 'web', the core utility selector is consistent with the official Tailwind product.
• The two columns @tailwindcss/vite and Vite generator in the matrix must all have corresponding entries.
• Tailwind CSS 4 quick start page and v5 migration guide continue to cover real demo configurations of uni-app Vue Vite, Taro Vite and Mpx.
• Verify these comparisons through your target project's build artifacts and real runtime behavior so the sample code stays aligned with the final styles.