fix(tailwind): 更新配置以兼容微信小程序

- 启用 autoprefixer 并新增 postcss-nested 插件支持嵌套语法
- 扩展主题颜色,添加 primary 色系
- 更新 content 路径包含 public/index.html
- 禁用 preflight 以移除默认样式重置
- 移除多数 corePlugins 禁用项,保留 preflight 禁用,简化兼容性配置
This commit is contained in:
2026-06-30 15:45:12 +08:00
parent c39ee72c73
commit e4524154e0
2 changed files with 25 additions and 34 deletions

View File

@@ -1,8 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {
remove: true // 禁用 autoprefixer避免添加浏览器前缀
},
},
autoprefixer: {},
'postcss-nested': {}
}
}

View File

@@ -1,35 +1,27 @@
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'media', // or 'media' or 'class'
// 禁用 important 语法,微信小程序不支持 .\! 这样的选择器
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {},
},
variants: {
// 禁用所有变体,避免生成微信小程序不支持的选择器
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
},
},
plugins: [],
corePlugins: {
// 禁用微信小程序不支持的功能
preflight: false, // 禁用默认样式重置
// 禁用包含复杂选择器的插件
space: false, // 禁用 space-x, space-y 等(包含 :not([hidden]) 选择器)
divideWidth: false, // 禁用 divide-x, divide-y 等
divideColor: false,
divideStyle: false,
divideOpacity: false,
// 新增禁用项,解决微信小程序兼容性问题
gap: true, // 禁用 gap 类,因为微信小程序不支持 gap 属性
lineClamp: false, // 禁用 line-clamp 类,微信小程序不支持
textIndent: false, // 禁用 text-indent
writingMode: false, // 禁用 writing-mode
hyphens: false, // 禁用 hyphens
// 禁用所有可能包含问题的变体
visibility: false, // 禁用 visibility 相关类,避免生成 .\!visible
// 禁用伪类和交互变体,避免生成 .active\: 等选择器
scale: false, // 禁用 scale 相关类,避免生成问题选择器
transform: false, // 禁用 transform 相关类
transitionProperty: false, // 禁用 transition 相关类
},
};
// Taro 小程序端不需要 preflight浏览器重置样式
preflight: false
}
}