我对所有类使用自定义前置tw-的Tailwind CSS.然而,我很难让群组悬停功能正确工作.这是我正在使用的代码:

<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<script>
    tailwind.config = { prefix: 'tw-' }
</script>

<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
  <div class="tw-group tw-text-xl">
    <strong class="tw-group-hover:tw-text-red-500">Hover on me </strong>
    <strong class="tw-group-hover:tw-text-green-500">the texts will be </strong>
    <strong class="tw-group-hover:tw-text-blue-500">of different colors</strong>
  </div>
</div>

我也try 过

<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<script>
    tailwind.config = { prefix: 'tw-' }
</script>

<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
  <div class="tw-group tw-text-xl">
    <strong class="tw-group-hover:text-red-500">Hover on me </strong>
    <strong class="tw-group-hover:text-green-500">the texts will be </strong>
    <strong class="tw-group-hover:ext-blue-500">of different colors</strong>
  </div>
</div>

以下内容不带前置即可使用

<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<div class="flex h-screen justify-center items-center">
  <div class="group text-xl">
    <strong class="group-hover:text-red-500">Hover on me </strong>
    <strong class="group-hover:text-green-500">the texts will be </strong>
    <strong class="group-hover:text-blue-500">of different colors</strong>
  </div>
</div>

推荐答案

the documentation计算:

重要的是要明白,这个前置是在任何变体修饰语中添加的after个.这意味着具有sm:hover:等响应或状态修饰符的类仍然具有响应或状态修饰符first,您的自定义前置出现在结肠后面:

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

所以对于您的情况,通常是group-hover:tw-<class name>:

tailwind.config = { prefix: 'tw-' }
<script src="https://cdn.tailwindcss.com/3.2.4"></script>

<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
  <div class="tw-group tw-text-xl">
    <strong class="group-hover:tw-text-red-500">Hover on me </strong>
    <strong class="group-hover:tw-text-green-500">the texts will be </strong>
    <strong class="group-hover:tw-text-blue-500">of different colors</strong>
  </div>
</div>

Css相关问答推荐

如何在没有额外间隔的情况下使用Angularmaterial 图标?

为什么我的Angular material css文件不工作?

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

不了解重复-线性-渐变 colored颜色 停止

如何在不重叠侧边栏的情况下尽可能使元素居中?

material 设计--Bootstrap输入域问题

将特定样式应用于递归Angular 元素

.NET 8 预览版 6 中不使用新项目模板提供 Blazor CSS 文件

如何使shiny 的showNotification可滚动?

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字?

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

.SVG 文件对象在锚标签下可点击

如何在不使用 !important 的情况下提高优先级?

如何添加一个类以在开始时触发转换

如何测试页面上的文本被删除

如何定位 CSS 网格布局中的特定列或行?

创建 CSS 全局变量:样式表主题管理

使用 Bootstrap 设置身体的最大宽度

我的 inline-block 元素没有正确排列

谷歌的无图像按钮