关于前端:这可能是小程序使用-tailwindcss-开发的最佳方案

这可能是小程序应用 tailwindcss 开发的最佳计划
- 疾速开始
  - 一. 装置与配置 tailwindcss
    - 1. npm 装置 tailwindcss
    - 2. 把 tailwindcss 注册进 postcss.config.js
    - 3. 配置 tailwind.config.js
    - 4. 引入 tailwindcss
  - 二. 配置 rem 转 rpx
    - 为什么要配置这一步呢？
    - 配置 tailwindcss 单位转化
      - 1. postcss-rem-to-responsive-pixel (举荐)
      - 2. tailwindcss-rem2px-preset
  - 三. 装置本插件
    - taro (all frameworks)
    - uni-app (vue2/3)
    - uni-app vite(vue3)
    - 更多的框架!
- 开始开发！

笔者对 tailwindcss 的了解还算比拟到位，也写了不少的 preset/plugin 和许多的 postcss 插件。

最近这个月，我公布了 weapp-tailwindcss-webpack-plugin 的 2.x 版本，与之前的版本相比，大大加强了咱们开发者的开发体验，尤其是类 jsx 框架相干的体验。

接下来，让咱们疾速开始吧！

1. npm 装置 `tailwindcss`

# npm / yarn / pnpm 
npm install -D tailwindcss postcss autoprefixer
# 生成 tailwind.config.js 文件
npx tailwindcss init

2. 把 `tailwindcss` 注册进 `postcss.config.js`

// 创立 postcss.config.js
// 如果你应用的框架 / 工具不反对 postcss.config.js，则能够应用内联的写法
module.exports = {
  plugins: {tailwindcss: {},
    autoprefixer: {},}
}

3. 配置 `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例，具体要依据你本人我的项目的目录进行配置
  // 留神，不在 content glob 语法匹配的文件，不会生成工具类
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // ... other options
  corePlugins: {
    // 不须要 preflight，因为 preflight 次要是给 h5 的，小程序应用的独特的标签，导致 preflight 不起作用。// 如果你要同时开发小程序和 h5 端，你应该应用环境变量来管制它
    preflight: false
  }
}

4. 引入 `tailwindcss`

在你的我的项目入口引入 tailwindcss

比方 uni-app 的 App.vue

<style>
@tailwind base;
@tailwind utilities;
/* 应用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
</style>

又或者 Taro 的 app.scss

@import 'tailwindcss/base';
@import 'tailwindcss/utilities';

而后在 app.ts 里引入

Q&A: 为什么没有引入 tailwindcss/components? 是因为外面默认寄存的是 pc 端自适应相干的款式，对小程序环境来说没有用途。如果你有 @layer components 相干的工具类须要应用，能够引入。

二. 配置 `rem` 转 `rpx`

后面咱们装置配置好了 tailwindcss，接下来一步便是配置 rem 转 rpx

为什么要配置这一步呢？

这是因为 tailwindcss 外面工具类的长度单位，默认都是 rem，比方:

.m-4{margin: 1rem;}
.h-4{height: 1rem;}
/*......*/

这在 h5 环境下自适应良好。但小程序外面，咱们大部分状况都是应用 rpx 这个单位来进行自适应，所以就须要把默认的 rem 单位转化成 rpx。

配置 tailwindcss 单位转化

两种转化形式 (二者选其一即可)

如果你想要把我的项目里，所有的 rem 都转化成 rpx，那么 postcss plugin: postcss-rem-to-responsive-pixel 适宜你。
如果你想放大一下范畴，只把 tailwindcss 生成的工具类的单位，从 rem 转变为 rpx，那么 tailwindcss preset: tailwindcss-rem2px-preset 适宜你。

举荐第一种转化形式，这会把我的项目里所有你编写的，或者引入的第三方控件里的 rem 单位，全副转化为 rpx，当然这个包也提供了各种配置项，帮忙你进行更加粗疏的操作。

1. `postcss-rem-to-responsive-pixel` (举荐)

首先咱们装置它:

npm i -D postcss-rem-to-responsive-pixel

装置好之后，把它注册进你的 postcss.config.js 即可:

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

2. `tailwindcss-rem2px-preset`

同样咱们装置它：

npm i -D tailwindcss-rem2px-preset

而后在 tailwind.config.js 中，注册这个预设：

// tailwind.config.js

module.exports = {
  presets: [require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位, 能够变成 px / rpx
      unit: 'rpx'
    })
  ],
  // ...
}

这样即可实现 tailwindcss 默认工具类的 rem 转 rpx 的配置了。

# npm / yarn /pnpm
npm i -D weapp-tailwindcss-webpack-plugin
# 能够执行一下 patch 办法
npx weapp-tw patch

而后把下列脚本，增加进你的 package.json 的 scripts 字段里:

 "scripts": {+  "postinstall": "weapp-tw patch"}

接下来咱们就开始在不同的框架里注册了，这里咱们以目前市面上支流的 taro 和 uni-app 为例：

taro (all frameworks)

在应用 Taro 时，检查一下把 config/index 的配置项 compiler 设置为 ‘webpack5’

// config/index 文件中
const {UnifiedWebpackPluginV5} = require('weapp-tailwindcss-webpack-plugin')

{
  mini: {webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{appType: 'taro'}]
          }
        }
      })
    }
  }
}

uni-app (vue2/3)

在创立 uni-app 我的项目时，请抉择 uni-app alpha 版本

这是因为目前默认创立的版本还是应用的 @vue/cli 4.x 的版本，它应用 webpack4 和 postcss7，而 alpha 版本应用 @vue/cli 5.x 即 webpack5 和 postcss8，这能够应用最新版本的 tailwindcss。

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

更多 uni-app 模板详见 quickstart-cli

// 在 vue.config.js 里注册
const {UnifiedWebpackPluginV5} = require('weapp-tailwindcss-webpack-plugin')
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  // some option...
  configureWebpack: (config) => {
    config.plugins.push(
      new UnifiedWebpackPluginV5({appType: 'uni-app'})
    )
  }
  // other option...
}

module.exports = config

uni-app vite(vue3)

uni-app vue3/Vite 版是目前 uni-app 的最新版本，应用 vite 进行打包和开发，同样咱们能够依照以下形式进行注册：

// vite.config.[jt]s
import {UnifiedViteWeappTailwindcssPlugin as uvwt} from 'weapp-tailwindcss-webpack-plugin/vite'
// uvwt() 要放在 uni 官网插件之后
const vitePlugins = [uni(),uvwt()]

export default defineConfig({
  plugins: vitePlugins,
  // 如果 postcss.config.js 不起作用，请应用内联 postcss Latset
  // css: {
  //   postcss: {
  //     plugins: postcssPlugins,
  //   },
  // },
});

这可能是小程序应用 tailwindcss 开发的最佳计划

疾速开始

一. 装置与配置 tailwindcss

1. npm 装置 tailwindcss

2. 把 tailwindcss 注册进 postcss.config.js

3. 配置 tailwind.config.js

4. 引入 tailwindcss

二. 配置 rem 转 rpx