fix(tailwind): 更新配置以兼容微信小程序
- 启用 autoprefixer 并新增 postcss-nested 插件支持嵌套语法 - 扩展主题颜色,添加 primary 色系 - 更新 content 路径包含 public/index.html - 禁用 preflight 以移除默认样式重置 - 移除多数 corePlugins 禁用项,保留 preflight 禁用,简化兼容性配置
This commit is contained in:
@@ -1,8 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {
|
||||
remove: true // 禁用 autoprefixer,避免添加浏览器前缀
|
||||
},
|
||||
},
|
||||
autoprefixer: {},
|
||||
'postcss-nested': {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user