weapp-tailwindcss

## WeApp-TailwindCSS Implementation Guide for [COMPANY]'s E-Commerce Mini Program

### 1. Project Setup
- Initialize your WeChat Mini Program project (if not already done):
  ```bash
  npm init miniapp
  cd your-project
  ```
- Install `weapp-tailwindcss` and Tailwind CSS:
  ```bash
  npm install weapp-tailwindcss tailwindcss postcss autoprefixer --save-dev
  ```

### 2. Configuration Files
Create/modify these files in your project root:

**`tailwind.config.js`**
```javascript
module.exports = {
  content: ['./**/*.{wxml,wxss,js,ts}'],
  theme: {
    extend: {
      colors: {
        primary: '#FF6B6B',
      },
    },
  },
  plugins: [],
}
```

**`postcss.config.js`**
```javascript
module.exports = {
  plugins: {
    'weapp-tailwindcss': {},
    autoprefixer: {},
  },
}
```

### 3. Build Process
- Add this script to your `package.json`:
  ```json
  "scripts": {
    "build:css": "tailwindcss -i ./src/styles/app.css -o ./dist/app.wxss --watch"
  }
  ```
- Run the build:
  ```bash
  npm run build:css
  ```

### 4. Usage in Mini Program
- Import the generated `.wxss` file in your pages:
  ```wxml
  <view class="bg-primary text-white p-4">Welcome to [COMPANY]!</view>
  ```

### 5. Testing & Deployment
- Test the styling in WeChat Developer Tools
- Deploy using:
  ```bash
  npm run build
  miniprogram-ci upload --project-path ./dist --upload-desc "[DATA]" --version "1.0.0"
  ```

**Note:** Ensure your WeChat Mini Program appid is properly configured in `project.config.json`.