当前位置：首页 > news >正文

TailWindCss 在Hbuilderx中使用

news 2025/8/8 5:01:48

基于这个插件 weapp-tailwindcss

地址

本次说明基于HbuilderX 创建的项目非CLI

安装步骤按照文档走，先安装上几个依赖。然后是几个配置文件

tailwind-input.css tailwind的css文件用来引入到app.vue


/* #ifdef H5 */
@tailwind base;  /* 如果是小程序的话，这一行注释掉，因为tailwind base模块提供的一些样式选择器是基于*，这在小程序中会报错 */  
/* #endif */@tailwind components;  
@tailwind utilities;

tailwind.config.js tailwind 的配置文件

const path = require("path");
const resolve = (p) => {return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./index.html', './**/*.{html,vue}'].map(resolve),theme: {extend: {colors: {white: '#ffffff',black: '#000000',main: '#333333',content: '#666666',muted: '#999999',light: '#e5e5e5',primary: {DEFAULT: '#4173ff'},success: '#5ac725',warning: '#f9ae3d',error: '#f56c6c',info: '#909399',page: '#f6f6f6'},fontSize: {xs: '24rpx',sm: '26rpx',base: '28rpx',lg: '30rpx',xl: '32rpx','2xl': '34rpx','3xl': '38rpx','4xl': '40rpx','5xl': '44rpx'}},},plugins: [],corePlugins: {// 不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它preflight: false}
}

vite.config.js 目下没有的需要手动创建下

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;
// vite 插件配置
const vitePlugins = [uni(), uvwt({disabled: WeappTailwindcssDisabled
})];const resolve = (p) => {return path.resolve(__dirname, p);
};const postcssPlugins = [require("autoprefixer")(),require("tailwindcss")({config: resolve("./tailwind.config.js"),}),
];
if (!WeappTailwindcssDisabled) {postcssPlugins.push(require("postcss-rem-to-responsive-pixel")({rootValue: 32,propList: ["*"],transformUnit: "rpx",}));
}
// https://vitejs.dev/config/
export default defineConfig({plugins: vitePlugins,// 假如 postcss.config.js 不起作用，请使用内联 postcss Latsetcss: {postcss: {plugins: postcssPlugins,},},
});