rozsazoltan's questions

Eu queria declarar um @utilitychamado animate-repeat-{number}, cuja função é modificar uma variável no momento do uso; uma variável que vinculo à contagem de repetições em todas as minhas animações. Isso funciona.

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

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

Entretanto, quando declaro a animação em @theme(ou se ela existe por padrão, como animate-bounce), a .animate-bounce { ... }classe recebe a animação por meio de uma variável:

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

O problema aqui é que, mesmo que eu substitua o valor de --animate-bounce, o DevTools (F12) ainda o destaca como bounce 1s infiniteem vez de bounce 1s var(--animate-repeat-count, infinite).

Exemplo não funcional com@theme
Exemplo não funcional TailwindCSS v4 Playground (com @theme)

Se eu declarar a animação em @utility, o problema é que a animação padrão de @themetem precedência. Sobrescrevê-la com !important funciona bem.

Naturalmente, sem !important, a themecamada é mais forte e não consigo substituí-la; é por isso que funciona com !important.

Não está funcionando	Trabalhando comimportant
Exemplo não funcional TailwindCSS v4 Playground (sem importância)	Exemplo bem-sucedido do TailwindCSS v4 Playground (com importantes)

<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>

Como posso fazer com que a animação declarada @themefuncione corretamente por padrão, sem precisar usar !important? Espero que o código a seguir funcione da mesma forma que o anterior, dos três playgrounds compartilhados :

<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>

Quando especifico a URL exata do site como urlFilterem uma regra que deve redirecionar para /questionsa página, ele continua redirecionando todas as páginas deste site (por exemplo, perfil, pergunta específica, etc.) incorretamente.

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

Testes

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

Como posso formular no ManifestV3 para redirecionar somente https://stackoverflow.com?

No Tauri, estou executando um servidor HTTP para um aplicativo de desktop específico, e exibi seu conteúdo durante o desenvolvimento carregando o arquivo HTML correspondente do local apropriado. Este arquivo HTML será colocado na pasta dist pelo Vite durante o processo de construção.

A questão é: como posso referenciar esse arquivo no aplicativo de lançamento?

Tentei algo direto como: ./../dist/index.client.html, mas não funcionou. Depois de várias tentativas, comecei a pesquisar online, mas só encontrei soluções relacionadas a "recursos". Eu realmente não usei essa parte do Tauri antes.

Como posso acessar o distDiraplicativo de lançamento do 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))
        }
    }
}

Resumo

text-primary-500/50não está funcionando como esperado.

Declarar cor dinâmica

Eu tenho uma cor chamada primary. Essa cor não tem nenhuma configuração específica; em vez disso, eu atribuo cores existentes com base em um modelo. Se o elemento pai tiver a classe theme-red, a primarycor deve essencialmente corresponder à redcor. Se o elemento pai tiver a classe theme-blue, a primarycor deve corresponder à bluecor. Por padrão, a cor primária é vermelho.

Implementei isso no exemplo a seguir.

Exemplo

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>

Resultado

Cores dinâmicas de opacidade não funcionam

O problema surge com cores transparentes, como text-primary-500/50. Ou seja, deveria estar text-primary-500com opacidade 0,5. Não funciona porque text-primary-500é essencialmente uma cor hexadecimal, mas em CSS, esperávamos um código de cor RGB, que poderíamos então misturar com opacidade em uma escala de 0-1. Como posso fazer funcionar de forma text-primary-500/50semelhante à minha lógica escrita?

Comportamento esperado

Eu esperava que a cor primária funcionasse da mesma forma que as cores base, como mostrado com a cor verde no resultado anterior. Aqui está um exemplo do que eu gostaria.