uni-app Vue3项目引入Tailwind CSS
<h2 id="前情"><strong>前情</strong></h2><p>Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠，没有运行时负担。自从接触了Tailwind CSS后，目前已经是我项目的标配了。正好最近接手了一个uni-app多端的小程序项目，我也想让它配置上Tailwind CSS。</p>
<h2 id="引入步骤">引入步骤</h2>
<h3 id="step-1安装相关依赖">STEP 1：安装相关依赖</h3>
<p>uni-app已经内置了postcss和autoprefixer，所以在此处就不需要安装了</p>
<pre><code class="language-bash">npm install -D tailwindcss
</code></pre>
<h3 id="step-2补充配置">STEP 2：补充配置</h3>
<pre><code class="language-bash"># 初始化 tailwind.config.js 文件
npx tailwindcss init
</code></pre>
<p>执行上面命令生成tailwind.config.js，并增加如下配置，对于已有项目引入tailwindcss最好是增加前辍判断，避免样式名冲突</p>
<pre><code class="language-jsx">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,
},
};
</code></pre>
<p>在项目根目录下vite.config.js文件中，增加如下配置，具体查看start end包裹的注释</p>
<pre><code class="language-jsx">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
});
</code></pre>
<h3 id="step-3在项目根组件appvue中引入tailwindcss">STEP 3：在项目根组件App.vue中引入tailwindcss</h3>
<pre><code class="language-css">// 在项目下的App.vue增加如下css代码
<style lang="scss">
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
@import 'tailwindcss/components';
</style>
</code></pre>
<p>如果你项目不想用scss可以按如下方式引入</p>
<pre><code class="language-css"><style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
</code></pre>
<h3 id="step-4安装weapp-tailwindcss">STEP 4：安装weapp-tailwindcss</h3>
<pre><code class="language-bash">npm i -D weapp-tailwindcss
</code></pre>
<h3 id="step-5然后把下列脚本添加进你的packagejson的scripts字段里">STEP 5：然后把下列脚本，添加进你的 <code>package.json</code> 的 <code>scripts</code> 字段里</h3>
<pre><code class="language-json">"scripts": {
"postinstall": "weapp-tw patch"
}
</code></pre>
<blockquote>
<p>执行 <code>weapp-tw patch</code> 主要是做2件事情</p>
<ol>
<li>给当前你本地的 <code>tailwindcss</code> 打上支持 <code>rpx</code> 的补丁 (小程序特有单位，非 <code>web</code> 标准)</li>
<li>用来暴露 <code>tailwindcss</code> 运行上下文给 <code>webpack</code>/<code>vite</code>/<code>glup</code> 插件。</li>
</ol>
<p>而添加上面一段 <code>npm scripts</code> 的用途是，利用 <code>npm hook</code>, 每次安装包后，都会自动执行一遍 <code>weapp-tw patch</code> 这个脚本。</p>
<p>这样即使 <code>tailwindcss</code> 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上。</p>
</blockquote>
<p>至此就可以愉快的在uni-app项目中使用Tailwind CSS高效实现UI还原了</p>
<h2 id="友情提示">友情提示</h2>
<p>uni-app项目一般使用的IDE是官方自带的HBuilder x，为了更好的开发体验安装如下插件，即可实现样式名提示了，插件地址：Tailwind CSS语言服务 - DCloud 插件市场。</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202408/685637-20240822212009326-1475879724.png" alt="" loading="lazy"></p>
<p>安装插件开发者工具会有莫名的报错，可以忽略，从最近一二周的使用体验上来说是没有什么问题的。</p>
<h3 id="小遗撼">小遗撼</h3>
<p>目前还没有找到在uni-appVue 2项目中引入的方法，在Vue 2下因为HBuilder X内置的postcss版本过低，会导致任务进入一个死循环，weapp-tailwindcss文挡有说明一种hack解法。</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202408/685637-20240822212015883-1639010485.png" alt="" loading="lazy"></p>
<p>我曾经也想在我的uni-app Vue 2项目中引入Tailwind CSS，最终都以失败告终，虽然weapp-tailwindcss文挡有提供hack解法，但考虑到修改到了HBuilder x的内部文件，我就没有去折腾，还是老老实实使用普通的方式书写CSS，如果有哪位成功实现并使用体验良好的可以留言分享，谢谢了。</p>
</div>
<div id="MySignature" role="contentinfo">
好好学习！天天向上！<br><br>
来源：https://www.cnblogs.com/xwwin/p/18374796
頁:
[1]