Mini Program Tailwind Webpack Plugin

安装 @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 配置文件兼容规则](https://windicss.org/guide/configuration.html)

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

// app.mpx
<style src="https://github.com/dcasia/mini-program-tailwind/raw/development/windi.css"></style>

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

// main.js
import 'windi.css'

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

[引入 Windi CSS 样式文件](https://windicss.org/integrations/webpack.html#include-the-virtual-module)

完成

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

可配置参数

案例

集成案例：MPX 项目

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

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

完成

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

可配置参数

案例

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

安装 @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 配置文件兼容规则](https://windicss.org/guide/configuration.html)

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

// main.js
import 'windi.css'

完成

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

可配置参数

案例

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

安装 @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 配置文件兼容规则](https://windicss.org/guide/configuration.html)

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

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

完成

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

可配置参数

案例

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

我们将本插件的核心功能解耦并打包进了 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 的自定义实现](https://juejin.cn/post/7093809282272985119#heading-5)

可配置参数

案例

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