网站系统制作教程,小程序做网站,wordpress 图片title,宁德网站建设维护基于这个插件 weapp-tailwindcss 地址
本次说明基于HbuilderX 创建的项目非CLI
安装步骤按照文档走#xff0c;先安装上几个依赖。然后是几个配置文件
tailwind-input.css tailwind的css文件用来引入到app.vue /* #ifdef H5 */
tailwind base; /* 如果是小程序的话#x… 基于这个插件 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,},},
});重新运行下就可以使用tailwind 的css 类了
