uniapp+vue3+pinia+tailwindcss+gulp 开发小程序-H5

有用过tailwindcss的小伙伴都知道，开发起来免去写样式的重复步骤使用起来那是得心应手，
在tailwindcss里面也有在各个框架里面的使用方法 具体查看 还有cdn的使用方法

今天就说说如何在uniapp里面使用tailwindcss
首先呢创建一个uniapp的vue3项目 具体操作 当然了选择vue3项目项目命令(npx degit dcloudio/uni-preset-vue#vite my-vue3-project)
vue3 采用的是vite构建打包 有不了解的小伙伴可以看看先去了解了解

项目新建完成

接下来需要安装需要的依赖
咱们要使用pinia肯定是需要安装的 不使用pinia也可以使用vuex默认有安装

yarn add pinia
# or with npm
npm install pinia

下一步就是安装tailwindcss了
需要安装tailwindcss、postcss、autoprefixer、postcss-class-rename

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

默认安装tailwindcss会是3.0版本 3.0版本新增jit模式 jit模式是什么 简单的说就是即时编译器 不理解的可以多看看文档这里不做多解释
postcss-class-rename 这个主要是对小程序里面的部分样式做修改，比如说class="w-[200]" 在浏览器里面是支持的 到了小程序就不行了 所以需要做一个更名

最后一步安装gulp 和gulp-replace
这里就有人问了，gulp是什么？为什么要安装gulp
上面我们说了小程序对部分样式不支持，需要做调整、修改，这里肯定有有人问了，上面postcss-class-rename不是做了修改了吗
postcss-class-rename修改的是css里面的，我们还需要懂构建工具去修改wxml里面的class值

所有依赖安装完成之后呢就要初始化tailwindcss了
打开命令行并找到项目目录执行这段命令

npx tailwindcss init

会在项目目录生成一个tailwind.config.js文件
里面会有一些基础配置
我的就很简单不像其他的动不动就几百行--配置如下

module.exports = {
    mode: 'jit',
    content: ["./src/**/*.vue","./src/**/*.scss","./src/**/*.css"],
    media: false,
    separator: '__',
    theme: {
        extend: {
            colors:{
                zhu_color:"#ff0000",    //这里可以定义一些项目常用的颜色--一样可以使用/来使用透明度
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
    corePlugins: {//禁用一些小程序class不支持的分割
        preflight: false, // 默认样式
        // divideColor: false, // 分割边框颜色
        // divideOpacity: false, // 分割边框透明度
        // divideStyle: false, // 分割边框类型
        // divideWidth: false, // 分割边框长度
        // space: false, // 间距
        // placeholderColor: false, // 占位符颜色
        // placeholderOpacity: false, // 占位符透明度
        // ringWidth: false, // 阴影相关
        // boxShadow: false, // 阴影
        // container: false, // 容器布局
        // borderColor: false, // 边框颜色（在高版本中，生成了一个带 * 的样式，所以需要禁用）
    }
}

postcss部分

项目目录新建postcss.config.js文件
复制如下代码

const { uniPostcssPlugin } = require('@dcloudio/uni-cli-shared')

module.exports = {
    plugins: [
        uniPostcssPlugin(),
        require('autoprefixer')(),
        require("tailwindcss")({ config: require("./tailwind.config") }),
        ...(
            process.env.UNI_PLATFORM !== "h5" ? [
                    // 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名，如："hover:xxx"
                    require("postcss-class-rename")({
                        "\\\\:": "-",
                        "\\\\/": "-",
                        "\\\\.": "-",
                        ".:": "tailwind",
                        "\\\*": "tailwind",
                    })
                ] : [
                    require("autoprefixer")({
                        remove: true,
                    }),
                ]
        ),
    ]
}

gulp部分

在项目目录新建gulpfile.js文件
复制如下代码进去

var replace = require('gulp-replace');
const gulp = require('gulp')

const updateTailwind = async () => {
    /* 找到微信小程序构建后的文件 */
    await gulp.src('./dist/dev/mp-weixin/**/**/*.wxml')
    /* 在文本中找到class拿出来做修改 */
     .pipe(replace(/class="((\w+([-]*)|([/]?)\w)|(\w+[-]['[']\w+])?(\[\/w\]\\)?\s?)+"/ig, (match, p1) => {
        let useMatch = match;
        /* 找到/替换为- */
        if (useMatch.includes("/")) {
            useMatch = useMatch.replace("/", "-")
        }
        /* 找到[x]替换为 -x- */
        if (useMatch.includes("[")) {
            useMatch = (useMatch.replace(/\[/g, "-")).replace(/\]/g, "-")
        }
        /* 返回回去 */
        return useMatch
    }))
    /* 修改后的保存地方 */
    .pipe(gulp.dest('./dist/dev/mp-weixin/'));
}


/* 默认任务 */
gulp.task('default', function (ret) {
    return updateTailwind();
});


/* 监听src下面的文件做了修改 */
gulp.watch('src/**/**').on('change', function (event) {
    console.log(event + '文件发生了改变~');
    setTimeout(updateTailwind, 1000);
});

引入样式

在app.vue里面style节点

插件部分

vscode插件Tailwind CSS IntelliSense 可以大大提高效率

main.js部分

这里面对tailwindcss没有什么需要配置的
pinia具体使用
这里需要对pinia进行use

import App from "./App.vue";

import { createSSRApp } from "vue";
import { createPinia as createPina } from 'pinia'

export const createApp = () => ({ app: createSSRApp(App).use(createPina()) })

接下来就可以在vue文件里面使用了

启动项目npm run dev:mp-weixin之后
还需要在项目目录使用gulp命令执行gulpfile.js
如果不生效就重新启动一次

重点

在使用的时候会有默认的一些值都是rem在小程序里面也能用
但是不是那么好用
所有不建议用默认值

这里就可以完整的发挥jit的作用了
比如w-80 构建后和 width:320px; 大致是一样的

所以上面使用的gulp就要起作用了
如果想用width:750rpx; -> class="w-[750rpx]"
不仅是宽度、宽度、边距、填充都是这样需要加上rpx在H5会编译成rem在小程序会编译成rpx

在Tailwind CSS 里面颜色透明度也不用那么麻烦
和H5里面一样的使用
比如text-red-500/25 0.25透明度 后面的值也不是随便填的具体看这里

--如果有哪里写的不对的地方，还请指出