uni-app配置tailwindcss
前置: 脚手架创建的uniapp项目,vscode执行,vue3版本。
按照以下步骤,就可以在uniapp项目中使用呢tailwind了。
1. pnpm install -D tailwindcss postcss autoprefixer
2. npx tailwindcss init -p
3. 在 tailwind.config.js 中写入
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}
4. 在App.vue中添加
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
5. 在vite.config.js中修改
import { defineConfig } from "vite";
import tailwindcss from 'tailwindcss';
import uni from "@dcloudio/vite-plugin-uni";
export default defineConfig({
css: {
postcss: {
plugins: [
tailwindcss(),
],
},
},
plugins: [uni()],
});
6. 小程序适配 pnpm i @uni-helper/vite-plugin-uni-tailwind
// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from 'tailwindcss';
import uni from "@dcloudio/vite-plugin-uni";
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind';
export default defineConfig({
css: {
postcss: {
plugins: [
tailwindcss(),
],
},
},
plugins: [uni(), uniTailwind()],
});
7.rem to rpx,由于tailwind默认是rem单位,需要转到rpx
pnpm i tailwindcss-rem2px-preset -D
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
presets: [
require('tailwindcss-rem2px-preset').createPreset({
// 32 意味着 1rem = 32rpx
fontSize: 32,
// 转化的单位,可以变成 px / rpx
unit: 'rpx'
})
],
}
附加自己的依赖
"dependencies": {
"@dcloudio/uni-app": "3.0.0-3081220230817001",
"@dcloudio/uni-app-plus": "3.0.0-3081220230817001",
"@dcloudio/uni-components": "3.0.0-3081220230817001",
"@dcloudio/uni-h5": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-alipay": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-baidu": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-jd": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-lark": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-qq": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3081220230817001",
"@dcloudio/uni-mp-weixin": "3.0.0-3081220230817001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3081220230817001",
"@uni-helper/vite-plugin-uni-tailwind": "^0.13.1",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@dcloudio/types": "^3.3.2",
"@dcloudio/uni-automator": "3.0.0-3081220230817001",
"@dcloudio/uni-cli-shared": "3.0.0-3081220230817001",
"@dcloudio/uni-stacktracey": "3.0.0-3081220230817001",
"@dcloudio/uni-ui": "^1.4.28",
"@dcloudio/vite-plugin-uni": "3.0.0-3081220230817001",
"@vue/runtime-core": "^3.2.45",
"@vue/tsconfig": "^0.1.3",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"tailwindcss-rem2px-preset": "^1.0.3",
"typescript": "^4.9.4",
"vite": "4.1.4",
"vue-tsc": "^1.0.24"
}