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-project

cd my-uni-app

pnpm install

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