首页 前端知识 uniapp安装使用tailwindcss

uniapp安装使用tailwindcss

2025-03-14 11:03:29 前端知识 前端哥 117 913 我要收藏
1.版本说明

vue3

2.安装说明

1)执行安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2)配置tailwind.config.js

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,
  },
};

3)配置vite.config.js,如没有则自己手动创建一个即可

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"),
      ],
    },
  },
});

4)引入,我是在app.vue中引入的

5)测试,随便找个路径编写样式后,查看效果即可

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23568.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!