当前位置： 首页 > news >正文

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

news 2025/7/3 5:12:36

目录

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 仓库获取模板。

功能git clonenpx degit
克隆内容包括代码文件和 Git 提交历史（.git 文件夹）只克隆项目文件，不包含 .git 文件夹
文件大小包括 Git 历史，文件较大不包含 Git 历史，文件较小
使用场景用于获取整个 Git 仓库，包括所有历史记录用于获取项目模板，不需要 Git 历史
速度较慢（需要克隆整个 Git 历史）较快（只克隆文件，不包含历史）
是否需要手动安装需要安装 Git无需安装，npx 自动执行
是否包含版本控制信息包含（有 .git 文件夹）不包含（没有 .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 文件。

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

1.安装 Tailwind CSS

tailwindcss通过@tailwindcss/vitenpm安装。

npm install tailwindcss @tailwindcss/vite

2.配置 Vite 插件

将插件添加@tailwindcss/vite到您的 Vite 配置中。

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

  The plugin "externalize-deps" was triggered by this import

    vite.config.js:3:24:
      3 │ import tailwindcss from "@tailwindcss/vite";

如上报错 继续往下看

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

向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。

新建 /static/index.css

@import "tailwindcss";

main.js 引入

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

5.开始在 HTML 中使用 Tailwind

确保已编译的 CSS 包含在<head> （您的框架可能会为您处理这个问题）中，然后开始使用 Tailwind 的实用程序类来设置您的内容样式。

<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"}
}

 

http://www.dtcms.com/a/264449.html

相关文章：

  • YOLOv11深度解析：Ultralytics新一代目标检测王者的创新与实践（附网络结构图+训练/推理/导出全流程代码详解）
  • 【Erdas实验教程】024：遥感图像辐射增强（亮度反转Brightness Inversion）
  • Python数据解析与图片下载工具：从JSON到本地文件的自动化流程
  • springboot使用redisTemplate的方法，详细说明
  • 以智能楼宇自动化控制系统为基石，构筑绿色建筑节能增效新标杆
  • cmake笔记
  • 【分明集合】特征函数、关系与运算
  • 【格与代数系统】格与哈斯图
  • 笨方法学python-习题12
  • Sql注入中万能密码order by联合查询利用
  • 应急响应类题练习——玄机第四章 windows实战-emlog
  • Foundation 5 安装使用教程
  • SQL SELECT 语句
  • 在线租房平台源码+springboot+vue3（前后端分离）
  • 应急响应类题练习——玄机第五章 Windows 实战-evtx 文件分析
  • 6.Docker部署ES+kibana
  • Vite 7.0 与 Vue 3.5：前端开发的性能革命与功能升级
  • 【环境配置】Neo4j Community Windows 安装教程
  • HDMI 2.1 FRL协议的流控机制：切片传输（Slicing）和GAP插入
  • LL面试题11
  • 10授权
  • Vue 3 中的 `h` 函数详解
  • Rust征服字节跳动：高并发服务器实战
  • 飞算智造JavaAI：智能编程革命——AI重构Java开发新范式
  • Windows10/11 轻度优化 纯净版，12个版本！
  • 深度学习常见的激活函数
  • 【Python基础】11 Python深度学习生态系统全景解析：从基础框架到专业应用的技术深度剖析（超长版，附多个代码及结果）
  • 【深度学习1】ModernBert学习
  • RNN和LSTM
  • [面试] 手写题-防抖，节流