weapp-tw

/* vite.config.ts */ import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { UnifiedViteWeappTailwindcssPlugin as VitePlugin } from 'weapp-tailwindcss/vite'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), VitePlugin({ // Enable auto-conversion of `rem` units to `rpx` (WeChat Mini Program units) rem2rpx: true, // Define the base viewport width for `rpx` conversion (e.g., 750 for design drafts) viewportWidth: 750, // The 'css' option ensures that content is processed correctly // for mini-program environments and handles specific CSS transformations. css: true, // Additional options can be configured here. Refer to the official documentation: // https://tw.icebreaker.top/docs/configuration-reference/options }), ], css: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer') ], }, }, }); /* tailwind.config.js */ /** @type {import('tailwindcss').Config} */ module.exports = { // Crucially, `content` must include all files where Tailwind classes are used. // This includes templates (.vue, .wxml) and script files (.js, .ts) for dynamic classes. content: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx,wxml,wxss}', ], theme: { extend: {}, }, plugins: [], corePlugins: { // Tailwind's preflight base styles can conflict with mini-program default styles. // Disabling it often provides a cleaner slate for mini-program development. preflight: false, // Ensure essential core plugins for mini-programs are enabled or configured if needed. }, };