有用过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节点
<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</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透明度 后面的值也不是随便填的具体看这里
--如果有哪里写的不对的地方，还请指出
