主页 / user-15167500

rozsazoltan's questions

Martin Hope
rozsazoltan
Asked: 2025-04-12 18:48:32 +0800 CST
  • 5

我想声明一个@utility名为 的函数animate-repeat-{number}，它的作用是在使用时修改一个变量；这个变量我把它绑定到所有动画的重复次数上。这样就成功了。

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}

@theme但是，当我在（或者如果它默认存在，如 animate-bounce）中声明动画时，.animate-bounce { ... }该类通过变量接收动画：

.animate-bounce {
  animation: var(--animate-bounce);
}

这里的问题是，即使我覆盖了的值--animate-bounce，DevTools（F12）仍然将其突出显示为bounce 1s infinite而不是bounce 1s var(--animate-repeat-count, infinite)。

不起作用的示例@theme
不起作用的示例 TailwindCSS v4 Playground（带有@theme）
弹跳 1 秒无限 --animate-repeat-count 未定义

如果我在 中声明动画@utility，问题在于默认动画@theme会优先。用 !important 覆盖它就可以了。

自然，没有了!important，theme层就更强，我无法覆盖它；这就是它能与一起工作的原因!important。

不工作 与……合作important
无效示例 TailwindCSS v4 Playground（无重要信息） 成功示例 TailwindCSS v4 Playground（重要）
无效示例 TailwindCSS v4 Playground（无重要信息） 成功示例 TailwindCSS v4 Playground（重要） 

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility animate-bounce {
  animation: bounce 1s var(--animate-repeat-count, infinite) !important;
}

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}
</style>

<div class="p-10 text-center">
  <button class="mx-auto animate-bounce bg-green-300 px-8 py-2 animate-repeat-2">
    Bounce animation repeated 2 times in 1s.<br>(It only works with !important because utilities are weaker than the theme layer.)
  </button>
</div>

如何才能使在默认情况下正确声明的动画@theme工作，而无需使用!important？我希望以下代码的工作方式与三个共享游乐场中的最后一段代码相同：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --animate-bounce: bounce 1s var(--animate-repeat-count, infinite);
}

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}
</style>

<div class="p-10 text-center">
  <button class="mx-auto animate-bounce bg-green-300 px-8 py-2 animate-repeat-2">
    Bounce animation repeated 2 times in 1s. (Not working)
  </button>
</div>

tailwind-css
Martin Hope
rozsazoltan
Asked: 2024-12-14 02:11:22 +0800 CST
  • 5

urlFilter当我按照应重定向到页面的规则指定站点的确切 URL 时/questions，它会错误地重定向该站点的每个页面（例如，个人资料、特定问题等）。

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": {
        "url": "https://stackoverflow.com/questions"
      }
    },
    "condition": {
      "urlFilter": "https://stackoverflow.com",
      "resourceTypes": ["main_frame"]
    }
  }
]

测试

https://stackoverflow.com         | redirected (OK)   |
https://stackoverflow.com/another | redirected (FAIL) | expected: not redirect

我如何在 ManifestV3 中制定仅重定向https://stackoverflow.com？

google-chrome-extension
Martin Hope
rozsazoltan
Asked: 2024-11-13 09:10:48 +0800 CST
  • 5

在 Tauri 中，我为特定的桌面应用运行一个 HTTP 服务器，并在开发过程中通过从适当的位置加载相应的 HTML 文件来显示其内容。在构建过程中，Vite 会将此 HTML 文件放置在 dist 文件夹中。

问题是，如何在发布应用程序中引用此文件？

我尝试了一些简单的方法，例如：./../dist/index.client.html，但没有奏效。经过几次尝试，我开始在线搜索，但我只找到与“资源”相关的解决方案。我以前从未真正使用过 Tauri 的这一部分。

我如何distDir从 Rust 访问发布应用程序？

let is_release = env::var("APP_ENV").unwrap_or_else(|_| "development".to_string()) == "production";

if is_release {
    let html_path = "../dist/index.client.html"; // here
    match fs::read_to_string(html_path) {
        Ok(html_content) => {
            // Success
            Ok::<_, warp::Rejection>(warp::reply::html(html_content))
        }
        Err(_) => {
            let html_content = format!(r#"
                <html>
                    <head><title>Error</title></head>
                    <body>
                        <h1>Index file not found...</h1>
                        <p>{}</p>
                    </body>
                </html>
            "#, html_path).to_string();
            Ok::<_, warp::Rejection>(warp::reply::html(html_content))
        }
    }
}
rust
Martin Hope
rozsazoltan
Asked: 2024-09-02 00:28:12 +0800 CST
  • 5

总结

text-primary-500/50没有按预期工作。

声明动态颜色

我有一个名为 的颜色primary。此颜色没有任何特定设置；相反，我根据模板分配现有颜色。如果父元素具有 类theme-red，则primary颜色应与颜色基本匹配red。如果父元素具有 类theme-blue，则primary颜色应与颜色匹配blue。默认情况下，主颜色为红色。

我在下面的例子中实现了这一点。

例子

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
        },
      },
    },
  },
}
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<style type="text/tailwindcss">
  @layer utilities {
    .theme-red {
      --color-primary-500: theme('colors.red.500');
    }

    .theme-blue {
      --color-primary-500: theme('colors.blue.500');
    }
  }
</style>

<div>
  <div class="text-green-500">
    Default Green Color
  </div>
  <div class="text-green-500/50">
    Default Green Color With Opacity
  </div>
</div>

<!-- Not working examples with dynamic primary color -->
<div class="theme-red">
  <div class="text-primary-500">
    Example Red Theme
  </div>
  <div class="text-primary-500/50">
    Example Red Theme With Opacity
  </div>
</div>

<div class="theme-blue">
  <div class="text-primary-500">
    Example Blue Theme
  </div>
  <div class="text-primary-500/50">
    Example Blue Theme With Opacity
  </div>
</div>

结果

不透明度原色不起作用

不透明度动态颜色不起作用

透明颜色（例如）会出现此问题text-primary-500/50。也就是说，不透明度应为text-primary-5000.5。它不起作用，因为text-primary-500本质上是十六进制颜色，但在 CSS 中，我们期望使用 RGB 颜色代码，然后我们可以将其与 0-1 范围内的不透明度混合。我该如何使其工作，以便其text-primary-500/50功能与我编写的逻辑类似？

预期行为

我希望原色与基色的工作方式相同，如上一个结果中的绿色所示。以下是我想要的示例。

预期结果

css