uni-app Vue3项目引入Tailwind CSS

前情

Tailwind CSS 是一个原子类 CSS 框架,它将基础的 CSS 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名,然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠,没有运行时负担。自从接触了Tailwind CSS后,目前已经是我项目的标配了。正好最近接手了一个uni-app多端的小程序项目,我也想让它配置上Tailwind CSS。

引入步骤

STEP 1:安装相关依赖

uni-app已经内置了postcss和autoprefixer,所以在此处就不需要安装了

npm install -D tailwindcss

STEP 2:补充配置

# 初始化 tailwind.config.js 文件
npx tailwindcss init

执行上面命令生成tailwind.config.js,并增加如下配置,对于已有项目引入tailwindcss最好是增加前辍判断,避免样式名冲突

const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
	// 增加前辍避免样式冲突
  prefix: 'zhs-',
  // 注意此处,一定要 `path.resolve` 一下, 传入绝对路径
  // 你要有其他目录,比如 components,也必须在这里,添加一下
  content: [
	  "./index.html", 
	  "./pages/**/*.{html,js,ts,jsx,tsx,vue}",
	  "./components/**/*.{html,js,ts,jsx,tsx,vue}"
  ].map(resolve),
  corePlugins: {
    // 跨多端可以 h5 开启,小程序关闭
    preflight: false,
  },
};

在项目根目录下vite.config.js文件中,增加如下配置,具体查看start end包裹的注释

import path from "path";
import fs from "fs-extra";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

// start 引入tailwindcss增加的配置0
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);
};
// end 引入tailwindcss增加的配置0

const platformMap = {
  app: "App",
  web: "Web",
  "mp-weixin": "微信小程序",
  "mp-alipay": "支付宝小程序",
  "mp-baidu": "百度小程序",
  "mp-toutiao": "抖音小程序",
  "mp-lark": "飞书小程序",
  "mp-qq": "QQ小程序",
  "mp-kuaishou": "快手小程序",
  "mp-jd": "京东小程序",
  "mp-360": "360小程序",
};

export default defineConfig({
  plugins: [
	  uni(),
	   
	  // start 引入tailwindcss增加的配置plugins
	  uvwt({
			rem2rpx: true,
			disabled: WeappTailwindcssDisabled,
			// 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
			tailwindcssBasedir: __dirname
	  })
	  // end 引入tailwindcss增加的配置plugins
	  
  ],
  
  // start 引入tailwindcss增加的配置postcss
  css: {
	  postcss: {
			plugins: [
				require("tailwindcss")({
					// 注意此处,手动传入你 `tailwind.config.js` 的绝对路径
					config: resolve("./tailwind.config.js")
				}),
				require("autoprefixer")
			],
	  },
	}
	// end 引入tailwindcss增加的配置postcss
});

STEP 3:在项目根组件App.vue中引入tailwindcss

// 在项目下的App.vue增加如下css代码
<style lang="scss">
	@import 'tailwindcss/base';
	@import 'tailwindcss/utilities';
	@import 'tailwindcss/components';
</style>

如果你项目不想用scss可以按如下方式引入

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

STEP 4:安装weapp-tailwindcss

npm i -D weapp-tailwindcss

STEP 5:然后把下列脚本,添加进你的 package.json 的 scripts 字段里

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

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

  1. 给当前你本地的 tailwindcss 打上支持 rpx 的补丁 (小程序特有单位,非 web 标准)
  2. 用来暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件。

而添加上面一段 npm scripts 的用途是,利用 npm hook, 每次安装包后,都会自动执行一遍 weapp-tw patch 这个脚本。

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

至此就可以愉快的在uni-app项目中使用Tailwind CSS高效实现UI还原了

友情提示

uni-app项目一般使用的IDE是官方自带的HBuilder x,为了更好的开发体验安装如下插件,即可实现样式名提示了,插件地址:Tailwind CSS语言服务 - DCloud 插件市场

安装插件开发者工具会有莫名的报错,可以忽略,从最近一二周的使用体验上来说是没有什么问题的。

小遗撼

目前还没有找到在uni-app Vue 2项目中引入的方法,在Vue 2下因为HBuilder X内置的postcss版本过低,会导致任务进入一个死循环,weapp-tailwindcss文挡有说明一种hack解法。

我曾经也想在我的uni-app Vue 2项目中引入Tailwind CSS,最终都以失败告终,虽然weapp-tailwindcss文挡有提供hack解法,但考虑到修改到了HBuilder x的内部文件,我就没有去折腾,还是老老实实使用普通的方式书写CSS,如果有哪位成功实现并使用体验良好的可以留言分享,谢谢了。

posted @ 2024-08-22 21:21  !win !  阅读(766)  评论(0编辑  收藏  举报