TailWindCss 在Hbuilderx中使用

基于这个插件 weapp-tailwindcss

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

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

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

css 复制代码

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

@tailwind components;  
@tailwind utilities;

tailwind.config.js tailwind 的配置文件

js 复制代码

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 目下没有的需要手动创建下

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 Latset
  css: {
    postcss: {
      plugins: postcssPlugins,
    },
  },
});

重新运行下，就可以使用tailwind 的css 类了