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

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

转载作者：行者123 更新时间：2023-12-05 08:45:13

问题:

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:

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

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

简单示例演示:

// 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 脚本来解决这个问题。

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>

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

优点:

输入较少的重复字符

more than 25 chars saved (only in your example)

多行属性

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/

文章推荐： python - 如何将字典值分离到新字典中？

文章推荐： java - 在 Java 中跳过 String.Contains 中的子字符串

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

tailwind 框架替代方案

javascript vanilla(简单脚本)

想从 JS 脚本中获得更多？

优点: