研究波 uniapp + vue3 引入 TailwindCss

！！注意点！！: 路径引入的时候需要使用绝对路径

Hbuilder X 推荐tailwindcss友好插件

文档链接： tailwindcss3.x 、 weapp-tailwindcss

1、使用HbuilderX创建uniapp项目

打开HbuilderX点击左上角文件-新建-创建uniapp项目，我选的vue3版本

2、生成package.json

项目新建成功后是没有这个文件的，需要手动执行 npm init -y 生成此文件

3、安装tailwindcss3.x

npm install tailwindcss@3 postcss autoprefixer -D

4、生成tailwindcss配置文件及引入

运行命令生成tailwind.config.js、postcss.config.js文件

npx tailwindcss init -p

tailwind.config.js

const path = require("path");

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

/** @type {import('tailwindcss').Config} */
module.exports = {
	
	// ！！！！ 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
	content: [
		'./index.html',
		'./pages/**/*.{html,js,ts,vue}',
		'!./node_modules/**/*',
	].map(resolve),
	theme: {
		extend: {},
	},
	plugins: [],
	corePlugins: {
		// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
		preflight: false
	}
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

引入
在App.vue文件中新增

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

5、安装weapp-tailwindcss

npm install weapp-tailwindcss -D

运行命令后把 下面的脚本添加进你的 package.json 的 scripts 字段里

"scripts": {
    "postinstall": "weapp-tw patch"
  }

执行 weapp-tw patch 主要是做2件事情

给当前你本地的 tailwindcss 打上支持 rpx 的补丁 (小程序特有单位，非 web 标准)
用来暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件。
而添加上面一段 npm scripts 的用途是，利用 npm hook, 每次安装包后，都会自动执行一遍 weapp-tw patch 这个脚本。

这样即使 tailwindcss 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上

6、注册及页面使用

vite.config.ts

import {
	defineConfig
} from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import {
	UnifiedViteWeappTailwindcssPlugin as uvwt
} from 'weapp-tailwindcss/vite';

const path = require("path");

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

export default defineConfig({
	// uni 是 uni-app 官方插件， uvtw 一定要放在 uni 后，对生成文件进行处理
	plugins: [uni(), uvwt()],
	css: {
		postcss: {
			plugins: [
				require('tailwindcss')({
					// ！！！！ 注意此处，手动传入你 `tailwind.config.js` 的绝对路径
					config: resolve("./tailwind.config.js")
				}),
				require('autoprefixer'),
			],
		},
	},
});

接下来就可以愉快的在页面里面使用了，

<template>
	<view class="flex flex-col items-center">
		<image class="size-[200rpx] my-8 " src="/static/logo.png"></image>
		<view class="flex justify-center">
			<text class="text-6xl text-blue-200">{{title}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const title = ref('你好')
</script>