Browse Source

```

refactor(tailwind.config.js): 禁用部分Tailwind CSS类以解决微信小程序兼容性问题

为了解决微信小程序中的兼容性问题,禁用了以下Tailwind CSS类:
- `gap`:微信小程序不支持 gap 属性- `lineClamp`:微信小程序不支持 line-clamp 类
- `textIndent`:禁用 text-indent
- `writingMode`:禁用 writing-mode
- `hyphens`:禁用 hyphens
```
master
科技小王子 3 weeks ago
parent
commit
24c6e3aa9f
  1. 9
      src/app.scss
  2. 2
      src/components/AdminPanel.tsx
  3. 9
      tailwind.config.js

9
src/app.scss

@ -92,3 +92,12 @@ button[open-type="chooseAvatar"] {
image {
margin: 0; /* 全局设置图片的 margin */
}
/* 管理员面板功能项交互效果 */
.admin-feature-item {
transition: transform 0.15s ease-in-out;
}
.admin-feature-item:active {
transform: scale(0.95);
}

2
src/components/AdminPanel.tsx

@ -117,7 +117,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
{adminFeatures.map((feature) => (
<View
key={feature.id}
className={`${feature.color} border rounded-xl p-4 active:scale-95 transition-transform`}
className={`${feature.color} border rounded-xl p-4 admin-feature-item`}
onClick={feature.onClick}
>
<View className="flex items-center mb-2">

9
tailwind.config.js

@ -2,11 +2,12 @@
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'media', // or 'media' or 'class'
// 禁用 important 语法,微信小程序不支持 .\! 这样的选择器
theme: {
extend: {},
},
variants: {
extend: {},
// 禁用所有变体,避免生成微信小程序不支持的选择器
},
plugins: [],
corePlugins: {
@ -24,5 +25,11 @@ module.exports = {
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 相关类
},
};

Loading…
Cancel
Save