创建UniAPP项目

本教程基于UniAPP+Vue3。
图片1

安装TailwindCSS

使用包管理安装tailwind及其相关组件

1
2
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init

图片1

配置tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 你要有其他目录，也必须在这里添加一下，没有添加的目录不会被tailwind处理
  content: [
    "./index.html",
    "./pages/**/*.{html,js,ts,jsx,tsx,vue}",
    "./components/**/*.{html,js,ts,jsx,tsx,vue}",
  ].map(resolve),
  // ...
  corePlugins: {
    // 跨多端可以 h5 开启，小程序关闭
    preflight: false,
  },
};

图片1

在App.vue或者其他全局css文件中引入

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

图片1

创建vite.config.js文件，并在其中配置tailwind。（HBuilderX创建的UniAPP项目中自带vite，只要配置vite.config.js即可启用，无需额外安装）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  plugins: [
    uni()
  ],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss")({
          // 注意此处，手动传入你 `tailwind.config.js` 的绝对路径
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

图片1

验证是否引入成功

最后，测试发现TailwindCSS已被成功引入
图片1

我不使用weapp-tailwindcss这个项目是因为我仅只做安卓APP，无需兼容其他端，故不引入其他冗余组件。如果大家需要全端兼容可参考其项目文档。本文也是参考此项目文档配置的
被CSDN的教材坑了很久，终于引入成功了，总结一下


广告
广告正在加载中...
暂不开放评论，如对本文有任何疑问或建议，请联系apple@mr-wu.top
All Tags