HBuilderX创建uniapp项目使用 tailwindcss

文章目录

一、创建package.json文件
[二、打开终端 yarn / npm 安装依赖](#二、打开终端 yarn / npm 安装依赖)
[三、创建 vue.config.js文件](#三、创建 vue.config.js文件)
四、创建postcss.config.js文件
五、创建tailwind.config.js文件
六、App.vue文件的style中引入tailwindcss

一、创建package.json文件

js 复制代码

{
  "devDependencies": {
    "autoprefixer": "9",
    "postcss": "7",
    "postcss-rem-to-responsive-pixel": "^5.1.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "weapp-tailwindcss-webpack-plugin": "^1.6.8",
    "webpack": "npm:webpack@webpack-4"
  }
}

二、打开终端 yarn / npm 安装依赖

三、创建 vue.config.js文件

js 复制代码

// 为了 tailwindcss jit 开发时的热更新
if (process.env.NODE_ENV === "development") {
  process.env.TAILWIND_MODE = "watch";
}

const {
  UniAppWeappTailwindcssWebpackPluginV4,
} = require("weapp-tailwindcss-webpack-plugin");

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  //....
  configureWebpack: {
    plugins: [new UniAppWeappTailwindcssWebpackPluginV4()],
  },
  //....
};

module.exports = config;

四、创建postcss.config.js文件

js 复制代码

const path = require("path");

module.exports = {
  plugins: [
    require("autoprefixer")({
      remove: process.env.UNI_PLATFORM !== "h5",
    }),
    require("tailwindcss")({
      config: path.resolve(__dirname, "./tailwind.config.js"),
    }),
    // rem 转 rpx
    require("postcss-rem-to-responsive-pixel/postcss7")({
      rootValue: 32,
      propList: ["*"],
      transformUnit: "rpx",
    }),
  ],
};

五、创建tailwind.config.js文件

js 复制代码

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

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
	mode: "jit",
	purge: {
		content: [
			resolve("./index.html"),
			resolve("./pages/**/*.{vue,js,ts,jsx,tsx,wxml}"),
		],
	},
	darkMode: false, // or 'media' or 'class'
	theme: {
		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'
		}
	},
	variants: {},
	plugins: [],
	corePlugins: {
		preflight: false,
	},
};
//自定义配置

六、App.vue文件的style中引入tailwindcss

js 复制代码

<style>
	/*每个页面公共css */
	@import "tailwindcss/base";
	@import "tailwindcss/utilities";
</style>