安装 taro、taillwind

版本

• @tarojs/cli：@3.6.7
• node：v16.14.2

执行命令

# 安装 taro
pnpm install -g @tarojs/cli

# taro 安装项目
taro init xx
# 或者非全局 taro 安装
npx @tarojs/cli init xx

# 定位项目
cd xx

# 安装依赖
pnpm install

# 运行项目
pnpm dev:weapp

微信开发者工具

1. 项目运行后，打开微信开发者工具，将项目根目录添加进入到工具
2. 需要注意开发者工具的项目设置：
   • 需要设置关闭 ES6 转 ES5 功能，开启可能报错
   • 需要设置关闭上传代码时样式自动补全，开启可能报错
   • 需要设置关闭代码压缩上传，开启可能报错

taro 引入 taillwind

# 安装 tailwind 及相关
tailwindcss postcss autoprefixer

# 安装插件rem 转 rpx (或 px)
pnpm add postcss-rem-to-responsive-pixel -D

# 初始化 tailwind.config.js 文件  
npx tailwindcss init

# tailwind.config.js
/** @type {import('tailwindcss').Config} */  
module.exports = {  
    // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置  
    // 不在 content 包括的文件内编写的 class，不会生成对应的工具类  
    content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],  
    corePlugins: {  
        // 不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它  
        preflight: false  
    }
}

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-rem-to-responsive-pixel': {
            // 32 意味着 1rem = 32rpx
            rootValue: 32,
            // 默认所有属性都转化
            propList: ['*'],
            // 转化的单位,可以变成 px / rpx
            transformUnit: 'rpx',
        },
    },
};

# config/index.js
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
...
mini: {
   webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              appType: 'taro'
            }]
          }
        }
      })
    }
} 
...

# app.scss
# @import 'tailwindcss/base';  
@import 'tailwindcss/utilities';

参考

• 安装taillwind
• weapp-tailwindcss
• taro的react模板