当前位置: 首页 > 知识库问答 >
问题:

javascript - 为什么这个演示Demo中 tailwindcss 自定义variant不生效?

穆旭尧
2024-04-30

项目Demo

https://stackblitz.com/edit/vitejs-vite-avo12b?file=%3D%3D%3D...

  1. tailwind.config.js 定义自定义变体
    ···
    const plugin = require('tailwindcss/plugin');
    /* @type {import('tailwindcss').Config} /

export default {
content: ['./index.html'],
theme: {

extend: {},

},
plugins: [

plugin(function ({ addVariant, e }) {  addVariant('hoverColor', ({ modifySelectors, separator }) => {    return modifySelectors(({ className }) => {      let res = `.${e(`hoverOn${separator}${className}`)}:hover`;      //.hoverOn\:text-red-600:hover      console.log('res', res);      return res;    });  });}),

],
};

···

注意点: 注册名称为hoverColor, 但是 modifySelector返回的 名称是 hoverOn开头

  1. index.html 两种方式使用自定义变体

     <p class="hoverOn:text-red-600">  HoverOn : The quick brown fox jumps ddover the lazy dog. </p> <p class="hoverColor:text-red-600">  HoverColor: The quick brown fox jumps ddover the lazy dog. </p>

打开项目 查看 说明.txt文件,在项目的src/output.css文件中会有 tailwind转换后生成的css文件

问题: 为什么 class="hoverColor:text-red-600" class="hoverOn:text-red-600" 都没有实现 想要的 hover上变红的效果?

我的理解: 生成的css中只有

.hoverOn\:text-red-600:hover {  --tw-text-opacity: 1;  color: rgb(220 38 38 / var(--tw-text-opacity));}

index.html中的 两个 p的class 都没有引用到该样式属性。

那么问题是 针对index.html中的 两个class,他们对应的真实的样式名是什么样的?
在哪里可以看到相关文档说明?

共有1个答案

寿毅庵
2024-04-30

对于 hoverOn:text-red-600,没有找到 hoverOn 的变体,所以没有生成样式;

对于 hoverColor:text-red-600,根据你的代码,将生成 `.${e(`hoverOn${separator}${className}`)}:hover` ,即 .hoverOn\:text-red-600:hover

注意,此处生成的样式使得上一个 p 元素被 hover 时文本变为红色

对于 hocus:text-green-500,将生成 .hocus\:text-green-500:focus.hocus\:text-green-500:hover

Tailwind Play

 类似资料:
  • https://play.tailwindcss.com/sNnjkZnGWF?file=config 项目里配置了变体 为什么 当button 通过tab 获取焦点的时候 红色边框border_always样式没有生效?

  • 我在运行钢筋应用程序时遇到了类似的问题 基本上,我想从以下位置运行演示代码:https://github.com/hukl/fancyapi 当我在根目录中时,我会: ERL如何找到fancyapi代码?

  • Bootstrap为构建表提供了一个干净的布局。 Bootstrap支持的一些表元素是 - 标签 描述 <table> 用于以表格格式显示数据的包装元素 <thead> 表标题行(tr)的容器元素,用于标记表列。 <tbody> 表格主体中的表行(tr)的容器元素。 <tr> 显示在单行上的一组表格单元格(td或th)的容器元素。 <td> 默认表格单元格。 <th> 列(或行,取决于范围和位置)

  • 问题内容: 我找到了一个网站,该网站提供了将自定义标签添加到html的指南,就像人们制作新的HTML5标签一样。我必须承认,我认为添加我自己的标签,“扫描”代码并查找所需内容会更好。但是我发现的每个网站,人们都说这不好。…但是为什么不好呢? 带有类的示例html: 在这里,我可以使用自定义标签进行操作,我认为这很容易找到解决方法,所以为什么不这样做: 问题答案: 自定义标签不是邪恶的 请考虑一下:

  • chrome浏览器 onclick链接 O:https://www.w3schools.com窗口打开 X:about:空白窗口打开

  • 和有什么区别? 我对。class文件进行了反编译,发现在第一种情况下,JVM将使用multianwearray来创建数组,而在第二种情况下,它将使用AneWarRay。 我认为在第一种情况下,JVM将创建一个连续的空间。我说的对吗?