我是通过vue-cli创建的项目，HBuilderX没有试过，这里介绍使用vue-cli创建的项目，可查看官方文档。这里有两种配置方式（重置主题和重命名类），目的都是考虑兼容性，您可根据实际情况处理。
vue create -p dcloudio/uni-preset-vue my-project
1️⃣ 重置主题
安装依赖
npm install tailwindcss@npm:@tailwindcss/postcss7-compat -D
配置 tailwindcss
在项目根目录创建tailwind.config.js文件，用于配置tailwindcss。
// tailwind.config.js
module.exports = {
purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
separator: '__', // 兼容小程序，将 : 替换成 __
theme: {
// 兼容小程序，将默认配置里带 .和/ 清除
// 如果有些属性你没有用到，请在 corePlugins 里禁用
extend: {},
fontSize: {},
height: {},
inset: {},
screens: {},
spacing: {},
translate: {},
width: {}
},
variants: {},
plugins: [],
corePlugins: {
// 兼容小程序，将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false
}
}
配置 postcss
在根目录的postcss.config.js中的plugins属性添加引入。注意要放在@dcloudio/vue-cli-plugin-uni/packages/postcss之前，非小程序端才能将rpx转换。
// postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('tailwindcss'),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
2️⃣ 重命名类
这里和重置主题配置不同是，不重置默认的配置，而是将配置中类名带.和/替换其他兼容字符。
安装依赖
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D
配置 tailwindcss
// tailwind.config.js
module.exports = {
purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
separator: '__', // 兼容小程序，将 : 替换成 __
theme: {
extend: {}
},
variants: {},
plugins: [],
corePlugins: {
// 兼容小程序，将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false
}
}
配置 postcss
// postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('tailwindcss'),
require('postcss-class-rename')({
'\\\\.': '_' // 兼容小程序，将类名带 .和/ 替换成 _
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
⚠ 引入 tailwindcss
配置完成后我们引入tailwindcss，注意不要在main.js中引入，因为APP端无效，需要在App.vue中引入。
<style>
@import url('tailwindcss/tailwind.css');
</style>
提供