一款专门为小程序开发而生的插件——weapp-tailwindcs

weapp-tailwindcss是一套精心打造的小程序开发工具集，其核心目标在于优化 tailwindcss在小程序开发中的使用体验。它不仅大幅度提升了开发效率，还提供了一个全方位的解决方案。从根本上讲，它是一个转换器，可以将tailwindcss收集并生成的类名及其结果，精准地转化为小程序能够编译的形式。

是一款原子化的样式生成器，它以其“所写即所得”的特点和出色的可读性，在前端领域赢得了广泛的赞誉。它能够自动进行摇树优化，剔除未使用的样式，并通过插件和预设来提炼项目中的公共样式部分，极大地提高了开发效率和代码质量。

weapp-tailwindcss项目的创始人是sonofmagic。在 2021 年，他对 Tailwind CSS 一见钟情，并开始在多个项目中应用它。然而，他发现在小程序中直接使用这种为 Web 设计的库存在障碍。因此，sonofmagic萌生了开发 weapp-tailwindcss的想法，旨在解决这一痛点。自发布以来，weapp-tailwindcss受到了广大开发者的热烈欢迎。截至本文发文的 2024 年 2 月中旬，该项目已在 Github 上获得了 833 个 Star，证明了其在小程序开发社区的影响力。

weapp-tailwindcs免费开源说明

weapp-tailwindcss是一款完全免费且开源的小程序开发工具插件。其源码遵循 MIT 开源协议，并托管在 Github 上，供所有人免费下载和使用。无论是个人项目还是商业项目，您都可以放心采纳，无需支付任何费用。

weapp-tailwindcs技术特性​

1、不但可以处理和转义 wxml/wxss , 像微信小程序中的 js 和 wxs 产物也能处理；

2、提供多种使用方式，包括 webpack/vite/gulp 和 nodejs api，项目集成很方便；

3、生态以及解决方案丰富，提供大量现成模板，可以利用许多 tailwindcss 现有的生态来构建小程序；

4、高效的解析和缓存机制，即使项目很大，热更新响应时间也是毫秒级；

5、贴合 tailwindcss 的设计思路，智能提示友好。

uni-app HbuilderX上手方式​

// 默认的需要配置 tailwind.config.js 文件
const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
  // 如果有其他目录，比如 components，也必须在这里，添加一下
  content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
  // ...
  corePlugins: {
    preflight: false,
  },
};

同时配置 vite.config.js ：

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  plugins: [uni(), uvwt({
    rem2rpx: true,
    disabled: WeappTailwindcssDisabled
  })],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss")({
          // 注意此处，手动传入 `tailwind.config.js` 的绝对路径
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

请注意，两个配置文件均需要指定 Tailwind CSS 的绝对路径。完成配置后，您可以在页面文件中自由使用 Tailwind CSS。此外，为了进一步提升开发效率，我们建议您在 uni-app 插件市场中安装「Tailwind CSS语言服务」插件。这将为您开启智能语法提示功能，使您在编写代码时获得实时的语法检查与提示。

进入weapp-tailwindcs官网