uniapp+vue+vite+tailwindcss框架的创建

最新推荐文章于 2025-07-07 10:34:09 发布

原创最新推荐文章于 2025-07-07 10:34:09 发布 · 588 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

uniapp+vue+vite+tailwindcss框架的创建

1.创建vue3项目以 javascript 开发的工程

打开你想存放项目的文件夹，在路径上输入‘cmd’，回车，然后输入下列代码：

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

其中 my-vue3-project 是你的项目名称

2.用vscode或HbuilderX打开你的项目

创建后文件的内容应该是如下文件：

3.添加tailwindcss

3.1 添加tailwindcss依赖（我这是运用NPM安装）：

npm install -D tailwindcss@3 postcss autoprefixer

我这里安装的版本是3.X的，虽然现在已经出了4.X版本的了，但是，对于开发人员来说，最新的不是最好的，容易出各种各样的bug，所以，我选择老版的，稳如老狗！！！

3.2 生成配置文件
执行下面的命令生成 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

生成的目录结构应该如下：
在这里插入图片描述
3.3 配置 tailwind.config.js
打开 tailwind.config.js 文件，将其内容修改如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './pages/**/*.vue',
    './components/**/*.vue',
    './App.vue', // 关键：扫描uniapp的vue文件
  ],
  corePlugins: {
    preflight: false, // 禁用基础样式注入（避免与 UNI-APP 默认样式冲突）
  },
  theme: {
    extend: {}
  },
  plugins: []
}

注意：这里的 / 和 * ，最好自己手敲一边！！！！防止可能报错

3.4 引入 Tailwind CSS
第一步：在src文件夹下创建style文件夹，在style文件夹下创建tailwind.css文件，并在添加如下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

第二步：在App.vue文件中引入上面创建的tailwind.css文件：

<style>
/*每个页面公共css */
@import url('style/tailwind.css');
</style>

第三步：更改postcss.config.js 文件：

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
}

3.5 最后配置vite.config.js文件：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
  ],
  css: {
      postcss: {
        plugins: [
          tailwindcss({
            config: './tailwind.config.js'
          }),
          autoprefixer
        ]
      }
    },
})

至此，就大功告成了！！！！！让我们试一下！

4. 尝试是否引入成功

4.1 修改src/pages/index/index.vue:

<template>
  <view class="bg-red-500 text-white">
    <text>tailwindcss test</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  onLoad() {},
  methods: {},
}
</script>

<style>

</style>