常规 Webpack 类小程序（以 MPX 为例）

MPX, 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。

由于 MPX 框架为典型的以 Webpack 为构建工具的增强型小程序开发框架，所以本次安装示范将 MPX 项目作为典型案例来演示如何为大部分 Webpack 类小程序项目进行插件安装。以下安装步骤在 Webpack 项目中具有广泛的通用性，对于大部分 Webpack 类小程序项目只需参考相同步骤进行安装即可。

安装 windicss-webpack-plugin

npm i windicss-webpack-plugin -D

参考 Windi CSS 官方文档了解更多细节

Windi CSS Webpack 集成

安装 @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

更新 webpack 配置文件

使用 Webpack 插件

//webpack.base.conf.js
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")

module.exports = {
  plugins: [
    new WindiCSSWebpackPlugin(),
    new MiniProgramTailwindWebpackPlugin({
      // options
    })
  ]
}

新建 Windi CSS 配置文件

在项目根目录新建 windi.config.js 配置文件

//windi.config.js
export default {
  preflight: false,
  prefixer: false,
  extract: {
    // 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
    include: ['src/**/*.{css,html,mpx}'],
    // 忽略部分文件夹
    exclude: ['node_modules', '.git', 'dist']
  },
  corePlugins: {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container: false
  }
}

此处 Tailwind CSS 配置文件同样适用

参考 Windi CSS 官方文档了解更多细节

Windi CSS 配置文件兼容规则

在入口文件中引入 Windi CSS 的产物

// app.mpx
<style src="windi.css"></style>

对于其余非 MPX 项目的 Webpack 类小程序，可参考类似的方式在入口文件中引入 windi.css 即可，如：

// main.js
import 'windi.css'

参考 Windi CSS 官方文档了解更多细节

引入 Windi CSS 样式文件

完成

开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉

可配置参数

案例

集成案例：MPX 项目

Taro 小程序

Taro, 多端统一开发解决方案

本插件包含 Taro 插件，通过“一键安装”的方式来便捷的适配 Taro 小程序。

Taro 插件已兼容以下前端框架

• React
• Vue 2
• Vue 3
• Preact

同时也兼容在混合原生组件开发中使用 Tailwind/Windi CSS

安装 @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

使用 Taro 插件

// config/index.js
const config = {
  plugins: [
    ['@dcasia/mini-program-tailwind-webpack-plugin/dist/taro', {
      // ...options
    }]
  ]
}

新建 Windi CSS 配置文件

在项目根目录新建 windi.config.js 配置文件

// windi.config.js
export default {
  prefixer: false,
  extract: {
    // 忽略部分文件夹
    exclude: ['node_modules', '.git', 'dist']
  },
  corePlugins: {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container: false
  }
}

此处 Tailwind CSS 配置文件同样适用

参考 Windi CSS 官方文档了解更多细节

Windi CSS 配置文件兼容规则

在入口文件中引入 Windi CSS 的产物

// app.js
import 'windi.css';

完成

开始享受在 Taro 中由 Windi CSS 带来的高效开发体验 🎉

可配置参数

案例

• 集成案例：Taro - React 项目
• 集成案例：Taro - Vue 2 项目
• 集成案例：Taro - Vue 3 项目

uni-app 小程序

uni-app, 开发一次，多端覆盖。

本篇内容包含 uni-app 的 Vue 3 与 Vue 2 两种安装示范。

Vue 3 安装示范

请参考下一个小程序类型：常规 Vite 类小程序（以 uni-app 为例）

Vue 2 安装示范

安装 windicss-webpack-plugin

npm i windicss-webpack-plugin -D

参考 Windi CSS 官方文档了解更多细节

Windi CSS Webpack 集成

安装 @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

新建 Vue 配置文件

在项目根目录新建 vue.config.js 配置文件并使用 Webpack 插件

// vue.config.js
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")

module.exports = {  
  configureWebpack: {  
    plugins: [  
      new WindiCSSWebpackPlugin(),
      new MiniProgramTailwindWebpackPlugin({
        // options
      })
    ]  
  }  
}

新建 Windi CSS 配置文件

在项目根目录新建 windi.config.js 配置文件

//windi.config.js
export default {
  preflight: false,
  prefixer: false,
  extract: {
    // 忽略部分文件夹
    exclude: ['node_modules', '.git', 'dist']
  },
  corePlugins: {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container: false
  }
}

此处 Tailwind CSS 配置文件同样适用

参考 Windi CSS 官方文档了解更多细节

Windi CSS 配置文件兼容规则

在入口文件中引入 Windi CSS 的产物

// main.js
import 'windi.css'

完成

开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉

可配置参数

案例

集成案例：uni-app Vue 2 项目

常规 Vite 类小程序（以 uni-app 为例）

uni-app, 开发一次，多端覆盖。

由于在 uni-app 中使用 Vue 3 进行小程序开发时项目是基于 Vite 进行构建的，所以本次安装示范将 uni-app Vue 3 项目作为典型案例来演示如何为大部分 Vite 类小程序项目进行插件安装。以下安装步骤在 Vite 项目中具有广泛的通用性，对于大部分 Vite 类小程序项目只需参考相同步骤进行安装即可。

安装 vite-plugin-windicss 与 windicss

npm i vite-plugin-windicss windicss -D

参考 Windi CSS 官方文档了解更多细节

Windi CSS Vite 集成

安装 @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

更新 Vite 配置文件

在 vite.config.js 配置文件中使用插件

// vite.config.js
import WindiCSS from 'vite-plugin-windicss';
import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup';

export default {
  plugins: [
    WindiCSS(),
    MiniProgramTailwind()
  ]
}

新建 Windi CSS 配置文件

在项目根目录新建 windi.config.js 配置文件

//windi.config.js
export default {
  preflight: false,
  prefixer: false,
  extract: {
    // 忽略部分文件夹
    exclude: ['node_modules', '.git', 'dist']
  },
  corePlugins: {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container: false
  }
}

此处 Tailwind CSS 配置文件同样适用

参考 Windi CSS 官方文档了解更多细节

Windi CSS 配置文件兼容规则

在入口文件中引入 Windi CSS 的产物

// main.js
import 'virtual:windi.css'

完成

开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉

可配置参数

案例

集成案例：uni-app Vue 3 项目

原生开发或自定义构建工具的小程序

无论你的项目基于什么 bundler 或 workflow 工具进行开发，只要有一个可编程的文件监听与处理服务便可以进行自定义实现。但这里需要明确的一点是，若想在以原生开发模式的基础之上去集成本插件的功能，则一定需要我们去启动一套可编程的文件监听处理服务作为插件的运行基础，这个服务通常由配置好的 Webpack, Gulp 等第三方工具完成。

使用 Tailwind/Windi CSS CLI 的开发者请看

如果你是通过 Tailwind/Windi CSS 官方的 CLI 进行小程序 UI 开发，遗憾的是由于该 CLI 不支持插件机制而且不可能支持对于模板文件的修改，所以我们无法在此基础之上以自定义的方式集成本插件。

我们将本插件的核心功能解耦并打包进了 universal-handler.js 文件中，若你想在自定义的构建工具中集成本插件的核心功能，可以在工作流逻辑中引入 universal-handler：

const { handleTemplate, handleStyle } = require('@dcasia/mini-program-tailwind-webpack-plugin/universal-handler')

处理 template:

const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate(rawContent)

处理 style:

const rawContent = '.h-\\[0\\.5px\\] {height: 0.5px;}'
const handledStyle = handleStyle(rawContent, options)

此后你便可以将处理过的字符串返回至工作流原本的流程中来生成最终的文件。

进一步了解自定义实现过程中的实践细节

小程序集成 Windi CSS 的自定义实现

可配置参数

案例

集成案例：基于 Gulp 进行自定义实现