uniapp+vue3配置TailwindCss3.x

研究波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@3postcss autoprefixer-D

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

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

npx tailwindcss init-p

tailwind.config.js

constpath=require("path");constresolve=(p)=>{returnpath.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>@tailwindbase;@tailwindcomponents;@tailwindutilities;</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";importuni from"@dcloudio/vite-plugin-uni";import{UnifiedViteWeappTailwindcssPluginasuvwt}from'weapp-tailwindcss/vite';constpath=require("path");constresolve=(p)=>{returnpath.resolve(__dirname,p);};exportdefaultdefineConfig({// uni 是 uni-app 官方插件， uvtw 一定要放在 uni 后，对生成文件进行处理plugins:[uni(),uvwt()],css:{postcss:{plugins:[require('tailwindcss')({// ！！！！ 注意此处，手动传入你 `tailwind.config.js` 的绝对路径config:resolve("./tailwind.config.js")}),require('autoprefixer'),],},},});

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

<template><viewclass="flex flex-col items-center"><imageclass="size-[200rpx] my-8 "src="/static/logo.png"></image><viewclass="flex justify-center"><textclass="text-6xl text-blue-200">{{title}}</text></view></view></template><script setup lang="ts">import{ref}from'vue'consttitle=ref('你好')</script>