UniApp（vue3+vite）如何原生引入TailwindCSS（4）

目录

npx

开始使用 Tailwind CSS

1. 安装 Node.js 和 cnpm

2. 使用 VScode 创建 uni-app 项目

开始使用 Tailwind CSS

1.安装 Tailwind CSS

2.配置 Vite 插件

3.修改配置 

4.导入 Tailwind CSS

5.开始在 HTML 中使用 Tailwind

 总结

npx

实际上，npx degit 和 git clone 都能用来获取代码仓库中的模板或项目，但是它们的实现方式和用途有所不同。让我详细说明为什么在创建 uni-app 项目时使用 npx degit 更为合适，并探讨它的优势。

npx degit 是一种轻量级的方式来获取 Git 仓库的某个项目模板，degit 是一个专门用于克隆模板的工具。它会下载指定的 Git 仓库中的最新代码，并且不包括 .git 目录，也不保留提交历史。

npx 能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。

注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。

 npx http-server

• 避免 Git 历史：degit 只会克隆指定的文件内容，不会克隆 .git 目录，从而避免了冗余的 Git 提交历史记录。这样克隆的代码更干净，节省了存储空间。
• 快速克隆：因为没有历史记录，degit 的克隆速度相对更快，适用于获取一个项目模板的场景。
• 适用于模板使用场景：degit 是为获取项目模板而设计的，特别适用于快速初始化项目，而不关心项目的版本历史。
• 简单易用：通过 npx degit，你不需要手动配置或安装 degit 工具，它会自动下载并执行。npx 使得执行命令变得更加简便，直接可以从远程 Git 仓库获取模板。

开始使用 Tailwind CSS

1. 安装 Node.js 和 cnpm

如果你已经安装了 Node.js 和 pnpm，可以跳过此步骤。否则，确保它们已正确安装：

• Node.js：可以通过 Node.js 官网 下载并安装。
• pnpm：可以使用以下命令通过 npm 安装 pnpm：

npm install -g pnpm

2. 使用 VScode 创建 uni-app 项目

在 VScode 中，打开终端并按照以下步骤操作：

1. 打开 VScode，进入你想要存放 uni-app 项目的文件夹。
2. 打开 VScode 的终端，运行以下命令来创建一个新的 uni-app 项目：
3. 创建完成后，进入项目目录：
4. 安装项目所需的依赖，使用 pnpm 替代 npm 安装（更快）：
5. 你可以通过 VScode 提供的终端来运行项目。执行以下命令来启动开发环境：
6. 如果一切正常，浏览器会自动打开，显示你的 uni-app 项目的欢迎页面。

npx degit dcloudio/uni-preset-vue#vite my-vue3-projectcd my-uni-apppnpm installpnpm run dev

开始使用 Tailwind CSS

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活、可靠——无需运行时间。
 

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({plugins: [tailwindcss(),],
})

如上报错 继续往下看

3.修改配置 

将package.json的type设置成module 

 如下报错

TypeError: uni is not a function,由于 vite-plugin-uni 插件不兼容ESM ,

在不删除 "type": "module" 的情况下
由于 vite-plugin-uni 插件不兼容ESM ,可以使用下面的方法过渡一下

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import tailwindcss from "@tailwindcss/vite";
// https://vitejs.dev/config/
export default defineConfig({plugins: [uni.default(), tailwindcss()],
});

4.导入 Tailwind CSS

@import "tailwindcss";

import { createSSRApp } from "vue";
import App from "./App.vue";
import "./static/index.css";
export function createApp() {const app = createSSRApp(App);return {app,};
}

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="text-3xl font-bold underline text-[#e00]"> {{ title }}</text></view></view>
</template><script>
export default {data() {return {title: "Hello",};},onLoad() {},methods: {},
};
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;
}.text-area {display: flex;justify-content: center;
}.title {font-size: 36rpx;color: #8f8f94;
}
</style>

 总结

可以安装插件提示 Tailwind CSS IntelliSense

附上作者生效的环境

• "vite": "5.2.8"
• "tailwindcss": "^4.1.11",
• "vue": "^3.4.21",
• "@tailwindcss/vite": "^4.1.11",

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
官网地址 

如果采用v3.4.17请翻阅其他文档！！！

{"name": "uni-preset-vue","version": "0.0.0","type": "module","scripts": {"dev:custom": "uni -p","dev:h5": "uni","dev:h5:ssr": "uni --ssr","dev:mp-alipay": "uni -p mp-alipay","dev:mp-baidu": "uni -p mp-baidu","dev:mp-jd": "uni -p mp-jd","dev:mp-kuaishou": "uni -p mp-kuaishou","dev:mp-lark": "uni -p mp-lark","dev:mp-qq": "uni -p mp-qq","dev:mp-toutiao": "uni -p mp-toutiao","dev:mp-harmony": "uni -p mp-harmony","dev:mp-weixin": "uni -p mp-weixin","dev:mp-xhs": "uni -p mp-xhs","dev:quickapp-webview": "uni -p quickapp-webview","dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei","dev:quickapp-webview-union": "uni -p quickapp-webview-union","build:custom": "uni build -p","build:h5": "uni build","build:h5:ssr": "uni build --ssr","build:mp-alipay": "uni build -p mp-alipay","build:mp-baidu": "uni build -p mp-baidu","build:mp-jd": "uni build -p mp-jd","build:mp-kuaishou": "uni build -p mp-kuaishou","build:mp-lark": "uni build -p mp-lark","build:mp-qq": "uni build -p mp-qq","build:mp-toutiao": "uni build -p mp-toutiao","build:mp-harmony": "uni build -p mp-harmony","build:mp-weixin": "uni build -p mp-weixin","build:mp-xhs": "uni build -p mp-xhs","build:quickapp-webview": "uni build -p quickapp-webview","build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei","build:quickapp-webview-union": "uni build -p quickapp-webview-union"},"dependencies": {"@dcloudio/uni-app": "3.0.0-4060620250520001","@dcloudio/uni-app-harmony": "3.0.0-4060620250520001","@dcloudio/uni-app-plus": "3.0.0-4060620250520001","@dcloudio/uni-components": "3.0.0-4060620250520001","@dcloudio/uni-h5": "3.0.0-4060620250520001","@dcloudio/uni-mp-alipay": "3.0.0-4060620250520001","@dcloudio/uni-mp-baidu": "3.0.0-4060620250520001","@dcloudio/uni-mp-harmony": "3.0.0-4060620250520001","@dcloudio/uni-mp-jd": "3.0.0-4060620250520001","@dcloudio/uni-mp-kuaishou": "3.0.0-4060620250520001","@dcloudio/uni-mp-lark": "3.0.0-4060620250520001","@dcloudio/uni-mp-qq": "3.0.0-4060620250520001","@dcloudio/uni-mp-toutiao": "3.0.0-4060620250520001","@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001","@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001","@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001","@tailwindcss/vite": "^4.1.11","tailwindcss": "^4.1.11","vue": "^3.4.21","vue-i18n": "^9.1.9"},"devDependencies": {"@dcloudio/types": "^3.4.8","@dcloudio/uni-automator": "3.0.0-4060620250520001","@dcloudio/uni-cli-shared": "3.0.0-4060620250520001","@dcloudio/uni-stacktracey": "3.0.0-4060620250520001","@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001","@vue/runtime-core": "^3.4.21","vite": "5.2.8"}
}