nuxt.js - Tailwind group-hover 不起作用(即使使用默认变体)
问题描述
Tailwindgroup-hover
不适合我。我只是想改变文本颜色,这不需要任何特殊配置。
我是不是忘记了什么?
作为参考,我的项目是一个 Vue (Nuxt.js) 应用程序,所有其他 Tailwind 功能都适用于我,我已经在其他项目上使用 TW group-hover 没有问题。
失败: 在我的应用程序的基本欢迎页面上尝试了以下操作。
<div class="group">
<div class="group-hover:text-gray-300">Hover me</div>
<div class="group-hover:text-red-300">Hover me</div>
</div>
工作:相同的代码在 Codepen https://codepen.io/MarsAndBack/pen/MWjroVZ中工作正常
我的tailwind.config.js
:
module.exports = {
variants: {},
plugins: [
require('@tailwindcss/custom-forms')
],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js'
]
},
theme: {
extend: {
colors: {
brandGreen: {
light: '#5bb751',
default: '#5bb751',
dark: '#3b7935',
darker: '#33602e'
}
}
},
screens: {
'xs': '480px'
}
}
}
解决方案
找到了解决方法,但我不明白。
我必须明确定义文本颜色的group-hover
变体,即使文本颜色是默认情况下应该工作的基本属性,而不必这样做,根据 TW docs。
对于其他基本的 TW 项目,我从来不需要这样做。我的 Codepen 示例无需任何特殊配置即可工作。也许我的 Nuxt+TW 上下文需要配置?我还测试了禁用 PurgeCSS 的原始问题,但没有效果。
解决方案:
在tailwind.config.js
中,为 明确定义一个group-hover
变体textColor
,即使它在没有这个的情况下也可以工作(对于文本颜色等基本属性):
module.exports = {
// ...
variants: {
textColor: ['group-hover'],
}
// ...
}
推荐阅读
- excel - 将多个值从一个 .xlsm 文件返回到另一个
- javascript - 构建自定义threejs几何
- microsoft-graph-api - 访问 Graph API 以获取授权类型为 client_credentials 的特定用户的邮箱消息时出现“UnknownError”。仅限应用权限
- android - 每当我在 react-native 中运行新项目时,我都会收到错误消息,即不接受 android sdk 许可证如何永久摆脱它?
- java - Observable 转换为 kotlin - 问题
- abstract-syntax-tree - 如何使来自 AST 的 URI 位置映射到读取的文件上
- localhost - Apache Nifi 并连接到 wamp 服务器上的本地数据库未找到数据库
- c# - 如何在一个聊天机器人中同时使用 LUIS 和 FormFlow
- google-bigquery - 将 YYYY-MM-DD 转换为 YYYYMMDD 并插入到大查询分区表中
- android - 在文本上显示提示文本(“我是文本”,提示:“我的提示”)颤动