HBuilderX创建uniapp项目使用 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>

相关推荐
Q_Q5110082851 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code2 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张3 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921434 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082856 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
ღ᭄ꦿ࿐Never say never꧂8 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀9 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_9151063216 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 天前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字1 天前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app