个人中心
gpt4 book ai didi

html - TailwindCSS - 有没有办法不多次写入相同的前缀？例如 `hover:`

转载 作者：行者123 更新时间：2023-12-05 08:45:13 31 4
gpt4 key购买 nike

问题:

class="hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white"

here you see, there is the same prefix repetition.
hover:foo hover:bar hover:hello hover:world hover:something hover:another

我想知道有没有办法不多次写hover:前缀？

想法:

是做类似的事情:

hover:(class class class class class)

with brackets or something like that, so all the classes inside the () will be like one class and automatically added to the hover:

我认为这个想法顺风顺水，但我不知道它的语法。

如果可能的话，这个解决方案也需要与所有其他前缀一起工作

enter image description here

简单示例演示:

// not important, only for deleting the console.warn() 
console.clear();
<script src="https://cdn.tailwindcss.com"></script>

<body class="flex h-screen">
  <button class="m-auto p-4 rounded-md  bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white">
     hello world
   </button>
</body>

我看了所有文档，不是在谈论这个概念:https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active

如果有人在这方面有经验，那将会很有帮助!

最佳答案

正如他在评论中所说的@diego，这在技术上仅靠顺风是不可能的。

tailwind 框架替代方案

也许您使用像 windiCSS 这样的 tailwind 框架 https://windicss.org/features/variant-groups.html

具有此功能的:

<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>

javascript vanilla(简单脚本)

只想要顺风？

所以我认为也许我们可以创建一个简单的 JS 脚本来解决这个问题。

enter image description here 

twHover();

function twHover() {
  // get only the elements that have the hover attribute
  let hoverEls = document.querySelectorAll("[data-hover]");

  // loop through the elements that have the hover attribute
  hoverEls.forEach((el) => {
    // we get the string inside the attribute
    // and then make it into a array
    let twHoverClasses = `${el.dataset.hover}`.split(" ");

    // loop through the classes inside the element's attributes
    twHoverClasses.forEach((className) => {
      // add the class for you `hover:className`
      el.classList.add(`hover:${className}`);
    });
  });
}
<script src="https://cdn.tailwindcss.com"></script>

<body class="flex h-screen">
  <!-- original -->
  <button class="m-auto p-4 rounded-md  bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white">original</button>
  <!-- with script -->
  <button data-hover="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md  bg-blue-200 transition">with script</button>
</body>

想从 JS 脚本中获得更多？

  • 还有 :focus、:lg、:sm 等。

使用这个:

// this can be any preudo class that tailwind can have
twPseudo("focus");
// if there is nothing as parameter, we use hover
twPseudo();

function twPseudo(pseudo = "hover") {
  // get only the elements that have the hover attribute
  let hoverEls = document.querySelectorAll(`[data-${pseudo}]`);

  // loop through the elements that have the hover attribute
  hoverEls.forEach((el) => {
    // we get the string inside the attribute
    // and then make it into a array
    let twHoverClasses = `${el.dataset[pseudo]}`.split(" ");

    // loop through the classes inside the element's attributes
    twHoverClasses.forEach((className) => {
      // add the class for you `hover:className`
      el.classList.add(`${pseudo}:${className}`);
    });
  });
}
<script src="https://cdn.tailwindcss.com"></script>

<body class="grid grid-cols-2 place-items-center h-screen">
  <!-- original -->
  <div>
    <h2 class="text-3xl font-bold text-blue-500 mb-4">original</h2>

    <!-- hover -->
    <button class="m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white">hover</button>

    <!-- focus -->
    <button class="m-auto p-4 rounded-md bg-blue-200 transition focus:bg-blue-400 focus:-translate-y-2 focus:-translate-x-2 focus:scale-110 focus:shadow-2xl focus:shadow-blue-40 focus:text-white">focus</button>
  </div>

  <!-- with script -->
  <div>
    <h2 class="text-3xl font-bold text-blue-500  mb-4">with script</h2>

    <!-- hover -->
    <button data-hover="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md bg-blue-200 transition">hover</button>

    <!-- focus -->
    <button data-focus="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md bg-blue-200 transition">focus</button>
  </div>
</body>

enter image description here

also make sure to put the script code at the end of the page or inside a DomContentLoaded event

优点:

  • 输入较少的重复字符

enter image description here

more than 25 chars saved (only in your example)

  • 多行属性

enter image description here

As you can see you can write your classes in one line,
and the hover logic in another line. making it easy to debug.

  • 开箱即用。
    只需复制粘贴，调用函数即可。
    带有正确的参数(focus, sm, lg, xl, 2xl)或没有任何参数(将是hover)
// just call it at the end of the page
twPseudo();

关于html - TailwindCSS - 有没有办法不多次写入相同的前缀？例如 `hover:`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73623088/

31 4 0
文章推荐： linux - 如何使用 shell 脚本从 2 个文件中获取内容并将该内容附加到新文件
文章推荐： clojure - 你能扩展一个类型/记录来实现 Clojure 中的 str 函数吗？
文章推荐： python - 如何将字典值分离到新字典中？
文章推荐： java - 在 Java 中跳过 String.Contains 中的子字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com