【uniapp】vue3+vite模版的uniapp引入tailwindcss

在uniapp项目中引入Tailwind CSS需要以下步骤：

1. 创建或选择一个Vue3 + Vite模版的uniapp项目。
2. 安装Tailwind CSS和postcss。
3. 配置postcss和Tailwind。
4. 使用Tailwind CSS类。

以下是具体步骤和示例代码：

1. 确保你的项目是基于Vue3和Vite的uniapp项目。
2. 安装Tailwind CSS和postcss：

npm install -D tailwindcss postcss postcss-loader autoprefixer

3. 创建Tailwind CSS配置文件 tailwind.config.js 和 postcss.config.js：

tailwind.config.js:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. 在项目的入口文件（如 main.js 或 main.ts）中引入Tailwind CSS:

import 'tailwindcss/tailwind.css';

5. 使用Tailwind CSS类：

在.vue文件中，可以这样使用Tailwind CSS类：

<template>
  <view class="text-center p-4 bg-blue-500 text-white">Hello Tailwind</view>
</template>

确保在实际使用时，Purge部分的配置是根据你的项目实际情况来配置的，以避免生成不必要的CSS。

以上步骤完成后，运行项目，Tailwind CSS应该已经可以正常工作了。