UniApp配置使用原子化tailwindcss

参考视频

创建项目

新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可

创建完成后,如果是要编译到小程序的项目则可以先将项目运行到小程序打开了

初始化package.json

执行

js 复制代码
npm init -y

安装和配置

安装

bash 复制代码
npm i -D tailwindcss postcss autoprefixer
# 安装完成后再初始化 tailwind.config.js 文件
npx tailwindcss init

配置

在项目目录下创建 shared.js,代码如下,为了保证后面这个方法可以复用

js 复制代码
import path from 'path'

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

module.exports = {
	resolve
}

在项目根目录下创建vite.config.js,用于注册引用tailwindcss,代码如下:

js 复制代码
import {
	defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
	resolve
} from './shared.js'

export default defineConfig({
	plugins: [uni()],
	css: {
		postcss: [
			require('tailwindcss')({
				config: resolve("./tailwind.config.js")
			}),
			require('autoprefixer')()
		]
	}
});

找到项目根目录下的 tailwind.config.js,这个在上面有初始化命令的,内容更改如下:

js 复制代码
const {
	resolve
} = require('./shared.js')

module.exports = {
	// 这里给出了一份 uni-app /taro 通用示例,具体要根据你自己项目的目录结构进行配置
	// 不在 content 包括的文件内,你编写的 class,是不会生成对应的css工具类的
	content: ['./public/index.html', './pages/**/*.{html,js,ts,jsx,tsx,vue}','./components/**/*.{html,js,ts,jsx,tsx,vue}'].map(resolve),
	// 其他配置项
	// ...
	corePlugins: {
		// 小程序不需要 preflight,因为这主要是给 h5 的,如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它
		preflight: false
	}
}

找到App.vue,配置tailwindcss全局生效

js 复制代码
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
</style>

插件安装

js 复制代码
npm i -D weapp-tailwindcss

安装完成后,在package.json里面配置如下命令

js 复制代码
 "scripts": {
   "postinstall": "weapp-tw patch"
 }

注册

找到根目录下的vite.config.js,内容如下:

js 复制代码
import {
	defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
	resolve
} from './shared.js';
import {
	UnifiedViteWeappTailwindcssPlugin as uvwt
} from "weapp-tailwindcss/vite";

export default defineConfig({
	plugins: [uni(), uvwt({
		// 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
		// 上面参考视频没有这一个,但是不加的话会报错
		tailwindcssBasedir: __dirname
	})],
	css: {
		postcss: {
			plugins: [
				require('tailwindcss')({
					config: resolve("./tailwind.config.js")
				}),
				require('autoprefixer')()
			]
		}
	}
});

然后运行项目到浏览器或者小程序都是正常使用的了

相关推荐
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw4 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者9 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮10 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘14 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero17 小时前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app